Изоморфные react-приложения: производительность и...
TRANSCRIPT
![Page 1: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/1.jpg)
Изоморфные React-приложения:производительность и масштабирование
Денис Измайлов
![Page 2: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/2.jpg)
Почему от классического Single Page Application необходимо отказаться?
![Page 3: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/3.jpg)
Как изоморфные приложения отразятся на Вашей зарплате?
![Page 4: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/4.jpg)
Что вы будете делатьна этих выходных?
![Page 5: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/5.jpg)
Идеально1. React 14
2. webpack
3. ES6
4. Node.js
5. Express / koa
6. Isomorphic (Universal) apps
![Page 6: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/6.jpg)
Часть 1
![Page 7: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/7.jpg)
Web стал очень большим
![Page 8: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/8.jpg)
Искусство
Разработка под Web
Наука
![Page 9: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/9.jpg)
Раньше было просто• Создал страницу
• Добавил пару скриптов
• Отправил в Production
![Page 10: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/10.jpg)
Раньше было просто
Сервер
Браузер
![Page 11: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/11.jpg)
Раньше было просто
Сервер
Браузер
Делал всё
![Page 12: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/12.jpg)
Раньше было просто
Сервер
Браузер- HTML - [CSS, JavaScript]
Делал всё
![Page 13: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/13.jpg)
Это работало
![Page 14: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/14.jpg)
Single PageApplications
(SPA)
![Page 15: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/15.jpg)
Single Page Application
Сервер
Браузер
![Page 16: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/16.jpg)
Single Page Application
Сервер
Браузер
Страница существует?Авторизация нужна? Доступ есть?
![Page 17: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/17.jpg)
Single Page Application
Сервер
Браузер
Страница существует?Авторизация нужна? Доступ есть?
- Tiny HTML, [CSS] - JavaScript bundle
![Page 18: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/18.jpg)
Single Page ApplicationПлюсы
• Легко начать • webpack
• <div id=“root” />
• React, Redux
• build
![Page 19: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/19.jpg)
Single Page ApplicationПлюсы
• Легко начать
• Богатый функционал
webpack, <div id=“root” />, React, Redux
![Page 20: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/20.jpg)
Single Page ApplicationПлюсы
• Легко начать
• Богатый функционал
• Быстро дорабатывать
webpack, <div id=“root” />, React, Redux
![Page 21: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/21.jpg)
Single Page ApplicationПлюсы
• Легко начать
• Богатый функционал
• Быстро дорабатывать
• Отзывчивый UI
webpack, <div id=“root” />, React, Redux
![Page 22: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/22.jpg)
Single Page ApplicationПлюсы
• Легко начать
• Богатый функционал
• Быстро дорабатывать
• Отзывчивый UI
• Удобно кэшировать
webpack, <div id=“root” />, React, Redux
![Page 23: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/23.jpg)
- Wow. И не одного минуса?
![Page 24: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/24.jpg)
Single Page ApplicationМинусы
• Долгая загрузка • JavaScript bundle up to 3-5 Mb
• первое обращение
• исполнение
• память
![Page 25: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/25.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
• Сложность поддержки
• side-эффекты
• memory leak
1st request, CPU, mem
![Page 26: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/26.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
• Сложность поддержки
• Пустая страница, один URL
1st request, CPU, mem
side-эффекты, memory leaks
![Page 27: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/27.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
• Сложность поддержки
• Пустая страница, один URL
• Legacy Browsers
1st request, CPU, mem
side-эффекты, memory leaks
![Page 28: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/28.jpg)
- Разве это минусы?
![Page 29: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/29.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
для бизнеса
снижение UX
![Page 30: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/30.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
• Сложность поддержки
для бизнеса
снижение UX
риски
![Page 31: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/31.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
• Сложность поддержки
• Пустая страница
для бизнеса
снижение UX
риски
проблемы SEO
![Page 32: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/32.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
• Сложность поддержки
• Пустая страница
• Один URL
для бизнеса
снижение UX
риски
проблемы SEO
проблемы SMM
![Page 33: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/33.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
• Сложность поддержки
• Пустая страница
• Один URL
• Legacy Browsers
для бизнеса
снижение UX
риски
проблемы SEO
проблемы SMM
потеря ЦА
![Page 34: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/34.jpg)
Single Page ApplicationМинусы
• Долгая загрузка
• Сложность поддержки
• Пустая страница
• Один URL
• Legacy Browsers
для бизнеса
снижение UX
риски
проблемы SEO
проблемы SMM
потеря ЦА
Расходы
![Page 35: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/35.jpg)
Single Page ApplicationМинусы
для бизнеса
снижение UX
риски
проблемы SEO
проблемы SMM
потеря ЦА
Расходы
![Page 36: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/36.jpg)
- WAT? Что делать?
![Page 37: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/37.jpg)
Взять лучшее из обоих миров
![Page 38: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/38.jpg)
Изоморфные приложения
![Page 39: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/39.jpg)
Изоморфные приложения
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
![Page 40: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/40.jpg)
Шаблоны Стили Локализация Конфигурация Routes
Права доступа Модели Схемы Валидация Сервисы
Изоморфные приложения
server.jsNode.js
worker.js
client.jsBrowser
admin.js
Бизнес-логика Компоненты API-интерфейсы Actions, Reducers Static Files
![Page 41: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/41.jpg)
Браузер
Изоморфные приложения
Front-end сервер
Back-end сервер
Database
Javaetc
![Page 42: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/42.jpg)
Браузер
Изоморфные приложения
Front-end сервер
Back-end сервер
Database
Javaetc
![Page 43: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/43.jpg)
Браузер
Изоморфные приложения
Front-end сервер
Back-end сервер
Database
Javaetc
- HTML - [critical CSS] - …
![Page 44: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/44.jpg)
Front-end клиент
Изоморфные приложения
Front-end сервер
Back-end сервер
Database
Javaetc
- HTML - [critical CSS] - JS Bundle
![Page 45: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/45.jpg)
Front-end клиент
Изоморфные приложения
Front-end сервер
Back-end сервер
Database
Javaetc
- HTML - [critical CSS] - JS Bundle
![Page 46: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/46.jpg)
Front-end клиент
Изоморфные приложения
Front-end сервер
• Единая среда исполнения
• Общая кодовая база
• Полный контроль
• Экосистема
![Page 47: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/47.jpg)
- Но как?
![Page 48: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/48.jpg)
Server-Side Rendering(SSR)
![Page 49: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/49.jpg)
Server-Side Rendering• Сборка React-приложения в HTML-код на Front-end сервере
• Моментальное отображение в браузере, ещё до загрузки JS
• Когда JS загрузится, React только добавит обработчики событий
• А это очень быстро
![Page 50: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/50.jpg)
Server-Side RenderingКод на сервере выглядит очень просто:
import ReactDOMServer from 'react-dom/server';import Application from './components/application';const body = ReactDOMServer.renderToString( <Application />);
![Page 51: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/51.jpg)
Server-Side Rendering1. Пользователь видит страницу
мгновенно
2. Отсутствие дополнительных запросов на получение данных
3. Страница может работать даже без JS
4. Полноценная URL-навигация и мета-тэги
5. Сохранение всех возможностей современного JavaScript
![Page 52: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/52.jpg)
Часть 2
![Page 53: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/53.jpg)
Производительность и масштабирование
![Page 54: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/54.jpg)
Масштабирование
![Page 55: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/55.jpg)
Масштабированиефункциональное
![Page 56: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/56.jpg)
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} />);
![Page 57: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/57.jpg)
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} />);
Но если их надо получать извне?
![Page 58: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/58.jpg)
Server-Side RenderingКак получить асинхронный State:
1. Вручную для каждой страницы
2. Facebook Relay
3. redux-catch-promise
![Page 59: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/59.jpg)
Асинхронный StateВручную для каждой страницы:
• Получить State, необходимый для страницы
• ReactDOMServer.renderToString()
![Page 60: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/60.jpg)
Асинхронный StateFacebook Relay:
1. The framework for building data-driven React applications
2. Declarative. Colocation. Mutations.
3. https://github.com/facebook/relay/issues/136
4. 1Q2016
![Page 61: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/61.jpg)
Асинхронный Stateredux-catch-promise:
• Redux - state container для React
• Redux: the best for isomorphic apps, MoscowJS 25https://youtu.be/Uyk_8WWna6s
• redux-catch-promise - это middleware для Redux
![Page 62: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/62.jpg)
Асинхронный Stateredux-catch-promise:
1. Вешаем callback для захвата Promise-экшнов
2. Делаем рендер приложения
3. Делаем запрос к БД, диспатчим Promise
4. После рендера - имеем все эти промисы, ожидаем их завершения
5. Повторный рендер, с данными
![Page 63: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/63.jpg)
Асинхронный Stateredux-catch-promise:
1. Примеры и исходный код:https://github.com/DenisIzmaylov/redux-catch-promise
2. Установка:
npm install redux-catch-promise
![Page 64: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/64.jpg)
Производительность
![Page 65: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/65.jpg)
Производительность
Тестовый стенд:
MacBook Pro 15” Retina (Early 2013)
2.4 GHz Intel Core i7
![Page 66: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/66.jpg)
ПроизводительностьРазмер страницы: 56 238 байт
![Page 67: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/67.jpg)
ПроизводительностьРазмер страницы: 56 238 байт
![Page 68: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/68.jpg)
ПроизводительностьРазмер страницы: 56 238 байт
![Page 69: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/69.jpg)
ПроизводительностьРазмер страницы: 56 238 байт
![Page 70: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/70.jpg)
ПроизводительностьРазмер страницы: 56 238 байт
![Page 71: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/71.jpg)
ПроизводительностьРазмер страницы: 56 238 байт
![Page 72: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/72.jpg)
Производительность
Для теста используем:
ab -n 100 http://localhost:3000/profile
![Page 73: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/73.jpg)
Производительность
Для теста используем:
ab -n 100 http://localhost:3000/profile
Запускаем…
![Page 74: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/74.jpg)
Производительность
Для теста используем:
ab -n 100 http://localhost:3000/profile
Запускаем…
Time per request: 61.850 ms
![Page 75: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/75.jpg)
Производительность
61.850 ms
Это много или мало?
![Page 76: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/76.jpg)
Производительность
61.850 ms
Тот же шаблон в Handlebars:
8.385 ms
86% less
![Page 77: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/77.jpg)
Производительность1. Идём в Google - ничего полезного.
2. Пробуем спросить Twitter - тишина:
![Page 78: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/78.jpg)
Производительность
Ок, а что если?
NODE_ENV=production
Запускаем…
![Page 79: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/79.jpg)
Производительность
Ок, а что если?
NODE_ENV=production
Запускаем…
Time per request: 37.943 ms(vs 61.850 ms)
39% less
![Page 80: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/80.jpg)
Производительность
Вроде лучше.
![Page 81: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/81.jpg)
Производительность
Вроде лучше.
Но всё ещё не торт.
![Page 82: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/82.jpg)
Ищем дальше
![Page 83: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/83.jpg)
GitHub issues
![Page 84: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/84.jpg)
Производительность
• “Server rendering is slower with npm react”https://github.com/facebook/react/issues/812
![Page 85: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/85.jpg)
Производительность
• “Server rendering is slower with npm react”https://github.com/facebook/react/issues/812Решение:явно подключать react/dist/react.min.js
![Page 86: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/86.jpg)
ПроизводительностьСоздаём 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'); }
![Page 87: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/87.jpg)
ПроизводительностьСоздаём 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'); }
![Page 88: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/88.jpg)
Как это изменило результат?
![Page 89: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/89.jpg)
Производительность
Server rendering is slower with npm react
react/dist/react.min.js
Запускаем…
![Page 90: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/90.jpg)
Производительность
Server rendering is slower with npm react
react/dist/react.min.js
Запускаем…
Time per request: 38.253 ms(vs 37.943 ms)0.08% more
![Page 91: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/91.jpg)
Производительность
Server rendering is slower with npm react
react/dist/react.min.js
Запускаем…
Time per request: 38.253 ms(vs 37.943 ms)0.08% moreFAILED
![Page 92: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/92.jpg)
0
17,5
35
52,5
70
38,25337,943
8,385
61,85
React SSR Handlebars productionreact.js.min
Результаты
![Page 93: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/93.jpg)
0
17,5
35
52,5
70
38,25337,943
8,385
61,85
React SSR Handlebars productionreact.js.min
Результаты39% less
![Page 94: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/94.jpg)
Часть 3
![Page 95: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/95.jpg)
Продвинутые решения
![Page 96: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/96.jpg)
Продвинутые решения
1. Precompilation + Cache 2. Rendering Separation 3. React DOM Stream 4. Facebook BigPipe 5. HAProxy
![Page 97: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/97.jpg)
Precompilation + Cache
• UI = f(state)
• f = React Component
• state = path + ...
Простое решение: redis
First render: redis + kue + workers
![Page 98: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/98.jpg)
Rendering Separation
![Page 99: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/99.jpg)
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
![Page 100: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/100.jpg)
Facebook BigPipe• Сборка страницы в процессе загрузки • Загружается параллельно • Устойчивость к ошибкам
![Page 101: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/101.jpg)
Facebook BigPipe• Сборка страницы на в процессе загрузки • Всё, что необходимо - загружается параллельно • Устойчивость к ошибкам
![Page 102: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/102.jpg)
Facebook BigPipe
![Page 103: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/103.jpg)
HAProxy
• Обратитесь к DevOps
• Несколько экземпляров
![Page 104: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/104.jpg)
Заключение
![Page 105: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/105.jpg)
Полезные материалы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/
![Page 106: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/106.jpg)
Полезные материалы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/
![Page 107: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/107.jpg)
Рекомендации• Присоединяйтеськ сообществу MoscowJShttp://moscowjs.ru/
• Улучшайте английский, не читайте советских газет
• Читайте оригиналы и технические блоги
• Активно внедряйте в свою жизнь Twitter и GitHub
![Page 108: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/108.jpg)
Послесловие
«Большинство проблем алгоритмов можно решить сменой структуры данных»,
Андрей Ситник
“Changes is our work”,Jake Archibald, Google
![Page 109: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/109.jpg)
Почему от классического Single Page Application необходимо отказаться?
![Page 110: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/110.jpg)
Спасибо за внимание
Денис Измайлов
@DenisIzmaylov
https://github.com/DenisIzmaylov
https://fb.com/denis.izmaylov
![Page 111: Изоморфные React-приложения: производительность и масштабирование](https://reader031.vdocuments.net/reader031/viewer/2022013120/5872e73d1a28abfa548b6339/html5/thumbnails/111.jpg)
Приложение 1