Build performance-obsessed mobile apps with JavaScript Microsoft Ignite 2016 5/9/2018 2:03 AM BRK2094 Build performance-obsessed mobile apps with JavaScript Jordan Matthiesen Program Manager JavaScript mobile tools © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

(Hint: We are going to change that in this session) There is a general perception that apps built using HTML, CSS, and JavaScript are slow. (Hint: We are going to change that in this session)

Please interrupt :-)

// The Basics

5/9/2018 Apache Cordova apps are written in HTML, CSS, and JavaScript that can also access native device capabilities. © 2014 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.

<webview> Your JavaScript App 5/9/2018 Cordova apps are web applications that run inside a native application. This allows you to use HTML, CSS, and JavaScript to build your app while still having access to your device’s hardware capabilities! Native Wrapper <webview> Your JavaScript App Cordova Plugin JS API © 2014 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.

What does it mean for something to be fast and responsive? 5/9/2018 What does it mean for something to be fast and responsive? © 2014 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.

Interaction Classes 5/9/2018 © 2014 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.

Interaction Classes What we care about! 5/9/2018 © 2014 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.

//build/ 2015 Getting Great Perf out of Cordova Apps Microsoft Ignite 2016 5/9/2018 2:03 AM //build/ 2015 Getting Great Perf out of Cordova Apps http://aka.ms/cordova-perf © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/9/2018 Practical Advice (1/3) Your UI is considered fast when it reacts to user actions in under 100ms. The less elements you have on your page, the faster and less memory-intensive your app. Use virtualization to manage the size of your DOM Batch layout operations to avoid duplicate reads/writes on layout properties © 2014 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.

5/9/2018 Practical Advice (2/3) Implement gradients & shadows as images rather than CSS Use CSS transform: translate3D for animating position Create fast animations in CSS or by using requestAnimationFrame in JavaScript © 2014 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.

5/9/2018 Practical Advice (3/3) Use removeEventListener to remove event references from elements – even if the element is about to be deleted. Reduce the amount of event listeners in your app by relying on event bubbling Destroy unused elements and objects to save memory. © 2014 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.

User experience isn’t defined by perf alone. It’s also design.

Why Ionic Framework? Performance-Obsessed Apache Cordova Downstream Adapts to iOS, Android and Windows design patterns Built specifically for mobile devices where memory is constrained Apache Cordova Downstream Leverages a mature ecosystem of open source contributions from Microsoft, Adobe, IBM, et al. Enterprise-ready platforms, plugins and quality control Better with Visual Studio and Code Built with TypeScript, so you get the future of JavaScript, today. Templates, code snippets, cross-platform debugging and Intellisense for all-the-things.

Demo http://aka.ms/ionic-conference-app

Embedded Web Browser (Edge, Chrome, WebKit) Runtime Architecture Native Plugins and Features Apache Cordova Ionic Camera Bluetooth Video Health Kit Touch ID Streaming Security & Encryption Push Notifications Audio Code Push/ update Embedded Web Browser (Edge, Chrome, WebKit) Angular

Ionic 2: Obsessed with performance Microsoft Ignite 2016 5/9/2018 2:03 AM Ionic 2: Obsessed with performance Made with Angular 2 Avoids the DOM whenever possible Animations running on the GPU 60fps page transitions Native scrolling and list virtualization are built in Ahead-of-Time compiling Optimized release builds © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo: How to create an Ionic 2 app http://ionicframework.com

// Tips & Tricks

5/9/2018 Fast List Scrolling Displaying a list of data is a common scenario for many apps. To ensure your data displays smoothly – especially when scrolling, ensure you fetch only the data you want and render only the content that is going to be necessary. This is commonly known as virtualization. © 2014 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.

Demo: List virtualization http://ionicframework.com

Memory Usage: Virtualized List vs. Non-Virtualized List 5/9/2018 Memory Usage: Virtualized List vs. Non-Virtualized List © 2014 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.

Microsoft Ignite 2016 5/9/2018 2:03 AM Use WKWebView on iOS Replaces the older (but still supported) UIWebView. WKWebView is better in every way, actively updated in each iOS release, but not the default in Cordova (yet). Learn how to use it at http://aka.ms/install-wkwebview © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Optimize those network requests Microsoft Ignite 2016 5/9/2018 2:03 AM Optimize those network requests When talking over a cellular network, remember that your connection is slower and may not even exist. Make network requests in batches, limit their sizes, and cache results. Optimizing image sizes to keep any image payloads low. © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Test in both dev & release modes Ionic has both dev & release builds; release builds are optimized for perf! Minified JavaScript and CSS Ahead of Time compilation

Run a perf audit using browser dev tools Use browser tools to diagnose your app. Memory profiling CPU usage Watch those frames per second!

Test on real devices Test using the same devices as your users. Automated device testing with Xamarin Test Cloud (developer.xamarin.com/testcloud/) Beta test, using HockeyApp (hockeyapp.net)

Follow best practices for web performance Writing Fast, Memory-Efficient JavaScript (https://aka.ms/perf-jsmem) //BUILD/ 2015: Getting great perf from Cordova (https://aka.ms/cordova-perf) Top 10 Perf techniques for hybrid apps (https://aka.ms/repco4)

Tools you can get today Ionic Visual Studio Code Visual Studio 2015 Ionic 2 RC0 now available. http://ionicframework.com Visual Studio Code Support for Ionic 1.x & 2.x Debug Android and iOS http://aka.ms/cordova-code Visual Studio 2015 Ionic 1.x & 2.x templates Debug Android, Windows and iOS http://aka.ms/cordova-vs Visual Studio Team Services Continuous Integration & Deployment Pre-made build definitions for Cordova Cloud build for Android, Windows and iOS* http://aka.ms/cordova-vsts Code Push (beta) Instantly deploy app updates Partial rollout and A/B testing Azure-hosted cloud service. Setup in minutes http://aka.ms/code-push

Free IT Pro resources To advance your career in cloud technology Microsoft Ignite 2016 5/9/2018 2:03 AM Free IT Pro resources To advance your career in cloud technology Plan your career path Microsoft IT Pro Career Center www.microsoft.com/itprocareercenter Cloud role mapping Expert advice on skills needed Self-paced curriculum by cloud role $300 Azure credits and extended trials Pluralsight 3 month subscription (10 courses) Phone support incident Weekly short videos and insights from Microsoft’s leaders and engineers Connect with community of peers and Microsoft experts Get started with Azure Microsoft IT Pro Cloud Essentials www.microsoft.com/itprocloudessentials Demos and how-to videos Microsoft Mechanics www.microsoft.com/mechanics Connect with peers and experts Microsoft Tech Community https://techcommunity.microsoft.com © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Please evaluate this session 5/9/2018 2:03 AM Please evaluate this session Your feedback is important to us! From your PC or Tablet visit MyIgnite at http://myignite.microsoft.com From your phone download and use the Ignite Mobile App by scanning the QR code above or visiting https://aka.ms/ignite.mobileapp © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/9/2018 2:03 AM © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.