isomorphic react applications: performance and scalability
Post on 09-Jan-2017
2.928 Views
Preview:
TRANSCRIPT
Isomorphic React Applications: Performance & Scalability
Denis Izmaylov
Nov 23, 2015
Denis Izmaylov• 15 years of Software and Web
development experience
• The last 5 years focused exclusively on Front-end, Node.js and architecture
• Created 10+ projects, including Single Page Applications, high-load and React
• Commiter to Redux, webpack and koa
• Speaker at HighLoad++ 2015, MoscowJS
• The author of “Application and Universal Components” and other articles
, CEO
Why should we stop developing classic
Single Page Applications?
How isomorphic applications affect your salary?
What will you do at this weekend?
You already know1. React 14
2. webpack
3. ES6
4. Node.js
5. Express / koa
6. Isomorphic (Universal) apps6
Part 1
Web became a giant
Art
Web Development
Science
Before it was easy• Create a page
• Add some scripts
• Submit to Production
Before it was easy
Server
Browser
11
Before it was easy
Server
Browser
Does everything
12
Before it was easy
Server
Browser- HTML - [CSS, JavaScript]
Does everything
13
It worked
Single PageApplications
(SPA)
Single Page Application
Server
Browser
16
Single Page Application
Server
Browser
Is the page exists?Do we need auth?Do we have access?
17
Single Page Application
Server
Browser
Is the page exists?Do we need auth?Do we have access?
- Tiny HTML, [CSS] - JavaScript bundle
18
Single Page ApplicationBenefits
• Easy to start • webpack
• <div id=“root” />
• React, Redux
• build
19
Single Page ApplicationBenefits
• Easy to start
• Rich features
webpack, <div id=“root” />, React, Redux
20
Single Page ApplicationBenefits
• Easy to start
• Rich features
• Fast enhancement
webpack, <div id=“root” />, React, Redux
21
Single Page ApplicationBenefits
• Easy to start
• Rich features
• Fast enhancement
• Responsive UI
webpack, <div id=“root” />, React, Redux
22
Single Page ApplicationBenefits
• Easy to start
• Rich features
• Fast enhancement
• Responsive UI
• Useful caching
webpack, <div id=“root” />, React, Redux
23
- Wow. Is it so ideal?
Single Page ApplicationFlaws
• Long-time Start • JavaScript bundle up to 3-5 Mb
• first request
• execution
• memory
25
Single Page ApplicationFlaws
• Long-time Start
• Expensive maintenance
• side effects
• memory leak
1st request, CPU, mem
26
Single Page ApplicationFlaws
• Long-time Start
• Expensive maintenance
• Empty page, one URL
1st request, CPU, mem
side effects, memory leaks
27
Single Page ApplicationFlaws
• Long-time Start
• Expensive maintenance
• Empty page, one URL
• Legacy Browsers
1st request, CPU, mem
side effects, memory leaks
28
- Why is it “flaws”?
Single Page ApplicationFlaws
• Long-Time Start
for business
reduced UX
30
Single Page ApplicationFlaws
• Long-Time Start
• Expensive Maintenance
for business
reduced UX
risks
31
Single Page ApplicationFlaws
• Long-Time Start
• Expensive Maintenance
• Empty Page
for business
reduced UX
risks
SEO problems
32
Single Page ApplicationFlaws
• Long-Time Start
• Expensive Maintenance
• Empty Page
• One URL
for business
reduced UX
risks
SEO problems
SMM problems
33
Single Page ApplicationFlaws
• Long-Time Start
• Expensive Maintenance
• Empty Page
• One URL
• Legacy Browsers
for business
reduced UX
risks
SEO problems
SMM problems
lost audience
34
Single Page ApplicationFlaws
• Long-Time Start
• Expensive Maintenance
• Empty Page
• One URL
• Legacy Browsers
for business
reduced UX
risks
SEO problems
SMM problems
lost audience
35Expenses
Single Page ApplicationFlaws
for business
reduced UX
risks
SEO problems
SMM problems
lost audience
36Expenses
- What to do?
Take the best from the both worlds
Isomorphic Applications
Isomorphic Applications
By isomorphic we mean that any given line of code (with notable exceptions) can execute both on the client and the server.
Charlie Robbins,18 Oct 2011
Templates
Stylesheets
Locale (i18n)
Configuration
Routes
Access Rules
Models
Schemas
Validation
Services
Isomorphic Applications
server.jsNode.js
worker.js
client.jsBrowser
admin.js
Business Logic
Components
API interfaces
Actions, Reducers
Static Files
Browser
Isomorphic Applications
Front-end Server
Back-end Server
Database Javaetc
Browser
Isomorphic Applications
Front-end Server
Back-end Server
Database Javaetc
Browser
Isomorphic Applications
Front-end Server
Back-end Server
Database Javaetc
- HTML - [critical CSS] - …
Front-end Client
Isomorphic Applications
Front-end Server
Back-end Server
Database Javaetc
- HTML - [critical CSS] - JS Bundle
Front-end Client
Isomorphic Applications
Front-end Server
Back-end Server
Database Javaetc
- HTML - [critical CSS] - JS Bundle
Front-end Client
Isomorphic Applications
Front-end Server
• One execution environment
• Shared codebase
• Full control
• Ecosystem
47
- How can we do that?
Server-Side Rendering(SSR)
Server-Side Rendering• Build HTML on Front-end Server
• Render page in user browser immediately, before it loads JavaScript
• When JavaScript will be loaded,React will add event handlers only
• It’s very fast
50
Server-Side RenderingExample code for Server-Side:
import ReactDOMServer from 'react-dom/server';import Application from './components/application';const body = ReactDOMServer.renderToString( <Application />);
51
Server-Side Rendering1. Visitors see a page immediately
2. No additional requests to load data
3. The page could work even without JS
4. Full URL-navigation
5. Meta-tags for SEO and SMM
6. This way keeps all JavaScript features
52
Part 2
Performance And Scalability
Scalability
Functional Scalability
Server-Side RenderingThat’s super when we have all data for response:
import ReactDOMServer from 'react-dom/server';import Application from './components/application';const initialState = { siteName: 'Startup Makers' };const body = ReactDOMServer.renderToString( <Application state={initialState} />);
57
Server-Side RenderingThat’s super when we have all data for response:
import ReactDOMServer from 'react-dom/server';import Application from './components/application';const initialState = { siteName: 'Startup Makers' };const body = ReactDOMServer.renderToString( <Application state={initialState} />);
What if we have to load it async?
58
Server-Side RenderingHow to get asynchronous State:
1. Manual for each page
2. Facebook Relay
3. redux-catch-promise
59
Asynchronous StateManual for each page:
• Define which data we have to load for each page
• Load this data and prepare State
• ReactDOMServer.renderToString()
60
Asynchronous StateFacebook Relay:
1. The framework for building data-driven React applications
2. Declarative. Colocation. Mutations.
3. https://github.com/facebook/relay/issues/136
4. 1Q201661
Asynchronous Stateredux-catch-promise:
• Redux - state container для React
• Redux: the best for isomorphic apps, MoscowJS 25https://youtu.be/Uyk_8WWna6s
• redux-catch-promise is middleware for Redux
62
Asynchronous Stateredux-catch-promise:
1. Attach a callback to catch Promise-actions
2. Render the component
3. At the component - create a request to DB (or other data source) and dispatch a Promise of that
4. Collect all promises and wait until they will be finished
5. Render component with data 63
Asynchronous Stateredux-catch-promise:
1. Example and source code:https://github.com/DenisIzmaylov/redux-catch-promise
2. Installation:
npm install redux-catch-promise
64
Performance
Performance
Test stand:
MacBook Pro 15” Retina (Early 2013)
2.4 GHz Intel Core i7
66
PerformancePage size: 56 238 bytes
PerformancePage size: 56 238 bytes
PerformancePage size: 56 238 bytes
PerformancePage size: 56 238 bytes
PerformancePage size: 56 238 bytes
PerformancePage size: 56 238 bytes
Performance
Test with:
ab -n 100 http://localhost:3000/profile
73
Performance
Test with:
ab -n 100 http://localhost:3000/profile
Executing…
74
Performance
Test with:
ab -n 100 http://localhost:3000/profile
Executing…
Time per request: 61.850 ms
75
Performance
61.850 msIs it slow or fast?
76
Performance
61.850 msIs it slow or fast?
The same template in Handlebars:
8.385 ms
86% less
77
Performance
61.850 msIs it slow or fast?
The same template in Handlebars:
8.385 ms
86% less
78
Performance1. Try to search in Google - nothing
2. Try to ask in Twitter - silence:
79
Performance
Ok, what if we do that?
NODE_ENV=production
Executing…
80
Performance
Ok, what if we do that?
NODE_ENV=production
Executing…
Time per request: 37.943 ms(vs 61.850 ms)
39% less81
Performance
Looks better.
But it’s still not funny.
82
Go ahead
GitHub issues
Performance
• “Server rendering is slower with npm react”https://github.com/facebook/react/issues/812
85
Performance
• “Server rendering is slower with npm react”https://github.com/facebook/react/issues/812Solution:use directly react/dist/react.min.js
86
PerformanceCreate node_modules/react.js:if (process.env.NODE_ENV === 'production') {
module.exports = require('react/dist/react.min.js'); } else { module.exports = require('react/dist/react.js'); }
87
PerformanceCreate node_modules/react.js:if (process.env.NODE_ENV === 'production') {
module.exports = require('react/dist/react.min.js'); } else { module.exports = require('react/dist/react.js'); }
88
How can it influenceon results?
Performance
Server rendering is slower with npm react
react/dist/react.min.js
Executing…
90
Performance
Server rendering is slower with npm react
react/dist/react.min.js
Executing…
Time per request: 38.253 ms(vs 37.943 ms)0.08% more
91
Performance
Server rendering is slower with npm react
react/dist/react.min.js
Executing…
Time per request: 38.253 ms(vs 37.943 ms)0.08% moreFAILED
92
0
17,5
35
52,5
70
38,25337,943
8,385
61,85
React SSR Handlebars production react.min.js
Results
0
17,5
35
52,5
70
38,25337,943
8,385
61,85
React SSR Handlebars production react.min.js
ResultsNODE_ENV=production
39% less
Part 3
Advanced Solutions
Advanced Solutions
1. Precompilation + Cache 2. Rendering Separation 3. Progressive Rendering 4. Facebook BigPipe 5. HAProxy
97
Precompilation + Cache
• UI = f(state)
• f = React Component
• state = path + [actions] + …
1. Simple solution: redis
2. Deferred server-side rendering:redis + kue.js + workers 98
Rendering Separation
99
Progressive Rendering
100
Progressive Rendering
• React DOM Stream
• Flushing the Document Early
• “Streams make this library as much as 47% faster in sending down a full page than ReactDOM.renderToString”
• Target - 108KB page on Heroku
• Time To First Byte (TTFB) - 55% faster
• https://github.com/aickin/react-dom-stream101
Facebook BigPipe• Bundle a page during it’s loading • Assets is loading parallel • Resistants to errors
Facebook BigPipe• Bundle a page during it’s loading • Assets is loading parallel • Resistants to errors
Facebook BigPipe• Bundle a page during it’s loading • Assets is loading parallel • Resistants to errors
Facebook BigPipe
105
HAProxy• Multiple Node.js instance
• Ask your DevOps engineer
106
Epilogue
Recommendations• Find and join local JavaScript
communities
• Improve your English skills
• Read original articles and technical blogs (Facebook, AirBnB, Netflix, etc)
• Join and integrate Twitter and GitHub to your life
108
Useful Links1. Supercharging page load (100 Days of Google Dev)
https://youtu.be/d5_6yHixpsQ 2. Making Netflix.com Faster
http://techblog.netflix.com/2015/08/making-netflixcom-faster.html
3. New technologies for the new LinkedIn home pagehttps://engineering.linkedin.com/frontend/new-technologies-new-linkedin-home-page
4. Improving performance on Twitter.comhttps://blog.twitter.com/2012/improving-performance-on-twittercom
5. Scaling Isomorphic Javascript Codehttp://blog.nodejitsu.com/scaling-isomorphic-javascript-code/
109
Useful Links6. From AngularJS to React: The Isomorphic Way
https://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/
7. Isomorphic JavaScript: The Future of Web Appshttp://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
8. React server side rendering performancehttp://www.slideshare.net/nickdreckshage/react-meetup
9. The Lost Art of Progressive HTML Renderinghttp://blog.codinghorror.com/the-lost-art-of-progressive-html-rendering/
10. Extract and inline Critical Path CSS in HTML pages https://github.com/addyosmani/critical
110
Quotes“Almost algorithm problems
could be solved by changing a data structure”
“Changes is our work”,Jake Archibald, Google
Why should we stop developing classic
Single Page Applications?
Thank you
Denis Izmaylov
@DenisIzmaylov
https://github.com/DenisIzmaylov
http://startup-makers.com
denis_izmaylov
izmaylov.dm@gmail.com
Secret Slide
top related