Making Single Page Applications (SPA) faster

Making Single Page Apps Faster
Manuel Alvarez
Enterprise Architect
@MD_A13
Boris Livshutz
Senior 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?

Choosing the Right Framework

SPA and the MVC Architecture
Years 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

Current SPA trends
Metric AngularJS Angular 2 Backbone.js Ember.js React.js
Stars 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

• 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

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?

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

AngularJS Ember React
Learn 10 6 8
Develop 9 8 9
Test 8 9 8
Secure 7 8 4
Build 9 10 9
Deploy 10 10 10
Debug 7 10 7
Scale 9 7 10
Maintain 3 5 4
Share 10 10 10
82 83 79
Filler by Matt Raible - http://akamai.me/1pRfU1g
Evaluate Frameworks
Yevgeniy Brikman’s Framework Scorecard

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 - Example
Automatic Initialization in Angular
1. DOMContentLoaded event
triggers Initialization
2. Loads the module associated with
the directive
3. Creates the Application Injector
4. Compiles the DOM with ng-app as
root
5. 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

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: Angular
Step by step process in Angular
1. Process the JS on the Server Side
2. Result served to the client as the page HTML
3. Browser renders HTML as standard web page
4. Preboot starts to listen for user clicks since html is not interactive
5. Angular performs all client side bootstrapping in the background
6. As client side bootstrapping is done, it will redraw using new DOM
7. Preboot will now replay all user clicks captured previously.

Server Side Rendering: React
Step by step process in React
1. Process the JS on the Server Side
2. Result served to the client as the page HTML
3. Browser renders HTML as standard web page
4. React performs all client side bootstrapping without affecting html page
5. Result is identical to what is already displayed on the page
6. 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

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

Making Single Page Applications (SPA) faster

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Making Single Page Applications (SPA) faster

Ähnlich wie Making Single Page Applications (SPA) faster (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Making Single Page Applications (SPA) faster