Create fast and fluid interfaces with HTML, CSS, JavaScript and WinJS

Create fast and fluid interfaces with HTML, CSS, JavaScript and WinJSPaul GildeaProgram Manager3-1566/27/2013Windows Azure2 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.Agenda

Understand the top performance opportunitiesDiscover what new APIs are available to improve performanceLearn to use new APIs to increase UI responsivenessBuild 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/20133Understand top performance opportunitiesEnsuring UI responsivenessManaging memory consumptionPanning large lists of dataStartup time

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/20134Ensuring UI responsiveness

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/20135Problem: UI responsivenessHTML apps are single threadedExecuting expensive code can block the UI threadDifficult to coordinate tasks across the platformCannot prioritize unrelated tasks against each other

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/20136Solution: WinJS SchedulerA prioritized work queue WinJS.Utilities.SchedulerWinJS controls schedule their workScheduler leverages WinRT to prioritize across all layersApp developers can schedule work at appropriate prioritySimple to build more specific app policy on top the Scheduler

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/20137WinJS Scheduler PrioritiesWinJS Prioritiesmax: 15high: 13aboveNormal: 9normal: 0belowNormal: -9idle: -13min: -15Default priority range for most tasksUse high priority sparingly and appropriatelyLong running idle tasksBuild 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/20138WinJS Scheduler Code Examplevar S = WinJS.Utilities.Scheduler;

// Example of a scheduling work at normal priorityS.schedule(function () { // Scheduled code to execute}, S.Priority.normal);

// Example of scheduling a data request at high priorityS.schedule(function () { // Scheduled code to execute}, S.Priority.high, this, "Work item description");

Schedule your work to ensure UI responsiveness.Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201310Managing memory consumptionBuild 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201311Problem: Control lifetime is unpredictableLack of a clear pattern to clean up UI controlsApps are responsible for managing their own clean upCreating new controls and leaving old controls behind is more common in a Single Page Application (SPA) model

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201312Solution: WinJS dispose patternWinJS supports a pattern for UI control disposalBuilt-in UI controls implement this patternCustom control authors can implement dispose patternApp developers should call dispose when controls are no longer neededDispose is called when navigating and panning

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201313Controls: Implementing Disposevar MyControl = 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 () {//... }});Controls: Implementing Disposedispose: 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); }}

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);}

Use the dispose pattern to manage the lifetime of your UI controls.Panning large lists of dataPanning: Scenario overviewPanning: Scenario overview Item RenderersPanning: Scenario overview ListViewProblem: Panning in large listsPerformance trade off between binding templates and item renderersComplexity and cost of items have an impact on panning ListView unable to leverage new CSS layoutsBuild 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201322Solution: Optimized binding templatesCompiled into rendering functionsFull debugging supportLeverages dispose pattern during unrealization of items

Solution: Asynchronous renderersUse multi-stage async renderers to control the cost of renderingLeverage image loader to prioritize image loading of on screen items

Optimized Templates DemoUse Binding Templates for the best mix of performance, tooling, and debugging.

For fine tuning use multi-stage async renderers.

Solution: Improved ListView layoutListView is optimized to use underlying native CSS layoutsNew virtualization scheme updates priority of item rendering based on user panningAdditional performance gains in editing and initializationSolution: Improved ListView layoutBuild 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201328Panning in Mail: Windows 8 and Windows 8.1

Windows 8 WinJS 1.0Windows 8.1 WinJS 2.0Use the ListView and your app will get performance benefits out of the box.

Startup timeStartup in apps Review TimelineLoading and parsing ofHTML, JS, CSSNew hostprocess Tile clickWindows Runtime"activated" eventSplash screen Ready for userNavigationApp visible WinJS.UI.processAll App initializationSplash screen cross fade Get dataPopulate ListView Animate contentApp read to useProblem: Startup in apps

Loading and parsing time of HTML can be slowDifficult for apps to coordinate critical work before/after splash screenDeferring too much work can increase time to interactivityBuild 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201333Startup in apps Timeline and UX Splash screen

App visible

App ready to useStartup in apps Optimize loading/parsingSplash screen

App visible

App ready to useAll your HTML tips and tricks for web sites still apply Ensure you have well structured markupPackage critical app resources

Solution: Optimize loading/parsing of HTMLLoading/parsing HTMLSplash screen Startup in apps Optimize startup workSplash screen

App visible

App ready to useDetermine your key work needed for startupSchedule that work at high priorityDrain the Scheduler at high priority during activationSolution: Schedule startup critical workApp specific workBuild 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201338Startup Code ExampleUse HTML tips and tricks for parsing and loading.

Use the Scheduler for start up critical work.SummaryEnsuring responsive UI WinJS SchedulerManaging memory consumption WinJS dispose patternPanning Binding templates, async renders, and ListViewStartup leverage HTML tips and tricks and WinJS Scheduler

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/201341Resources3-068: Web Runtime Performance2-098: App Performance: Planning costs less than Rearchitecting3-099: Scenario-Guided app performance, from UX to API2-100: Improving the Performance of your Windows app with tools2-165: Whats new with WinJS 2.0

Evaluate this sessionScan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

Required Slide *delete this box when your slide is finalized

Your MS Tag will be inserted here during the final scrub. 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.6/27/2013 6:31 PM43 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.