Performance and Scalability Art of Isomorphic React Applications
6 likes1,949 views
The document discusses the advantages and disadvantages of single-page applications (SPAs) and introduces isomorphic applications as a potential solution for improving web development performance and scalability. It emphasizes the benefits of isomorphic applications, including shared codebases and better user experience, particularly in terms of SEO and social marketing. Additionally, it outlines advanced strategies for enhancing server-side rendering and overall application efficiency.
![How easy it was
Server
Browser
- HTML
- [CSS, JavaScript]
Does everything
13](https://image.slidesharecdn.com/reactamsterdam-isomorphicreact-applications-160706164909/85/Performance-and-Scalability-Art-of-Isomorphic-React-Applications-13-320.jpg)
![Single Page Application
Server
Browser
Is the page exists?âš
Do we need auth?âš
Do we have access?
- Tiny HTML, [CSS]
- JavaScript bundle
23](https://image.slidesharecdn.com/reactamsterdam-isomorphicreact-applications-160706164909/85/Performance-and-Scalability-Art-of-Isomorphic-React-Applications-23-320.jpg)
![Single Page Application
Server
Browser
Is the page exists?âš
Do we need auth?âš
Do we have access?
- Tiny HTML, [CSS]
- JavaScript bundle
24
- AJAX
- iframes](https://image.slidesharecdn.com/reactamsterdam-isomorphicreact-applications-160706164909/85/Performance-and-Scalability-Art-of-Isomorphic-React-Applications-24-320.jpg)
![Isomorphic Applications
- HTML
- [critical CSS]
- âŠ
Front-end
Serverâš
Node.jsâš
Back-end
Serverâš
âš
APIâš
Database
Java
PHPâš
etc
Browserâš
(Client)](https://image.slidesharecdn.com/reactamsterdam-isomorphicreact-applications-160706164909/85/Performance-and-Scalability-Art-of-Isomorphic-React-Applications-55-320.jpg)
![Front-end
Client
Isomorphic Applications
- HTML
- [critical CSS]
- JS Bundle
Front-end
Serverâš
Node.jsâš
Back-end
Serverâš
âš
APIâš
Database
Java
PHPâš
etc](https://image.slidesharecdn.com/reactamsterdam-isomorphicreact-applications-160706164909/85/Performance-and-Scalability-Art-of-Isomorphic-React-Applications-56-320.jpg)
![Front-end
Client
Isomorphic Applications
- HTML
- [critical CSS]
- JS Bundle
Front-end
Serverâš
Node.jsâš
Back-end
Serverâš
âš
APIâš
Database
Java
PHPâš
etc](https://image.slidesharecdn.com/reactamsterdam-isomorphicreact-applications-160706164909/85/Performance-and-Scalability-Art-of-Isomorphic-React-Applications-57-320.jpg)
![Precompilation + Cache
âą UI = f(state)
âą f = React Component
âą state = path + [actions] + âŠâš
1. Simple solution: redis
2. Deferred server-side rendering:âš
redis + kue.js + workers 121](https://image.slidesharecdn.com/reactamsterdam-isomorphicreact-applications-160706164909/85/Performance-and-Scalability-Art-of-Isomorphic-React-Applications-121-320.jpg)
![Z-Axis Scaling
134
Load
Balancer
[A - I]
[J - R]
[S - Z]
/catalog/*
/catalog/*
/catalog/*
By splittingâš
the data](https://image.slidesharecdn.com/reactamsterdam-isomorphicreact-applications-160706164909/85/Performance-and-Scalability-Art-of-Isomorphic-React-Applications-134-320.jpg)
Performance and Scalability Art of Isomorphic React Applications
- 1. Isomorphic React Applications: Performance & Scalability Denis Izmaylov June 23, 2016
- 2. Denis Izmaylov âą 16 years of Software and Web development experience âą The last 6 years focused exclusivelyâš on Front-end and Web âą 15+ projects, including SPA,âš high-load and React âą Commits to Redux, webpack and koa âą Speaker at HighLoad++ 2015,âš AgileDays 2016, RIT 2016, DevConf 2016 âą Regular speaker at MoscowJS meetups âą âApplication and Universal Componentsâ and other articles
- 3. âą We develop web,âš mobile and DevOps projects forâš our customers âą We use right and most efficient solutions âą We have more than 20 talented developersâš in the team
- 4. Why should we stop developing classic Single Page Applications?
- 5. How does isomorphic applications affect your income?
- 6. What will you be doing this weekend?
- 8. Web became a serious environment
- 10. How easy it was âą Create a HTML file âą Add some scripts âą Submit to Production
- 11. How easy it was Server Browser 11
- 12. How easy it was Server Browser Does everything 12
- 13. How easy it was Server Browser - HTML - [CSS, JavaScript] Does everything 13
- 14. It worked
- 15. Segmentation
- 19. Segmentation Front-end Back-end Changes are delivered with delay
- 22. Single Page Application Server Browser Does the page exists?âš Do we need auth?âš Do we have access? 22
- 23. Single Page Application Server Browser Is the page exists?âš Do we need auth?âš Do we have access? - Tiny HTML, [CSS] - JavaScript bundle 23
- 24. Single Page Application Server Browser Is the page exists?âš Do we need auth?âš Do we have access? - Tiny HTML, [CSS] - JavaScript bundle 24 - AJAX - iframes
- 25. Single Page Application Benefits âą Easy to start âą <div id="root" /> âą React, Redux âą build JS bundle 25
- 26. Single Page Application Benefits âą Easy to start âą Rich features webpack, <div id=ârootâ />, React, Redux 26
- 27. Single Page Application Benefits âą Easy to start âą Rich features âą Fast enhancement webpack, <div id=ârootâ />, React, Redux 27
- 28. Single Page Application Benefits âą Easy to start âą Rich features âą Fast enhancement âą Responsive UI webpack, <div id=ârootâ />, React, Redux 28
- 29. Single Page Application Benefits âą Easy to start âą Rich features âą Fast enhancement âą Responsive UI âą Effortless caching webpack, <div id=ârootâ />, React, Redux 29
- 30. - Wow. Is it so ideal?
- 31. Single Page Application Costs âą Long-time Start âą JavaScript bundle up to 3-5 Mb âą first request âą execution âą memory 31
- 32. Single Page Application Costs âą Long-time Start âą Expensive maintenance âą side effects âą memory leaks 1st request, CPU, mem 32
- 33. Single Page Application Costs âą Long-time Start âą Expensive maintenance âą Empty page, one URL 1st request, CPU, mem side effects, memory leaks 33
- 34. Single Page Application Costs âą Long-time Start âą Expensive maintenance âą Empty page, one URL âą Hard to support Legacy Browsers 1st request, CPU, mem side effects, memory leaks 34
- 35. - Are they really âcostsâ?
- 36. Single Page Application for business 36
- 37. Single Page Application Costs âą Long-Time Start for business reduced UX 37
- 38. Kissmetrics Blog
- 39. Kissmetrics Blog ââŠIf e-commerce sites is making $100,000 per day,âš a one second page delayâš could potentially cost youâš $2.5 million in lost salesâš every yearâŠâ 39
- 41. Single Page Application Costs âą Long-Time Start âą Expensive Maintenance for business reduced UX risks 41
- 42. Single Page Application Costs âą Long-Time Start âą Expensive Maintenance âą Empty Page for business reduced UX risks SEO problems 42
- 43. Single Page Application Costs âą Long-Time Start âą Expensive Maintenance âą Empty Page âą One URL for business reduced UX risks SEO problems Social Sharing problems 43
- 44. Single Page Application Costs âą Long-Time Start âą Expensive Maintenance âą Empty Page âą One URL âą Legacy Browsers for business reduced UX risks SEO problems Social Sharing problems lost audience 44
- 45. Single Page Application Costs âą Long-Time Start âą Expensive Maintenance âą Empty Page âą One URL âą Legacy Browsers for business reduced UX risks SEO problems Social Sharing problems lost audience 45 Losses
- 46. Single Page Application Costs for business reduced UX risks SEO problems Social Sharing problems lost audience 46 Losses
- 47. - What should we do?âš How do we solve this?
- 48. Take the best from both worlds
- 50. 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
- 51. Templates Stylesheets 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, etc
- 52. Templates Stylesheets 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, etc + React Native
- 55. Isomorphic Applications - HTML - [critical CSS] - ⊠Front-end Server⚠Node.js⚠Back-end Server⚠⚠API⚠Database Java PHP⚠etc Browser⚠(Client)
- 56. Front-end Client Isomorphic Applications - HTML - [critical CSS] - JS Bundle Front-end Serverâš Node.jsâš Back-end Serverâš âš APIâš Database Java PHPâš etc
- 57. Front-end Client Isomorphic Applications - HTML - [critical CSS] - JS Bundle Front-end Serverâš Node.jsâš Back-end Serverâš âš APIâš Database Java PHPâš etc
- 58. Front-end Client Isomorphic Applications Front-end Server âą One execution environment âą Shared codebase âą Full control âą Ecosystem âą Microservices Architecture 58
- 59. Yesterday Front-end was only browser Front-end Back-end
- 60. Front-end Back-end Today Front-end is browser and server
- 61. - How can we do that?
- 63. Server-Side Rendering âą Build HTML on Front-end (Node.js) Server âą Render Page in your browser immediately, before it loads JavaScript âą When JavaScript will be loaded,âš React just add event handlers only âą It works very fast 63
- 64. Server-Side Rendering Example code for Server-Side: import ReactDOMServer from 'react-dom/server';âš import Application from './components/application';âš âš const body = ReactDOMServer.renderToString(âš <Application />âš ); 64
- 65. Server-Side Rendering Example code for Server-Side: import ReactDOMServer from 'react-dom/server';âš import Application from './components/application';âš âš const body = ReactDOMServer.renderToString(âš <Application />âš ); 65 Render React Componentâš to plain string
- 66. Server-Side Rendering 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. Better security 66
- 69. Server-Side Rendering Thatâ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} />âš ); 69
- 70. Server-Side Rendering Thatâ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? 70
- 71. Server-Side Rendering How to get async State:âš 1. Manual for each page 2. Facebook Relay 3. Request Promises 71
- 72. Asynchronous State Manual for each page: âą Define which data you have to load for each page âą Load this data and prepare Initial State âą ReactDOMServer.renderToString() 72
- 73. Asynchronous State Facebook Relay:âš 1. The framework for building data-driven React applications 2. Declarative data fetching 3. https://github.com/denvned/isomorphic- relay 73
- 74. Asynchronous State Request Promises:âš âą Redux - state container for React âą Redux is close to be standard for React apps âą Redux: the best for isomorphic apps, MoscowJS 25âš https://youtu.be/Uyk_8WWna6s âą We will use Redux for next steps 74
- 75. Request Promises Two ways:âš 1. Call static methods for each main Component before render 2. Pre-render Elements Tree without data,âš push requests promises in constructors and re-render Elements with data 75
- 76. Request Promises Handle static methods with React Routerâš 1. Create Redux store 2. Link Redux Store with Router middleware 3. Dispatch MATCH action forâš requested location 4. Add response handler for `store.router.then()` 5. Router middleware lookup for static `fetchData` method in component of Route 76
- 77. Request Promises 77 Create Store Express Route Wait for resolving `fetchData` Render Components with Data Find Component for route
- 78. Request Promises 78 Static method in Components: class PartnersPage extends Component {âš static fetchData(getState, dispatch) {âš dispatch({âš type: PARTNERS_REQUEST,âš payload: fetch('/api/partners', âŠ),âš })âš }âš // âŠ.
- 79. Request Promises 79 Static method in Components: export default (âš <Route path='/' component={Layout}>âš <Routeâš path='/partners'âš component={PartnersPage}âš />âš </Route>âš )
- 80. Request Promises 80 Static method in Components: const store = createStore()âš store.getState().router.then((err, redirect, props) => {âš const content = renderToString(âš <Provider store={store}>âš <RouterContext {âŠprops} />âš </Provider>âš )âš res.send(content)âš })
- 81. Catching Request Promises Static method:âš 1. react-router-redux 2. redux-router 81
- 82. Catching Request Promises What if you need computing for âš some custom paramsâš to fetch data? 82
- 83. Catching Request Promises What if you like delegateâš decision about requestsâš down to the tree? 83
- 84. redux-catch-promise:âš 1. Render the Elements Tree without Data 2. Collect all promises 3. Wait until they will be resolved 4. Re-render the Elements Tree with fetched data 5. Send rendered HTML to client 84 Catching Request Promises
- 85. redux-catch-promise:âš 1. Example and source code:âš https://github.com/DenisIzmaylov/ redux-catch-promise 2. Installation: npm install redux-catch-promise 85 Catching Request Promises
- 86. Performance
- 87. Performance Test stand: MacBook Pro 15â Retina (Early 2013) 2.4 GHz Intel Core i7 87
- 88. Performance Page size: 56 Kb
- 89. Performance Page size: 56 Kb
- 90. Performance Page size: 56 Kb
- 91. Performance Page size: 56 Kb
- 92. Performance Page size: 56 Kb
- 93. Performance Page size: 56 Kb
- 94. Performance We will test it with ab Apache HTTP server benchmarking toolâš âš https://httpd.apache.org/docs/2.4/ programs/ab.html 94
- 95. Performance Test with: ab -n 100 http://localhost:3000/profileâš 95
- 96. Performance Test with: ab -n 100 http://localhost:3000/profile Executing⊠96
- 97. Performance Test with: ab -n 100 http://localhost:3000/profile Executing⊠Time per request: 62 ms 97
- 98. Performance 62 msâš Is it slow or fast? 98
- 99. Performance 62 msâš Is it slow or fast?âš âš The same template in Handlebars:âš 8 msâš âš 86% less 99
- 100. Performance 62 msâš Is it slow or fast?âš âš The same template in Handlebars:âš 8 msâš âš 86% less 100
- 101. Performance 1. Try to search in Google - nothing 2. Try to ask in Twitter - silence: 101
- 102. Performance Ok, what if we do that? NODE_ENV=production Executing⊠102
- 103. Performance Ok, what if we do that? NODE_ENV=production Executing⊠Time per request: 38 ms⚠(vs 62 ms)⚠39% less 103
- 105. Performance Looks betterâš âš But itâs still not funny 105
- 106. Go ahead
- 107. GitHub issues
- 108. Performance âą âServer rendering is slower with npm reactââš âš https://github.com/facebook/react/issues/812âš âš 108
- 109. Performance âą âServer rendering is slower with npm reactââš âš https://github.com/facebook/react/issues/812âš âš Solution:âš use directly react/dist/react.min.js 109
- 110. 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'); }âš 110
- 111. 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'); }âš 111
- 112. How does it influenceâš results?
- 113. Performance Server rendering is slower with npm react react/dist/react.min.js Executing⊠113
- 114. 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 114
- 115. 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 FAILED 115
- 116. 0 17,5 35 52,5 70 38,25337,943 8,385 61,85 React SSR Handlebars production react.min.js Results
- 117. 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
- 120. Advanced Solutions 1. Precompilation + Cache 2. Rendering Separation 3. HTML Streaming 4. Facebook BigPipe 5. HAProxy 120
- 121. Precompilation + Cache âą UI = f(state) âą f = React Component âą state = path + [actions] + âŠâš 1. Simple solution: redis 2. Deferred server-side rendering:âš redis + kue.js + workers 121
- 123. HTML Streaming 123Usually we do this
- 124. HTML Streaming âą 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://www.youtube.com/watch?v=PnpfGy7q96U âą https://github.com/aickin/react-dom-stream 124
- 125. Facebook BigPipe âą Bundle a page during itâs loading âą Assets are loading parallel âą Resistants to errors
- 126. Facebook BigPipe âą Bundle a page during itâs loading âą Assets are loading parallel âą Resistants to errors
- 127. Facebook BigPipe âą Bundle a page during itâs loading âą Assets is loading parallel âą Resistants to errors
- 128. Facebook BigPipe âą Bundle a page during itâs loading âą Assets are loading parallel âą Resistants to errors
- 130. HAProxy 130 âą Multiple Node.js instance âą Ask your DevOps engineer âą Use CoreOS, Kubernetes or Mesosphere
- 131. Scale Cube 131 Monolith Infinite Scaling Y axis - functional decomposition X axis - horizontal duplication Zaxis-resources partitioning
- 132. X-Axis Scaling 132 Load Balancer Application Application Application By replicatingâš the entire application
- 133. Y-Axis Scaling 133 Load Balancer Chat Catalog Orders /catalog /chat /orders By splittingâš the application
- 134. Z-Axis Scaling 134 Load Balancer [A - I] [J - R] [S - Z] /catalog/* /catalog/* /catalog/* By splittingâš the data
- 135. Z-Axis Scaling 135 Load Balancer Regular Premium Premium /catalog/* /catalog/* /catalog/* By splittingâš the resources
- 136. Epilogue
- 137. âAlmost all algorithm problems could be solved by changing a data structureâ âChanges is our workâ,âš Jake Archibald, Google
- 138. Why should we stop developing classic Single Page Applications?
- 139. Takeaways 1. Classic SPA is very expensive for business 2. Isomorphic Applications provides better UX, SEO, Social Marketing, reduce risks and costs 3. Shared codebase and one ecosystem is good investment to high efficiency development 4. SSR performance is not good 5. We know a lot of advanced solutions to improve it very well 6. Microservices architecture is best solution where we will have Front-end Server just as Render service
- 141. 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/ 141
- 142. 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 142
- 143. Secret Slide