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


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

Single Page ApplicationBenefits

• Easy to start • webpack

• <div id=“root” />

• React, Redux

• build

19


• Easy to start

• Rich features

webpack, <div id=“root” />, React, Redux

20


• Easy to start

• Rich features

• Fast enhancement


21


• Easy to start

• Rich features


• Responsive UI


22


• Easy to start

• Rich features


• Responsive UI

• Useful caching


23

- Wow. Is it so ideal?

Single Page ApplicationFlaws

• Long-time Start • JavaScript bundle up to 3-5 Mb

• first request

• execution

• memory

25


• Long-time Start

• Expensive maintenance

• side effects

• memory leak

1st request, CPU, mem

26


• Long-time Start


• Empty page, one URL


side effects, memory leaks

27


• Long-time Start


• Empty page, one URL

• Legacy Browsers


side effects, memory leaks

28

- Why is it “flaws”?


• Long-Time Start

for business

reduced UX

30


• Long-Time Start

• Expensive Maintenance

for business

reduced UX

risks

31


• Long-Time Start


• Empty Page

for business

reduced UX

risks

SEO problems

32


• Long-Time Start


• Empty Page

• One URL

for business

reduced UX

risks

SEO problems

SMM problems

33


• Long-Time Start


• Empty Page

• One URL

• Legacy Browsers

for business

reduced UX

risks

SEO problems

SMM problems

lost audience

34


• Long-Time Start


• Empty Page

• One URL

• Legacy Browsers

for business

reduced UX

risks

SEO problems

SMM problems

lost audience

35Expenses


for business

reduced UX

risks

SEO problems

SMM problems

lost audience

36Expenses

- What to do?

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 Javaetc

Browser


Front-end Server

Back-end Server

Database Javaetc

- HTML - [critical CSS] - …

Front-end Client


Front-end Server

Back-end Server

Database Javaetc

- HTML - [critical CSS] - JS Bundle

Front-end Client


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

https://github.com/facebook/relay/issues/136

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

https://youtu.be/Uyk_8WWna6s


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


1. Example and source code:https://github.com/DenisIzmaylov/redux-catch-promise

2. Installation:

npm install redux-catch-promise

64

https://github.com/DenisIzmaylov/redux-catch-promise

Performance

Performance

Test stand:

MacBook Pro 15” Retina (Early 2013)

2.4 GHz Intel Core i7

66

PerformancePage size: 56 238 bytes

Performance

Test with:

ab -n 100 http://localhost:3000/profile

73

Performance

Test with:


Executing…

74

Performance

Test with:


Executing…

Time per request: 61.850 ms

75

Performance

61.850 msIs it slow or fast?

76

Performance


The same template in Handlebars:

8.385 ms

86% less

77

Performance


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

https://github.com/facebook/react/issues/812

Performance

• “Server rendering is slower with npm react”https://github.com/facebook/react/issues/812Solution:use directly react/dist/react.min.js

86

https://github.com/facebook/react/issues/812

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



Executing…

Time per request: 38.253 ms(vs 37.943 ms)0.08% more

91

Performance



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

https://github.com/aickin/react-dom-stream

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

https://youtu.be/d5_6yHixpsQ

http://techblog.netflix.com/2015/08/making-netflixcom-faster.html

https://engineering.linkedin.com/frontend/new-technologies-new-linkedin-home-page

https://blog.twitter.com/2012/improving-performance-on-twittercom

http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/

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

https://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/

http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

http://www.slideshare.net/nickdreckshage/react-meetup

http://blog.codinghorror.com/the-lost-art-of-progressive-html-rendering/

https://github.com/addyosmani/critical

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?

[email protected]

Submit short information about you

mailto:[email protected]?subject=

Thank you

Denis Izmaylov

@DenisIzmaylov

https://github.com/DenisIzmaylov

http://startup-makers.com

denis_izmaylov

[email protected]

http://startup-makers.com

mailto:[email protected]?subject=

Secret Slide