Create fast and f luid i nterfaces with HTML, CSS, JavaScript and WinJS

2. Create fast and fluid interfaces with HTML, CSS, JavaScript and WinJS Paul Gildea Program Manager 3-156

3. Agenda • Understand the top performance opportunities • Discover what new APIs are available to improve performance • Learn to use new APIs to increase UI responsiveness

4. Understand top performance opportunities • Ensuring UI responsiveness • Managing memory consumption • Panning large lists of data • Startup time

5. Ensuring UI responsiveness

6. Problem: UI responsiveness • HTML apps are single threaded • Executing expensive code can block the UI thread • Difficult to coordinate tasks across the platform • Cannot prioritize unrelated tasks against each other

7. Solution: WinJS Scheduler • A prioritized work queue – WinJS.Utilities.Scheduler • WinJS controls schedule their work • Scheduler leverages WinRT to prioritize across all layers • App developers can schedule work at appropriate priority • Simple to build more specific app policy on top the Scheduler

8. WinJS Scheduler – Priorities Use high priority sparingly and appropriately Default priority range for most tasks Long running idle tasks

9. WinJS Scheduler – Code Example • varS = WinJS.Utilities.Scheduler; • // Example of a scheduling work at normal priority • S.schedule(function () { • // Scheduled code to execute • }, S.Priority.normal); • // Example of scheduling a data request at high priority • S.schedule(function() { • // Scheduled code to execute • }, S.Priority.high, this,"Work item description");

10. Schedule your work to ensure UI responsiveness.

11. Managing memory consumption

12. Problem: Control lifetime is unpredictable • Lack of a clear pattern to clean up UI controls • Apps are responsible for managing their own clean up • Creating new controls and leaving old controls behind is more common in a Single Page Application (SPA) model

13. Solution: WinJS dispose pattern • WinJS supports a pattern for UI control disposal • Built-in UI controls implement this pattern • Custom control authors can implement dispose pattern • App developers should call dispose when controls are no longer needed • Dispose is called when navigating and panning

14. Controls: Implementing Dispose • varMyControl = WinJS.Class.define(function (element, options) { • this.element= element; • element.winControl= this; • // Add win-disposable class to element • WinJS.Utilities.addClass(this.element, "win-disposable"); • this._disposed= false; • }, • { • dispose: function () {//...} • });

15. Controls: Implementing Dispose • dispose: function () { • if(this._disposed) { return; } • this._disposed = true; • // Call dispose on all children • WinJS.Utilities.disposeSubTree(this.element); • // Disconnect click handlers, resources, connections, etc. • if (this._button && this._clickHandler) { • this._button.removeEventListener("click", • this._clickHandler, false); • } • }

16. Apps: Calling Dispose • // Responds to navigation by adding new pages to the DOM. • _navigating: function (args) { • // Dispose all controls in the view • WinJS.Utilities.disposeSubTree(this._element); • // Remove old content from the view • this._element.removeChild(oldElement); • oldElement.innerText= ""; • // Add new content to the view • this._element.appendChild(newElement); • }

17. Use the dispose pattern to manage the lifetime of your UI controls.

18. Panning large lists of data

19. Panning: Scenario overview

20. Panning: Scenario overview – Item Renderers

21. Panning: Scenario overview – ListView

22. Problem: Panning in large lists • Performance trade off between binding templates and item renderers • Complexity and cost of items have an impact on panning • ListView unable to leverage new CSS layouts

23. Solution: Optimized binding templates • Compiled into rendering functions • Full debugging support • Leverages dispose pattern during unrealization of items

24. Solution: Asynchronous renderers • Use multi-stage async renderers to control the cost of rendering • Leverage image loader to prioritize image loading of on screen items

25. Optimized Templates Demo

26. Use Binding Templates for the best mix of performance, tooling, and debugging. For fine tuning use multi-stage async renderers.

27. Solution: Improved ListView layout • ListView is optimized to use underlying native CSS layouts • New virtualization scheme updates priority of item rendering based on user panning • Additional performance gains in editingand initialization

28. Solution: Improved ListView layout

29. Panning in Mail: Windows 8 and Windows 8.1 Windows 8 – WinJS 1.0 Windows 8.1 – WinJS 2.0

30. Use the ListView and your app will get performance benefits out of the box.

31. Startup time

32. Startup in apps – Review Timeline App visible App read to use Splash screen Ready for user Get data Populate ListView Animate content Loading and parsingof HTML, JS, CSS WinJS.UI.processAll App initialization New host process Windows Runtime "activated" event Splash screen cross fade Navigation Tile click

33. Problem: Startup in apps • Loading and parsing time of HTML can be slow • Difficult for apps to coordinate critical work before/after splash screen • Deferring too much work can increase time to interactivity

34. Startup in apps – Timeline and UX App visible App ready to use Splash screen

35. Startup in apps – Optimize loading/parsing App visible App ready to use Splash screen

36. Loading/parsing HTML • Solution: Optimize loading/parsing of HTML • All your HTML tips and tricks for web sites still apply • Ensure you have well structured markup • Package critical app resources

37. Startup in apps – Optimize startup work App visible App ready to use Splash screen Splash screen

38. App specific work • Solution: Schedule startup critical work • Determine your key work needed for startup • Schedule that work at high priority • Drain the Scheduler at high priority during activation

39. Startup – Code Example

40. Use HTML tips and tricks for parsing and loading.Use the Scheduler for start up critical work.

41. Summary • Ensuring responsive UI – WinJS Scheduler • Managing memory consumption – WinJS dispose pattern • Panning – Binding templates, async renders, and ListView • Startup – leverage HTML tips and tricks and WinJS Scheduler

42. Resources • 3-068: Web Runtime Performance • 2-098: App Performance: Planning costs less than Rearchitecting • 3-099: Scenario-Guided app performance, from UX to API • 2-100: Improving the Performance of your Windows app with tools • 2-165: What’s new with WinJS 2.0

43. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!