Изоморфные react-приложения

Изоморфные 
React-приложения
Денис Измайлов
23 ноября 2015

• 15 лет опыта разработки ПО и web
• Последние 5 лет полностью Front-end,
Node.js и архитектуре
• Более 10 проектов, в т.ч. много SPA,
highload и React
• Коммиты в Redux, webpack и koa
• Спикер HighLoad++ 2015, MoscowJS
• Автор статей на Habrahabr и
англоязычных ресурсах
, CEO

Почему от классического
Single Page Application
необходимо отказаться?

Как изоморфные приложения
отразятся на Вашей зарплате?

Что вы будете делать 
на этих выходных?

Вы уже знаете
1. React 14
2. webpack
3. ES6
4. Node.js
5. Express / koa
6. Isomorphic (Universal) apps
6

Web стал очень
большим

Искусство 
Разработка под Web 
 
Наука

Раньше было просто
• Создал страницу
• Добавил пару скриптов
• Отправил в Production

Сервер
Браузер
11

Сервер
Браузер
Делал всё
12

Сервер
Браузер
- HTML
- [CSS, JavaScript]
Делал всё
13

Single Page 
Applications 
(SPA)

Сервер
Браузер
16

Сервер
Браузер
Страница существует? 
Авторизация нужна? 
Доступ есть?
17

Сервер
Браузер
Страница существует? 
Авторизация нужна? 
Доступ есть?
- Tiny HTML, [CSS]
- JavaScript bundle
18

Плюсы
• Легко начать
• webpack
• <div id=“root” />
• React, Redux
• build
19

Плюсы
• Богатый функционал
webpack, <div id=“root” />, React, Redux
20

Плюсы
• Быстро дорабатывать
21

Плюсы
• Отзывчивый UI
22

Плюсы
• Отзывчивый UI
• Удобно кэшировать
23

- Wow. И не одного
минуса?

Минусы
• Долгая загрузка
• JavaScript bundle up to 3-5 Mb
• первое обращение
• исполнение
• память
25

Минусы
• Сложность поддержки
• side-эффекты
• memory leak
1st request, CPU, mem
26

Минусы
• Пустая страница, один URL
side-эффекты, memory leaks
27

Минусы
• Пустая страница, один URL
• Legacy Browsers
side-эффекты, memory leaks
28

- Разве это минусы?

Минусы
для бизнеса
снижение UX
30

Минусы
снижение UX
риски
31

Минусы
• Пустая страница
снижение UX
риски
проблемы SEO
32

Минусы
• Один URL
снижение UX
риски
проблемы SMM
33

Минусы
• Один URL
• Legacy Browsers
снижение UX
риски
потеря ЦА
34

Минусы
• Один URL
• Legacy Browsers
снижение UX
риски
потеря ЦА
Расходы

Минусы
снижение UX
риски
потеря ЦА
Расходы

Взять лучшее из обоих
миров

Изоморфные
приложения

Изоморфные приложения
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

Шаблоны
Стили
Локализация
Конфигурация
Routes
Права доступа
Модели
Схемы
Валидация
Сервисы
server.jsNode.js
worker.js
client.jsBrowser
admin.js
Бизнес-логика
Компоненты
API-интерфейсы
Actions, Reducers
Static Files

Браузер
Front-end
сервер
Back-end
сервер 
 
Database
Java 
etc

Браузер
Front-end
сервер
Back-end
сервер 
 
Database
Java 
etc
- HTML
- [critical CSS]
- …

Front-end
клиент
Front-end
сервер
Back-end
сервер 
 
Database
Java 
etc
- HTML
- [critical CSS]
- JS Bundle

Front-end
клиент
Front-end
сервер
• Единая среда
исполнения 
• Общая кодовая база 
• Полный контроль 
• Экосистема
47

Server-Side Rendering 
(SSR)

Server-Side Rendering
• Сборка HTML на Front-end сервере
• Моментальное отображение в
браузере, ещё до загрузки JS
• Когда JS загрузится, React только
добавит обработчики событий
• А это очень быстро
50

Код на сервере выглядит очень просто:
import ReactDOMServer from 'react-dom/server'; 
import Application from './components/application'; 
 
const body = ReactDOMServer.renderToString( 
<Application /> 
);
51

1. Пользователь видит страницу
мгновенно
2. Отсутствие дополнительных запросов
на получение данных
3. Страница может работать даже без JS
4. Полноценная URL-навигация и мета-
тэги
5. Сохранение всех возможностей
современного JavaScript 52

Производительность
и масштабирование

Масштабирование

Масштабирование 
функциональное

Всё супер, когда данные есть:
 
const initialState = { siteName: ‘Startup Makers' }; 
<Application state={initialState} /> 
);
57

Всё супер, когда данные есть:
 
const initialState = { siteName: ‘Startup Makers' }; 
<Application state={initialState} /> 
);
Но если их надо
получать извне?
58

Как получить асинхронный State: 
1. Вручную для каждой страницы
2. Facebook Relay
3. redux-catch-promise
59

Асинхронный State
Вручную для каждой страницы:
• Получить State, необходимый для
страницы 
• ReactDOMServer.renderToString()
60

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

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

1. callback для захвата Promise-экшнов
2. Делаем рендер компонент
3. Из компонент - запрос к БД, отдавая
Promise
4. Собираем все эти промисы, ожидаем их
завершения
5. Повторный рендер, с данными
63

1. Примеры и исходный код: 
https://github.com/DenisIzmaylov/
redux-catch-promise
2. Установка:
npm install redux-catch-promise
64

Тестовый стенд:
MacBook Pro 15” Retina (Early 2013)
2.4 GHz Intel Core i7
66

Размер страницы: 56 238 байт

Для теста используем:
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

61.850 ms 
Это медленно или быстро?
76

61.850 ms 
Это медленно или быстро? 
 
Тот же шаблон в Handlebars: 
8.385 ms 
 
86% less
77

61.850 ms 
Это медленно или быстро? 
 
Тот же шаблон в Handlebars: 
8.385 ms 
 
86% less
78

1. Идём в Google - ничего полезного
2. Пробуем спросить Twitter - тишина:
79

Ок, а что если?
NODE_ENV=production
80

Ок, а что если?
NODE_ENV=production
Time per request: 37.943 ms 
(vs 61.850 ms) 
39% less
81

Вроде лучше. 
 
Но всё ещё не торт.
82

• “Server rendering is slower with npm react” 
 
https://github.com/facebook/react/issues/812 
 
85

• “Server rendering is 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

Как это изменило
результат?

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

(vs 37.943 ms) 
0.08% more
91

(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
Результаты

0
17,5
35
52,5
70
38,25337,943
8,385
61,85
React SSR Handlebars production react.min.js
Результаты
NODE_ENV=production 
39% less

Продвинутые 
решения

Продвинутые решения
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. Простое решение: redis
2. “Отложенный рендеринг”: 
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
• Сборка страницы в процессе загрузки
• Загружается параллельно
• Устойчивость к ошибкам

HAProxy
• Несколько экземпляров Node.js
• Обратитесь к DevOps
106

Рекомендации
• Присоединяйтесь 
к сообществу MoscowJS 
http://moscowjs.ru/
• Улучшайте английский, не читайте
советских газет
• Читайте оригиналы и технические блоги
• Активно внедряйте в свою жизнь Twitter
и GitHub 108

Полезные материалы
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

Полезные материалы
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

Послесловие
«Большинство проблем
алгоритмов можно решить
сменой структуры данных»,
Андрей Ситник
“Changes is our work”, 
Jake Archibald, Google

izmaylov.dm@gmail.com
Присылайте свой мобильный телефон 
и краткую информацию о себе

Спасибо за
внимание
@DenisIzmaylov
https://github.com/DenisIzmaylov
http://startup-makers.ru
denis_izmaylov
izmaylov.dm@gmail.com

Изоморфные react-приложения

More Related Content

What's hot

Viewers also liked

Similar to Изоморфные react-приложения

Изоморфные react-приложения