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

2. 10 trikova za brže i bolje Windows 10 aplikacije Igor Ralić igrali.com/@igrali/igrali@outlook.com

4. Move to Windows 10

5. 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…

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

7. .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

8. Move to Windows 10

9. Profile using the latest tools

10. Users hate bad performance http://apigee.com/about/press-release/apigee-survey-users-reveal-top-frustrations-lead-bad-mobile-app-reviews Nearly every respondent (98%) stressed that performance matters.

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

12. 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

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

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

16. Demo

17. Move to Windows 10 Profile using the latest tools

18. Virtualize lists

19. 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 

20. 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

21. Demo

22. Without virtualization: With virtualization:

23. Without virtualization: With virtualization:

24. Move to Windows 10 Profile using the latest tools Virtualize lists

25. Optimize data bindings

26. 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

27. 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

28. 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}"

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

30. Demo

31. 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

32. 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

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

34. Load templates in phases

35. 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

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

37. x:Phase

38. Demo

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

40. Optimize images

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

42. 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.

43. Demo

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

45. Optimize media

46. 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

47. MediaElement overlay Put other elements to the side of embedded video

48. 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

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

50. Optimize XAML

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

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

53. Minimize element count

54. Live Visual Tree

55. Demo

56. Minimize overdrawing DebugSettings.IsOverdrawHeatMapEnabled

57. 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

58. 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

59. 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

60. Demo

61. 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 … https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt280225.aspx

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

63. Responsiv edesign

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

65. Responsive design techniques Reposition Resize Reflow Reveal Replace Re-architect

66. 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

67. Adaptive (state) triggers

68. DEMO

69. 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

70. Embrace open source

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

72. Some projects Facebook SDK https://github.com/Microsoft/winsdkfb Windows State Triggers https://github.com/dotMorten/WindowsStateTriggers Adaptive Trigger Library https://github.com/Herdo/AdaptiveTriggerLibrary Groves https://github.com/tomzorz/Groves Expander control for UWP https://github.com/deanchalk/ExpanderUWP

73. Some ‘old’ (but good) stuff MVVM Light https://mvvmlight.codeplex.com/ WinRT XAML Toolkit https://github.com/xyzzer/WinRTXamlToolkit Cimbalino Toolkit https://github.com/Cimbalino/Cimbalino-Toolkit

74. DEMO

75. 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

76. ?

77. Igor Ralić igrali.com/@igrali/igrali@outlook.com Thank you!