Kharkiv JS 2015: Боль и радость создания изоморфных приложений на ReactJS (RU)
2 likes1,649 views
Документ обсуждает создание изоморфных приложений на React.js, рассматривая как его преимущества, так и проблемы, связанные с отображением стилей и загрузкой данных. Особое внимание уделяется различных аспектам изоморфности, таким как роутинг, работа с REST API и использование библиотеки Material Design Lite. Также представлены ссылки на дополнительные ресурсы и статистика кода, подчеркивающая эффективность универсального кода.
Kharkiv JS 2015: Боль и радость создания изоморфных приложений на ReactJS (RU)
- 1. Боль и радость создания изоморфных приложений на ReactJS Viktor Turskyi Kharkiv JS 2015
- 2. Изоморфизм o_O В общих чертах его можно описать так: пусть даны две алгебраические структуры (группы, кольца, линейные пространства и т. п.). Обратимое отображение (биекция) между ними называется изоморфизмом, если оно сохраняет эту структуру. (Wikipedia)
- 3. Изоморфное приложение? Одностраничное приложение, которое можно запустить и на сервере
- 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. Решение, которое работает (в этот раз работает)
- 21. Боль третья - в “Material UI” тоже клиентский автопрефиксер
- 22. Мы переключились на Material Design Lite react-mdl (Material Design Lite) работает!!! ) Что делать?
- 23. Ура проблему со стилями мы решили!!!
- 24. Х..р там!!!
- 25. Боль четвертая - порядок загрузки
- 26. Как правильно? CSS загружать в начале Javascript загружать в конце
- 28. Решение - Text Extract Plugin для Webpack
- 29. Радость вторая - React Router
- 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