Upload
viktor-turskyi
View
1.247
Download
1
Embed Size (px)
Citation preview
Боль и радость создания изоморфных
приложений на ReactJSViktor Turskyi
Kharkiv JS 2015
Изоморфизм o_O
В общих чертах его можно описать так: пусть даны две алгебраические структуры (группы, кольца, линейные пространства и т. п.). Обратимое отображение (биекция) между ними называется изоморфизмом, если оно сохраняет эту структуру.
(Wikipedia)
Изоморфное приложение?
Одностраничное приложение, которое можно запустить и на сервере
Клиент
Сервер
Общий код REST API
RESTAPI
Общий код
RESTAPI
View
Routing
Fetching I18N
Models
Зачем это надо? (о радостях)
Поисковая оптимизация
Скорость
Оттенки изоморфности
1) Изоморфный View2) Изоморфные стили3) Изоморфный роутинг4) Изоморфная работа с REST API (fetching)5) Изоморфная конфигурация 6) Изоморфный ES67) Изоморфная локализация
Радость первая - React
View - клиент
View - сервер
Боль первая - не работает import стилей в nodejs
Решение - inline styles (стили - просто javascript)
Проблемы с inlines styles
1) псевдо-атрибуты :hover, :active, :focus2) media queries3) автопрефиксинг4) объединение стилей
Сервер и клиент генерируют разную разметку
Боль вторая - клиентский автопрефиксер
Решение, которое работает (в этот раз работает)
Подключаем библиотеку компонентов
Боль третья - в “Material UI” тоже клиентский автопрефиксер
Мы переключились на Material Design Lite
react-mdl (Material Design Lite) работает!!! )
Что делать?
Ура проблему со стилями мы решили!!!
Х..р там!!!
Боль четвертая - порядок загрузки
Как правильно?
CSS загружать в начале
Javascript загружать в конце
Правильный порядок загрузки
Решение - Text Extract Plugin для Webpack
Радость вторая - React Router
Роутинг (общий код)
Роутинг (клиент)
Роутинг (сервер)
Радость третья - Redux
Один store на приложение
Работа с REST API
Порядок загрузки
Клиент:
1. Рендеринг React компонента2. Отображение спиннера3. Загрузка данных4. Обновления страницы (повторный рендеринг React компонента)
Сервер:
1. Загрузка всех необходимых данных2. Рендеринг страницы сразу с данными3. Отдача HTML на клиент
REST API - общий код (isomorphic-fetch)
Что осталось за пределами доклада
1) Изоморфная конфигурация 2) Изоморфная локализация3) Изоморфный ES6
Статистика
Универсальный код - 1778 SLOC (93%)
Коде специфический для клиента - 33 SLOC (2%)
Коде специфический для сервера - 95 SLOC (5%)
Ссылки
Redux http://rackt.org/redux/index.html
React Router https://github.com/rackt/react-router
Tutorial: Handcrafting an Isomorphic Redux Application (With Love)
https://medium.com/@bananaoomarang/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4
Исходники приложения
https://github.com/WebbyLab/itsquiz-wall/
Viktor Turskyi (koorchik)
[email protected]://twitter.com/koorchik
https://github.com/koorchik
http://webbylab.com