Downloaded 18 times
![Раньше было просто
Сервер
Браузер
- HTML
- [CSS, JavaScript]
Делал всё](https://image.slidesharecdn.com/9-160115112256/85/React-Startup-Makers-12-320.jpg)
![Single Page Application
Сервер
Браузер
Страница существует?
Авторизация нужна?
Доступ есть?
- Tiny HTML, [CSS]
- JavaScript bundle](https://image.slidesharecdn.com/9-160115112256/85/React-Startup-Makers-17-320.jpg)
![Браузер
Изоморфные приложения
Front-end
сервер
Back-end
сервер
Database
Java
etc
- HTML
- [critical CSS]
- …](https://image.slidesharecdn.com/9-160115112256/85/React-Startup-Makers-43-320.jpg)
![Front-end
клиент
Изоморфные приложения
Front-end
сервер
Back-end
сервер
Database
Java
etc
- HTML
- [critical CSS]
- JS Bundle](https://image.slidesharecdn.com/9-160115112256/85/React-Startup-Makers-44-320.jpg)
![Front-end
клиент
Изоморфные приложения
Front-end
сервер
Back-end
сервер
Database
Java
etc
- HTML
- [critical CSS]
- JS Bundle](https://image.slidesharecdn.com/9-160115112256/85/React-Startup-Makers-45-320.jpg)
Uploaded byOntico
Изоморфные React-приложения производительность и масштабирование / Денис Измайлов (Startup Makers)
Документ обсуждает преимущества и недостатки изоморфных приложений на основе React, акцентируя внимание на проблемах, связанных с производительностью и масштабируемостью классических одностраничных приложений (SPA). Автор предлагает рассмотреть изоморфные приложения как решение, позволяющее использовать единый код для серверной и клиентской стороны, что улучшает SEO и пользовательский опыт. Предоставляются рекомендации по оптимизации производительности и упоминаются полезные ресурсы и инструменты для разработки.
More Related Content
Similar to Изоморфные React-приложения производительность и масштабирование / Денис Измайлов (Startup Makers)
Изоморфные React-приложения производительность и масштабирование / Денис Измайлов (Startup Makers)
- 1.
- 2. Почему от классического SinglePage Application необходимо отказаться?
- 3. Как изоморфные приложения отразятсяна Вашей зарплате?
- 4. Что вы будетеделать на этих выходных?
- 5. Идеально 1. React 14 2.webpack 3. ES6 4. Node.js 5. Express / koa 6. Isomorphic (Universal) apps
- 6.
- 7.
- 8.
- 9. Раньше было просто •Создал страницу • Добавил пару скриптов • Отправил в Production
- 10.
- 11.
- 12. Раньше было просто Сервер Браузер -HTML - [CSS, JavaScript] Делал всё
- 13.
- 14.
- 15.
- 16. Single Page Application Сервер Браузер Страницасуществует? Авторизация нужна? Доступ есть?
- 17. Single Page Application Сервер Браузер Страницасуществует? Авторизация нужна? Доступ есть? - Tiny HTML, [CSS] - JavaScript bundle
- 18. Single Page Application Плюсы •Легко начать • webpack • <div id=“root” /> • React, Redux • build
- 19. Single Page Application Плюсы •Легко начать • Богатый функционал webpack, <div id=“root” />, React, Redux
- 20. Single Page Application Плюсы •Легко начать • Богатый функционал • Быстро дорабатывать webpack, <div id=“root” />, React, Redux
- 21. Single Page Application Плюсы •Легко начать • Богатый функционал • Быстро дорабатывать • Отзывчивый UI webpack, <div id=“root” />, React, Redux
- 22. Single Page Application Плюсы •Легко начать • Богатый функционал • Быстро дорабатывать • Отзывчивый UI • Удобно кэшировать webpack, <div id=“root” />, React, Redux
- 23. - Wow. Ине одного минуса?
- 24. Single Page Application Минусы •Долгая загрузка • JavaScript bundle up to 3-5 Mb • первое обращение • исполнение • память
- 25. Single Page Application Минусы •Долгая загрузка • Сложность поддержки • side-эффекты • memory leak 1st request, CPU, mem
- 26. Single Page Application Минусы •Долгая загрузка • Сложность поддержки • Пустая страница, один URL 1st request, CPU, mem side-эффекты, memory leaks
- 27. Single Page Application Минусы •Долгая загрузка • Сложность поддержки • Пустая страница, один URL • Legacy Browsers 1st request, CPU, mem side-эффекты, memory leaks
- 28. - Разве этоминусы?
- 29. Single Page Application Минусы •Долгая загрузка для бизнеса снижение UX
- 30. Single Page Application Минусы •Долгая загрузка • Сложность поддержки для бизнеса снижение UX риски
- 31. Single Page Application Минусы •Долгая загрузка • Сложность поддержки • Пустая страница для бизнеса снижение UX риски проблемы SEO
- 32. Single Page Application Минусы •Долгая загрузка • Сложность поддержки • Пустая страница • Один URL для бизнеса снижение UX риски проблемы SEO проблемы SMM
- 33. Single Page Application Минусы •Долгая загрузка • Сложность поддержки • Пустая страница • Один URL • Legacy Browsers для бизнеса снижение UX риски проблемы SEO проблемы SMM потеря ЦА
- 34. Single Page Application Минусы •Долгая загрузка • Сложность поддержки • Пустая страница • Один URL • Legacy Browsers для бизнеса снижение UX риски проблемы SEO проблемы SMM потеря ЦА Расходы
- 35. Single Page Application Минусы длябизнеса снижение UX риски проблемы SEO проблемы SMM потеря ЦА Расходы
- 36. - WAT? Чтоделать?
- 37. Взять лучшее изобоих миров
- 38.
- 39. Изоморфные приложения By isomorphicwe mean that any given line of code (with notable exceptions) can execute both on the client and the server. Charlie Robbins, 18 Oct 2011
- 40.
- 41.
- 42.
- 43.
- 44. Front-end клиент Изоморфные приложения Front-end сервер Back-end сервер Database Java etc - HTML -[critical CSS] - JS Bundle
- 45. Front-end клиент Изоморфные приложения Front-end сервер Back-end сервер Database Java etc - HTML -[critical CSS] - JS Bundle
- 46. Front-end клиент Изоморфные приложения Front-end сервер • Единаясреда исполнения • Общая кодовая база • Полный контроль • Экосистема
- 47.
- 48.
- 49. Server-Side Rendering • СборкаReact-приложения в HTML-код на Front-end сервере • Моментальное отображение в браузере, ещё до загрузки JS • Когда JS загрузится, React только добавит обработчики событий • А это очень быстро
- 50. Server-Side Rendering Код насервере выглядит очень просто: import ReactDOMServer from 'react-dom/server'; import Application from './components/application'; const body = ReactDOMServer.renderToString( <Application /> );
- 51. Server-Side Rendering 1. Пользовательвидит страницу мгновенно 2. Отсутствие дополнительных запросов на получение данных 3. Страница может работать даже без JS 4. Полноценная URL-навигация и мета-тэги 5. Сохранение всех возможностей современного JavaScript
- 52.
- 53.
- 54.
- 55.
- 56. Server-Side Rendering Всё супер,когда данные есть: import ReactDOMServer from 'react-dom/server'; import Application from './components/application'; const initialState = { siteName: 'HighLoad++ 2015' }; const body = ReactDOMServer.renderToString( <Application state={initialState} /> );
- 57. Server-Side Rendering Всё супер,когда данные есть: import ReactDOMServer from 'react-dom/server'; import Application from './components/application'; const initialState = { siteName: 'HighLoad++ 2015' }; const body = ReactDOMServer.renderToString( <Application state={initialState} /> ); Но если их надо получать извне?
- 58. Server-Side Rendering Как получитьасинхронный State: 1. Вручную для каждой страницы 2. Facebook Relay 3. redux-catch-promise
- 59. Асинхронный State Вручную длякаждой страницы: • Получить State, необходимый для страницы • ReactDOMServer.renderToString()
- 60. Асинхронный State Facebook Relay: 1.The framework for building data-driven React applications 2. Declarative. Colocation. Mutations. 3. https://github.com/facebook/relay/issues/13 6 4. 1Q2016
- 61. Асинхронный State redux-catch-promise: • Redux- state container для React • Redux: the best for isomorphic apps, MoscowJS 25 https://youtu.be/Uyk_8WWna6s • redux-catch-promise - это middleware для Redux
- 62. Асинхронный State redux-catch-promise: 1. Вешаемcallback для захвата Promise- экшнов 2. Делаем рендер приложения 3. Делаем запрос к БД, диспатчим Promise 4. После рендера - имеем все эти промисы, ожидаем их завершения 5. Повторный рендер, с данными
- 63. Асинхронный State redux-catch-promise: 1. Примерыи исходный код: https://github.com/DenisIzmaylov/redux- catch-promise 2. Установка: npm install redux-catch-promise
- 64.
- 65. Производительность Тестовый стенд: MacBook Pro15” Retina (Early 2013) 2.4 GHz Intel Core i7
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72. Производительность Для теста используем: ab-n 100 http://localhost:3000/profile
- 73. Производительность Для теста используем: ab-n 100 http://localhost:3000/profile Запускаем…
- 74. Производительность Для теста используем: ab-n 100 http://localhost:3000/profile Запускаем… Time per request: 61.850 ms
- 75.
- 76. Производительность 61.850 ms Тот жешаблон в Handlebars: 8.385 ms 86% less
- 77. Производительность 1. Идём вGoogle - ничего полезного. 2. Пробуем спросить Twitter - тишина:
- 78. Производительность Ок, а чтоесли? NODE_ENV=production Запускаем…
- 79. Производительность Ок, а чтоесли? NODE_ENV=production Запускаем… Time per request: 37.943 ms (vs 61.850 ms) 39% less
- 80.
- 81. Производительность Вроде лучше. Но всёещё не торт.
- 82.
- 83.
- 84. Производительность • “Server renderingis slower with npm react” https://github.com/facebook/react/issues/812
- 85. Производительность • “Server renderingis slower with npm react” https://github.com/facebook/react/issues/812 Решение: явно подключать react/dist/react.min.js
- 86. Производительность Создаём 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. Производительность Создаём 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.
- 89. Производительность Server rendering isslower with npm react react/dist/react.min.js Запускаем…
- 90. Производительность Server rendering isslower with npm react react/dist/react.min.js Запускаем… Time per request: 38.253 ms (vs 37.943 ms) 0.08% more
- 91. Производительность Server rendering isslower with npm react react/dist/react.min.js Запускаем… Time per request: 38.253 ms (vs 37.943 ms) 0.08% more
- 92. 62 8 38 38 0 17.5 35 52.5 70 React SSRHandlebars production react.js.min Результаты
- 93. 62 8 38 38 0 17.5 35 52.5 70 React SSRHandlebars production react.js.min Результаты 39% less
- 94.
- 95.
- 96. Продвинутые решения 1. Precompilation+ Cache 2. Rendering Separation 3. React DOM Stream 4. Facebook BigPipe 5. HAProxy
- 97. Precompilation + Cache •UI = f(state) • f = React Component • state = path + ... Простое решение: redis First render: redis + kue + workers
- 98.
- 99. 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, and user perceived performance gains can be even greater.” • Target - 108KB page on Heroku • Time To First Byte (TTFB) - 65% less • Time To Last Byte (TTLB) - 37% less • https://github.com/aickin/react-dom-stream
- 100. Facebook BigPipe • Сборкастраницы в процессе загрузки • Загружается параллельно • Устойчивость к ошибкам
- 101. Facebook BigPipe • Сборкастраницы на в процессе загрузки • Всё, что необходимо - загружается параллельно • Устойчивость к ошибкам
- 102.
- 103. HAProxy • Обратитесь кDevOps • Несколько экземпляров
- 104.
- 105. Полезные материалы 1. Superchargingpage 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-
- 106. Полезные материалы 6. FromAngularJS 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-
- 107. Рекомендации • Присоединяйтесь к сообществуMoscowJS http://moscowjs.ru/ • Улучшайте английский, не читайте советских газет • Читайте оригиналы и технические блоги • Активно внедряйте в свою жизнь Twitter и GitHub
- 108. Послесловие «Большинство проблем алгоритмов можнорешить сменой структуры данных», Андрей Ситник “Changes is our work”, Jake Archibald, Google
- 109. Почему от классического SinglePage Application необходимо отказаться?
- 110.
- 111.