Making Single Page Applications (SPA) faster

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?

http://trends.builtwith.com/javascript/React


Choosing the Right Framework


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

http://stackoverflow.com/questions/817617/what-is-sofea

http://www.rohitghatol.com/

http://www.rohitghatol.com/


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

https://gist.github.com/Restuta/cda69e50a853aa64912d


• 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


What is the right framework?

Stefan Krause

http://www.stefankrause.net/wp/?p=301


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?

http://www.stefankrause.net/wp/?p=301

https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout

https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout


• 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?

http://todomvc.com/

http://todomvc.com/


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

http://akamai.me/1pRfU1g

http://www.slideshare.net/brikis98/nodejs-vs-play-framework

http://www.slideshare.net/brikis98/nodejs-vs-play-framework


Obstacles to Good Performance


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”


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


Performance Dive – Waterfall Analysis


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!)


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

http://image.slidesharecdn.com/0wx7wvsyssixorne6oi4-signature-3e4156dfa5ca73d9c41ffa9d4c46761ec7b02523c13cc2ad1873addb96cbf495-poli-141013224659-conversion-gate01/95/googles-ilya-grigorik-on-http-20-23-638.jpg?cb=1413240588

http://image.slidesharecdn.com/0wx7wvsyssixorne6oi4-signature-3e4156dfa5ca73d9c41ffa9d4c46761ec7b02523c13cc2ad1873addb96cbf495-poli-141013224659-conversion-gate01/95/googles-ilya-grigorik-on-http-20-23-638.jpg?cb=1413240588


SPA Performance Solutions


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


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


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.


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


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


JavaScript Packaging

• Choose a Package Manager

• Fits DevOps build process

• Compromise: network roundtrips vs caching

• Trial and Error to find compromise


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


• 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


Monitoring and Testing SPA


• 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

http://www.soasta.com/blog/angularjs-real-user-monitoring-single-page-applications/


Misleading Metrics

Is that really Load Time?


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)


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


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


Q & A

Software

Making Single Page Applications (SPA) faster