Isomorphic React Applications: Performance And Scalability

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 know
1. React 14
2. webpack
3. ES6
4. Node.js
5. Express / koa
6. Isomorphic (Universal) apps
6

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

Single Page 
Applications 
(SPA)

Single Page Application
Server
Browser
16

Server
Browser
Is the page exists? 
Do we need auth? 
Do we have access?
17

Server
Browser
Is the page exists? 
Do we need auth? 
Do we have access?
- Tiny HTML, [CSS]
- JavaScript bundle
18

Benefits
• Easy to start
• webpack
• <div id=“root” />
• React, Redux
• build
19

Benefits
• Easy to start
• Rich features
webpack, <div id=“root” />, React, Redux
20

Benefits
• Easy to start
• Rich features
• Fast enhancement
21

Benefits
• Easy to start
• Rich features
• Responsive UI
22

Benefits
• Easy to start
• Rich features
• Responsive UI
• Useful caching
23

Flaws
• Long-time Start
• JavaScript bundle up to 3-5 Mb
• first request
• execution
• memory
25

Flaws
• Long-time Start
• Expensive maintenance
• side effects
• memory leak
1st request, CPU, mem
26

Flaws
• Long-time Start
• Empty page, one URL
side effects, memory leaks
27

Flaws
• Long-time Start
• Empty page, one URL
• Legacy Browsers
side effects, memory leaks
28

Flaws
• Long-Time Start
for business
reduced UX
30

Flaws
• Long-Time Start
• Expensive Maintenance
for business
reduced UX
risks
31

Flaws
• Long-Time Start
• Empty Page
for business
reduced UX
risks
SEO problems
32

Flaws
• Long-Time Start
• Empty Page
• One URL
for business
reduced UX
risks
SEO problems
SMM problems
33

Flaws
• Long-Time Start
• Empty Page
• One URL
• Legacy Browsers
for business
reduced UX
risks
SEO problems
SMM problems
lost audience
34

Flaws
• Long-Time Start
• Empty Page
• One URL
• Legacy Browsers
for business
reduced UX
risks
SEO problems
SMM problems
lost audience
35
Expenses

Flaws
for business
reduced UX
risks
SEO problems
SMM problems
lost audience
36
Expenses

Take the best
from the both worlds

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
server.jsNode.js
worker.js
client.jsBrowser
admin.js
Business Logic
Components
API interfaces
Actions, Reducers
Static Files

Browser
Front-end
Server
Back-end
Server 
 
Database
Java 
etc

Browser
Front-end
Server
Back-end
Server 
 
Database
Java 
etc
- HTML
- [critical CSS]
- …

Front-end
Client
Front-end
Server
Back-end
Server 
 
Database
Java 
etc
- HTML
- [critical CSS]
- JS Bundle

Front-end
Client
Front-end
Server
• One execution
environment 
• Shared codebase 
• Full control 
• Ecosystem
47

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

Example code for Server-Side:
import ReactDOMServer from 'react-dom/server'; 
import Application from './components/application'; 
 
const body = ReactDOMServer.renderToString( 
<Application /> 
);
51

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

That’s super when we have all data for response:
 
const initialState = { siteName: 'Startup Makers' }; 
<Application state={initialState} /> 
);
57

That’s super when we have all data for response:
 
const initialState = { siteName: 'Startup Makers' }; 
<Application state={initialState} /> 
);
What if we have to
load it async?
58

How to get asynchronous State: 
1. Manual for each page
2. Facebook Relay
3. redux-catch-promise
59

Asynchronous State
Manual for each page:
• Define which data we have to load for
each page
• Load this data and prepare State
• ReactDOMServer.renderToString()
60

Asynchronous State
Facebook Relay:
1. The framework for building data-driven
React applications
2. Declarative. Colocation. Mutations.
3. https://github.com/facebook/relay/
issues/136
4. 1Q2016
61

Asynchronous State
redux-catch-promise:
• Redux - state container для React
• Redux: the best for isomorphic apps,
MoscowJS 25 
https://youtu.be/Uyk_8WWna6s
• redux-catch-promise is middleware for
Redux
62

Asynchronous State
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 State
1. Example and source code: 
https://github.com/DenisIzmaylov/
redux-catch-promise
2. Installation:
npm install redux-catch-promise
64

Performance
Test stand:
MacBook Pro 15” Retina (Early 2013)
2.4 GHz Intel Core i7
66

Performance
Page 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 ms 
Is it slow or fast?
76

Performance
61.850 ms 
Is it slow or fast? 
 
The same template in Handlebars: 
8.385 ms 
 
86% less
77

Performance
61.850 ms 
Is it slow or fast? 
 
The same template in Handlebars: 
8.385 ms 
 
86% less
78

Performance
1. 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% less
81

Performance
Looks better. 
 
But it’s still not funny.
82

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/812 
 
Solution: 
use directly react/dist/react.min.js
86

Performance
Create 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

Performance
Create 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 influence 
on results?

Performance
Server rendering is slower with npm react
react/dist/react.min.js
Executing…
90

Performance
Executing…
(vs 37.943 ms) 
0.08% more
91

Performance
Executing…
(vs 37.943 ms) 
0.08% more
FAILED
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
Results
NODE_ENV=production 
39% less

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

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-stream
101

Facebook BigPipe
• Bundle a page during it’s loading
• Assets is loading parallel
• Resistants to errors

HAProxy
• Multiple Node.js instance
• Ask your DevOps engineer
106

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 Links
1. 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 page 
https://engineering.linkedin.com/frontend/new-technologies-
new-linkedin-home-page
4. Improving performance on Twitter.com 
https://blog.twitter.com/2012/improving-performance-on-
twittercom
5. Scaling Isomorphic Javascript Code 
http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/
109

Useful Links
6. 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 Apps 
http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
8. React server side rendering performance 
http://www.slideshare.net/nickdreckshage/react-meetup
9. The Lost Art of Progressive HTML Rendering 
http://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

izmaylov.dm@gmail.com
Submit short information about you

Thank you
Denis Izmaylov
@DenisIzmaylov
https://github.com/DenisIzmaylov
http://startup-makers.com
denis_izmaylov
izmaylov.dm@gmail.com

Isomorphic React Applications: Performance And Scalability

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Isomorphic React Applications: Performance And Scalability (20)

Recently uploaded (20)

Isomorphic React Applications: Performance And Scalability