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
потеря ЦА
Расходы
39. Изоморфные приложения
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
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
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} />
);
Но если их надо
получать извне?
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/136
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. Повторный рендер, с данными
91. Производительность
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
FAILED
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
• Сборка страницы на в процессе загрузки
• Всё, что необходимо - загружается параллельно
• Устойчивость к ошибкам
105. Полезные материалы
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/
106. Полезные материалы
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/
107. Рекомендации
• Присоединяйтесь
к сообществу MoscowJS
http://moscowjs.ru/
• Улучшайте английский, не читайте
советских газет
• Читайте оригиналы и технические
блоги
• Активно внедряйте в свою жизнь
Twitter и GitHub