Making Single Page Apps Faster
Manuel AlvarezEnterprise Architect@MD_A13
Boris LivshutzSenior Enterprise Architect
@livshitz98
©2016 AKAMAI | FASTER FORWARDTM
• New way to build on the web• Growing popularity• Single HTML page • Navigation using JavaScript, APIs• Causes performance degradation
• We are here to help!• Choosing the right framework for
Performance• Make your SPA perform faster• Monitor SPA’s performance
Builtwith Data
Why are we talking about SPA today?
©2016 AKAMAI | FASTER FORWARDTM
Choosing the Right Framework
©2016 AKAMAI | FASTER FORWARDTM
SPA and the MVC ArchitectureYears of architecture evolution:• SOFEA: Service-Oriented Front-End
Architecture (2007)• JavaScript, flash, and AJAX• MV-X architectures are designed to
separate the view from the model• Server-side developer focus on business logic• The client is developed separately, allowing
code reuse for SPA, native apps, SOA, etc.
Model View Controller
View
Model
Controller Fires Event (Updates)
Passes Calls to
Modifies
Image from Rohit Ghatol
©2016 AKAMAI | FASTER FORWARDTM
Current SPA trends
Metric AngularJS Angular 2Backbone.
js Ember.js React.jsStars on Github 48k 10k 24k 16k 39k
Commits 7k 4k 3k 18k 6k
StackOverflow Questions 174k 11k 19k 19k 18k
GitHub Contributors 1,426 219 282 569 645
Compresses sizes if you are curious
©2016 AKAMAI | FASTER FORWARDTM
• Easy to start, great community support, and does not have dependencies
• Not very good partnering with 3rd party JavaScripts
• Great for “ambitious” web apps• It has dependencies on handlebars and
jQuery• Handlebars uses <script> tags as markers,
increasing DOM complexity
• It uses the Virtual DOM to minimize real DOM changes
• React is only the view layer
• It has a minimalistic approach and it has good compatibility with other JS libraries
• Dependencies on Underscore.js and jQuery
Current SPA trends
©2016 AKAMAI | FASTER FORWARDTM
What is the right framework?
Stefan Krause
©2016 AKAMAI | FASTER FORWARDTM
Angular 1
Angular 2 Ember.js React.js
Create 1k rows (ms) 249.56 192.38 747.01 201.17
Append 1k rows (ms) 826.88 679.67 729.01 344.25
Clear 10k rows (ms) 840.63 436.54 1,182.97 2,027.88
Memory (on load) MB
4.86 17.05 10.1 5.17
Benchmarks
Stefan Krause
Chris Harrington
How are you using tables if at all?
What are your top browsers?
©2016 AKAMAI | FASTER FORWARDTM
• Research them and read a little code• Evaluate their capabilities; e.g. testing tools
• Implement them• Play around http://todomvc.com/• “Hello world” + common tasks in your top browser
• Can you start from an existing project? • What you are doing is so unique that it is probably on github
• Use a decision matrix
What is the right framework?
©2016 AKAMAI | FASTER FORWARDTM
AngularJS Ember ReactLearn 10 6 8
Develop 9 8 9Test 8 9 8
Secure 7 8 4Build 9 10 9
Deploy 10 10 10Debug 7 10 7Scale 9 7 10
Maintain 3 5 4Share 10 10 10
82 83 79
Filler by Matt Raible - http://akamai.me/1pRfU1g
Evaluate Frameworks
Yevgeniy Brikman’s Framework Scorecard
©2016 AKAMAI | FASTER FORWARDTM
Obstacles to Good Performance
©2016 AKAMAI | FASTER FORWARDTM
Does SPA Make Your Site Faster?• Yes, for 2nd and subsequent pages (soft / virtual pages)• No, for 1st page (homepage, landing page, deep link)
• 1st page ruins experience (“judge a book by its cover!”)• Leads to user abandonment
• Frameworks try to do everything for everybody, causing“framework overhead”
©2016 AKAMAI | FASTER FORWARDTM
Framework Overhead - ExampleAutomatic Initialization in Angular
1. DOMContentLoaded event triggers Initialization
2. Loads the module associated with the directive
3. Creates the Application Injector4. Compiles the DOM with ng-app as
root5. Framework loads all dynamic
content
©2016 AKAMAI | FASTER FORWARDTM
Performance Dive – Waterfall Analysis
©2016 AKAMAI | FASTER FORWARDTM
Constant Reinstall• Bootstrap process is equivalent to installation
• Visiting the page again (each new browser context) results on “reinstalling”
• Deep links (search engines landing page) require bootstrap first and then repaint the linked page (hard + soft navigation in one!)
©2016 AKAMAI | FASTER FORWARDTM
Mobile Magnifies the Problem
• Cellular network – high latency on API calls
• Limited memory - large framework
• Weak CPU – heavy JavaScript processing
CPU = 800MHz dual-c
Memory = 512MB
SunSpider = ~1880ms
CPU = 2.6GHz quad-c
Memory = 16GB
SunSpider = ~145ms
Table from Ilya Grigorik
©2016 AKAMAI | FASTER FORWARDTM
SPA Performance Solutions
©2016 AKAMAI | FASTER FORWARDTM
Light First Visit• First visit does not have the framework in cache
• Serve a “skeleton” that looks like the real page but with a reduced version of the framework
• Execute the full framework later• On the second page• When user clicks• Async execution• Pre-render
©2016 AKAMAI | FASTER FORWARDTM
Server Side Rendering• Isomorphic App - both Server and client rendering
• Step 1: Server renders page into HTML• Step 2: Client Side rendering but no impact to perceived timing
• Framework Support• React - Native support• AngularJS - Version 2.0 has native support• Backbone.js - Render library• Ember.js - FastBoot feature
©2016 AKAMAI | FASTER FORWARDTM
Server Side Rendering: AngularStep by step process in Angular
1. Process the JS on the Server Side2. Result served to the client as the page HTML3. Browser renders HTML as standard web page4. Preboot starts to listen for user clicks since html is not interactive5. Angular performs all client side bootstrapping in the background6. As client side bootstrapping is done, it will redraw using new DOM7. Preboot will now replay all user clicks captured previously.
©2016 AKAMAI | FASTER FORWARDTM
Server Side Rendering: ReactStep by step process in React
1. Process the JS on the Server Side2. Result served to the client as the page HTML3. Browser renders HTML as standard web page4. React performs all client side bootstrapping without affecting html page5. Result is identical to what is already displayed on the page6. React smartly identifies that no render change is needed
1. DOM is not touched (usually most expensive step)2. Event Handler hooks are added to the current page
©2016 AKAMAI | FASTER FORWARDTM
Virtual DOM Library• Direct DOM manipulation causes constant rerender and reflow• Use Virtual DOM to avoid reflow and rerender
• React.js - builtin virtual DOM along with rendering engine• 3rd party Virtual DOM libraries - Mercury, Elm, many more
©2016 AKAMAI | FASTER FORWARDTM
JavaScript Packaging
• Choose a Package Manager
• Fits DevOps build process
• Compromise: network roundtrips vs caching
• Trial and Error to find compromise
©2016 AKAMAI | FASTER FORWARDTM
Resource Deferment• Defer and accelerate loading
Javascript• AMD - Asynchronous Module
Definition API• WebPack - Code splitting• RequireJS - dynamic and async
module loader
• Defer images to future pages
• Use Minimized Libraries
©2016 AKAMAI | FASTER FORWARDTM
• Cache more! at browser and Edge• Cache JSON responses• Use advance caching features• Normalize URL parameters• Enforce uniform ordering of URL
parameters
/weather?lang=20&latitude=47.43&longitude=19.30/weather?longitude=19.30&latitude=47.43&lang=20/weather?zipcode=98122&lang=20
/weather?latitude=47.4&longitude=19.3&lang=20
Rationalize + Re-order
API Caching - Optimizations
©2016 AKAMAI | FASTER FORWARDTM
Monitoring and Testing SPA
©2016 AKAMAI | FASTER FORWARDTM
• The onload event no longer matters
• Soft navigations are not real navigations
• The browser won’t tell you when all resources have been downloaded
Monitoring the Wrong Metrics
* How to provide real user monitoring for single-page applications
©2016 AKAMAI | FASTER FORWARDTM
Misleading Metrics
Is that really Load Time?
©2016 AKAMAI | FASTER FORWARDTM
Recommended SPA KPIs
Key Metrics
• Framework load time• Interactive Time• Load Complete time - first and
virtual pages• Virtual Page Initial Request time• API call timings
Trending Metrics
• Memory usage over time• DOM size growth• Javascript error rate• Data Transfer rates (bytes fetched
per page/time)
©2016 AKAMAI | FASTER FORWARDTM
Monitoring and Testing Tools That Work
• User Timing API• Mark and Measure in your code
• Soasta RUM• Angular, Backbone, Ember
• Performance / Load Testing• Webdriver Sampler with JMeter
©2016 AKAMAI | FASTER FORWARDTM
SPA Takeaways• Before you build
• Does SPA make sense for you?• Design SPA with performance in mind• Agree on KPIs and SLAs early on
• As you build• Evaluate Mobile performance
• Stay up to date• HTTP/2 Server Push• W3C Fetch Standard
©2016 AKAMAI | FASTER FORWARDTM
Q & A