Advanced Technology Days 18. i 19. studenog 2015., Cinestar Arena Centar

10 trikova za brže i bolje Windows 10 aplikacije Igor Ralić

Move to Windows 10

Lots of performance work done (XAML shell apps…) Performance optimizations Example: new compiled XAML format Performance features for XAML developers Example: stay tuned New APIs, one app, billion devices…

Notable performance gains CPU - 15% to 30% Memory - 25% to 45%

.NET Native Compiles IL binaries into native binaries Static linking, no JIT The best of both worlds: managed development with C++ performance Up to 60% improvement in startup Debug/Release configuration Test regularly Upload IL package Store and compiler “in the cloud” bring down the right one Microsoft.NETNative.Analyzer nuget

Move to Windows 10

Profile using the latest tools

Users hate bad performance Nearly every respondent (98%) stressed that performance matters.

Profiling Set goals and & continuously evaluate performance when debugging PerfTips Memory tool CPU graph Drill into the details Application Timeline tool

PerfTips Tooltips with performance information How long was the app running During the previous step Since the last breakpoint Find which sections of code need more investigation

Memory tool & CPU graph Available even after the debugging has stopped Spikes are interesting!

Application Timeline Identify performance issues due to Parsing, layout, rendering Other app code Monitor FPS throughput

Demo

Move to Windows 10 Profile using the latest tools

Virtualize lists

List virtualization Realize only the visible items +a small number of adjacent items Recycle already used elements Just apply new values Good thing: it’s on by default Bad thing: you can easily break it 

Breaking the virtualization Putting a ListView/GridView inside a ScrollViewer Be careful with pull-to-refresh implementations Putting a ListView/GridView inside Grid Row with Height Auto StackPanel Changing the ItemsPanel template ItemsStackPanel, ItemsWrapGrid StackPanel, WrapGrid, VariableSizedWrapGrid

Demo

Without virtualization: With virtualization:

Without virtualization: With virtualization:

Move to Windows 10 Profile using the latest tools Virtualize lists

Optimize data bindings

x:Bind Compiled data binding introduced in UWP Heavy lifting done at compile time Slow runtime reflection (booo) – no more Performance boost Binding to events, too! x:Bind is validated at compile time No more silly typos

Using compiled binding Replace {Binding …} with {x:Bind …} Context for x:Bind is Page or UserControl DataContext is ignored (object-based) Mode=OneTime – new default

Syntax <TextBox Text="{Binding Converter ConverterLanguage ConverterParameter ElementName FallbackValue Mode Path RelativeSource Source TargetNullValue UpdateSourceTrigger}" <TextBox Text="{x:Bind Converter ConverterLanguage ConverterParameter ElementName FallbackValue Mode Path RelativeSource Source TargetNullValue UpdateSourceTrigger}"

DataTemplates Need {x:DataType …} <Image x:Name="ProfileImage" Source="{x:Bind ProfileImage}" RelativePanel.AlignVerticalCenterWithPanel="True" Stretch="Uniform" MaxHeight="100"/> <TextBlock x:Name="Name" …………

Demo

How do I handle… RelativeSource = Self, ElementName = … Simply use the element name (page/UC is the context!) RelativeSource = TemplatedParent Not supported, use TemplateBinding Source/DataContext Use page properties/fields

When to use classic binding? Duck typing – same property name x:Bind option – use interface or base class Programmatic binding creation Can’t add/remove bindings at runtime Use in a Style x:Bind can’t be used in setters

Move to Windows 10 Profile using the latest tools Virtualize lists Optimize data bindings

Load templates in phases

Why phases? Fast scrolling – can’t realize all elements at once Placeholders show up It can get ugly! Defining phases allows Prioritizing the template items Showing at least some data to the user

x:Phase Used to specify the order of realization of elements

x:Phase

Demo

Move to Windows 10 Profile using the latest tools Virtualize lists Load templates in phases Optimize data bindings

Optimize images

Loading large images can be resource intensive DecodePixelWidth and DecodePixelHeight properties If you know the exact image size that you need

Right sized decoding XAML tries to find the best decoding size, unless you connect BitmapImage to the XAML tree after setting the content decode images using synchronous decoding (SetSource) hide image via setting Opacity to 0 or Visibility to Collapsed use a Stretch of None on the image control or brush … If web API allows it, ask for appropriate image dimensions.

Demo

Move to Windows 10 Profile using the latest tools Virtualize lists Defer loading Optimize data bindings Optimize images

Optimize media

MediaElement Full screen playback for most efficient media playback If possible, without other XAML elements IsFullWindow Delay setting the MediaElement source Choose a video format close to the resolution it will be displayed at Not always possible, but a good idea

MediaElement overlay Put other elements to the side of embedded video

Improve media scrubbing Bind slider to MediaElement.Position or update via timer Don’t do both Reasonable timer steps (> 250ms) Scale the slider step frequency with the video length Set the MediaElement.PlaybackRate property to 0 when the user drags the thumb of the slider. Use PointerPressed, PointerMoved, PointerReleased

Move to Windows 10 Profile using the latest tools Virtualize lists Load templates in phases Optimize images Optimize media Optimize data bindings

Optimize XAML

Load only what you need Don’t put all your resources in App.xaml. Don’t load heavy dictionaries to use only one resource.

Repeating resources Use a resource dictionary – XAML platform will cache it.

Minimize element count

Live Visual Tree

Demo

Minimize overdrawing DebugSettings.IsOverdrawHeatMapEnabled

Reduce layout structure Simplify the hierarchical structure of the UI elements Try to avoid nesting too many panels Less nested panels == performance gain (especially in repeaters) ListView, GridView ItemTemplates

Delay element instantiation x:DeferLoadStrategy attribute Defer things that are not viewable in the first frame Hint: look for elements with Visibility=Collapsed Be wary of deferring elements in a ListView scenario

x:DeferLoadStrategy What causes element to be realized? Call FindName with the element name Call GetTemplateChild with the element name Use a Setter or Storyboard targeting the deferred element in VS Target the deferred element in any Storyboard Use a binding that is targeting the deferred element

Demo

Ensure your text is on the fast path In Windows 10, text rendering is 50% faster DebugSettings.IsTextPerformanceVisualizationEnabled Things that can break the optimization: Setting inline text Some text Character space != 0 TextTrimming != None, CharacterEllipsis, or WordEllipsis IsTextSelectionEnabled = true …

Move to Windows 10 Profile using the latest tools Virtualize lists Load templates in phases Optimize images Optimize media Optimize data bindings Optimize XAML

Responsiv edesign

Adjust to various screen sizes Design for a few key widths/breakpoints 320, 720, and 1024 epx.

Responsive design techniques Reposition Resize Reflow Reveal Replace Re-architect

Adaptive (state) triggers Triggers declare when a state is applied Zero-code visual state switching Setters set discrete properties TriggerVisualStateSetters Minimal window width 600 Wide Set StackPanel orientation to horizontal

Adaptive (state) triggers

DEMO

Move to Windows 10 Profile using the latest tools Virtualize lists Load templates in phases Optimize images Optimize media Optimize data bindings Optimize XAML Responsiv e design

Embrace open source

Open source Great open source community GitHub Blogs MVPs Most of the WinRT libs still work

Some projects Facebook SDK Windows State Triggers Adaptive Trigger Library Groves Expander control for UWP

Some ‘old’ (but good) stuff MVVM Light WinRT XAML Toolkit Cimbalino Toolkit

DEMO

Move to Windows 10 Profile using the latest tools Virtualize lists Load templates in phases Optimize images Optimize media Optimize data bindings Optimize XAML Responsiv e design Embrace open source

?

Igor Ralić Thank you!