Документ обсуждает создание изоморфных приложений на React.js, рассматривая как его преимущества, так и проблемы, связанные с отображением стилей и загрузкой данных. Особое внимание уделяется различных аспектам изоморфности, таким как роутинг, работа с REST API и использование библиотеки Material Design Lite. Также представлены ссылки на дополнительные ресурсы и статистика кода, подчеркивающая эффективность универсального кода.

1. Боль и радость
создания изоморфных
приложений на ReactJS
Viktor Turskyi
Kharkiv JS 2015

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

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

4. Демо
wall.itsquiz.com

5. Клиент
Сервер
Общий код REST
API

6. REST
API
Общий код

7. REST
API
View
Routing
Fetching I18N
Models

8. Зачем это надо? (о радостях)
Поисковая оптимизация
Скорость

9. Оттенки изоморфности
1) Изоморфный View
2) Изоморфные стили
3) Изоморфный роутинг
4) Изоморфная работа с REST API (fetching)
5) Изоморфная конфигурация
6) Изоморфный ES6
7) Изоморфная локализация

10. Радость первая - React

11. View - клиент

12. View - сервер

13. Боль первая - не работает import стилей в nodejs

14. Решение - inline styles (стили - просто javascript)

15. Проблемы с inlines styles
1) псевдо-атрибуты :hover, :active, :focus
2) media queries
3) автопрефиксинг
4) объединение стилей

17. Сервер и клиент генерируют разную разметку

18. Боль вторая - клиентский автопрефиксер

19. Решение, которое работает (в этот раз работает)

20. Подключаем библиотеку компонентов

21. Боль третья - в “Material UI” тоже клиентский
автопрефиксер

22. Мы переключились на Material Design Lite
react-mdl (Material Design Lite) работает!!! )
Что делать?

23. Ура проблему со стилями мы решили!!!

24. Х..р там!!!

25. Боль четвертая - порядок загрузки

26. Как правильно?
CSS загружать в начале
Javascript загружать в конце

27. Правильный порядок загрузки

28. Решение - Text Extract Plugin для Webpack

29. Радость вторая - React Router

30. Роутинг (общий код)

31. Роутинг (клиент)

32. Роутинг (сервер)

33. Радость третья - Redux

34. Один store на приложение

35. Работа с REST API

36. Порядок загрузки
Клиент:
1. Рендеринг React компонента
2. Отображение спиннера
3. Загрузка данных
4. Обновления страницы (повторный рендеринг React компонента)
Сервер:
1. Загрузка всех необходимых данных
2. Рендеринг страницы сразу с данными
3. Отдача HTML на клиент

37. REST API - общий код (isomorphic-fetch)

38. Что осталось за пределами доклада
1) Изоморфная конфигурация
2) Изоморфная локализация
3) Изоморфный ES6

39. Статистика
Универсальный код - 1778 SLOC (93%)
Коде специфический для клиента - 33 SLOC (2%)
Коде специфический для сервера - 95 SLOC (5%)

40. Ссылки
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

41. Исходники приложения
https://github.com/WebbyLab/itsquiz-wall/

42. Viktor Turskyi (koorchik)
viktor@webbylab.com
https://twitter.com/koorchik
https://github.com/koorchik
http://webbylab.com