Боль и радость создания изоморфных

приложений на ReactJSViktor Turskyi

Kharkiv JS 2015

Изоморфизм o_O

В общих чертах его можно описать так: пусть даны две алгебраические структуры (группы, кольца, линейные пространства и т. п.). Обратимое отображение (биекция) между ними называется изоморфизмом, если оно сохраняет эту структуру.

(Wikipedia)

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

Одностраничное приложение, которое можно запустить и на сервере

Демо

wall.itsquiz.com

Клиент

Сервер

Общий код 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)

viktor@webbylab.comhttps://twitter.com/koorchik

https://github.com/koorchik

http://webbylab.com