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

2. (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)

3. Please interrupt :-)

4. // The Basics

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

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

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

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

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

10. //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
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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

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

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

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

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

17. Demo

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

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

20. Demo: How to create an Ionic 2 app

21. // Tips & Tricks

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

23. Demo: List virtualization

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

25. 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
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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

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

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

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

30. Follow best practices for web performance
Writing Fast, Memory-Efficient JavaScript (
//BUILD/ 2015: Getting great perf from Cordova (
Top 10 Perf techniques for hybrid apps (

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

32. 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
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
Demos and how-to videos
Microsoft Mechanics
Connect with peers and experts
Microsoft Tech Community
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

33. 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
From your phone download and use the Ignite Mobile App by scanning the QR code above or visiting
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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