redux: the best for isomorphic apps
- 1. redux: the best for isomorphic apps Денис Измайлов Startup Makers 24 сентября 2015
- 6. Проблема масштабирования MVC 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference 6
- 7. 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference 7
- 9. CQRS Command-Query Responsibility Segregation модель для чтения и записи 9
- 10. CQRS Command-Query Responsibility Segregation модель для чтения и записи модель для чтения данных 10
- 11. CQRS Command-Query Responsibility Segregation модель для чтения данных модель для чтения и записи модель для записи данных 11
- 12. 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference модель для чтения 12
- 13. 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference модель для чтения модель для записи 13
- 14. Основные цели 1.Один источник правды 2.Избежать состояние гонки 3.Избежать каскадных обновлений 4.Воспроизводимость состояния 14
- 16. Основные цели Воспроизводимость состояния state Bstate A 16
- 17. Основные цели Воспроизводимость состояния state Bstate A state Bstate A 17
- 18. Основные цели Воспроизводимость состояния error statestate A error statestate A Record / Replay 18
- 19. 2014 - клонировали, как могли • 12 мая: Fluxxor • 1 июля: Reflux.js • 24 июля: официальный релиз от Facebook • 24 октября: Flummox • 2 ноября: Marty.js • 4 ноября: Yahoo выпускает Fluxible • 11 декабря: AirBnb выпускает alt 19
- 20. Мир на пороге новых проблем: Flux • Какие плюсы и минусы? • Что выбрать из этого? • Как с этим жить? 20
- 22. Организация изоморфных приложений API Browser- specific JS Server-specific JS Ваше приложение 22
- 23. Организация изоморфных приложений Browser- specific JS Server-specific JS Бизнес-логика Routes Модели Схемы Валидация i18n Конфигурация Компоненты Стилизация и т.д 23
- 24. Server-Side Rendering (SSR) Генерация отображения на стороне сервера 24
- 29. Взаимодействие API сервер Front-end сервер Браузер - HTML - критичный CSS - JavaScript 29
- 30. Взаимодействие API сервер Front-end сервер Front-end клиент - HTML - критичный CSS - JavaScript 30
- 31. Выгоды • Время загрузки страницы сокращается в 5-6 раз • Снижаются затраты на поддержку • Быстрый старт новых проектов • Положительный эффект для SEO • Снижает риск проблем memory leak • Write once, run anywhere (WORA) 31
- 32. Промежуточный итог • Flux — архитектура для создания клиентских приложений • Flux — больше шаблон, чем формальный фреймворк • Flux создан сделать приложение более масштабируемым, предсказуемым, а отладку - простой • Изоморфные приложения повышают UX и снижают затраты 32
- 33. Так ли хорош Flux? 33
- 34. Проблемы реализаций Flux • Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием 34
- 35. Пара примеров с alt.js 35
- 40. Проблемы реализаций Flux • Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний 40
- 41. Проблемы реализаций Flux • Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний • Сложная для понимания роль диспетчера 41
- 42. Проблемы диспетчера Flux Store 2 Диспетчер Component 3 Action 1 42
- 43. Проблемы диспетчера Flux Store 2 Диспетчер Action 1 Component 3 Action 1 43
- 44. Проблемы диспетчера Flux Store 2 Диспетчер Action 1 Component 3 Action 1 Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. 44
- 46. Проблемы реализаций Flux • Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний • Сложная для понимания роль диспетчера • Проблема повторного использования 46
- 47. Проблемы Flux при Server-Side Rendering • Сложно реализовать асинхронную загрузку данных • Передача состояния сторов от сервера клиенту • Flux изначально создавался для клиентской части: “Flux is the application architecture that Facebook uses for building client-side web applications.” ~ https://facebook.github.io/flux/ - OK 47
- 48. Все эти проблемы решает redux 48
- 50. Сторы — не классы А функции описывающие мутации: 50
- 53. Где же теперь state? 53
- 57. Это всё? 57
- 58. Нет 58
- 59. Middleware 59
- 60. Middleware • Точка расширения, куда передаётся action, прежде, чем попасть в reducers • Функция, принимающая action, следующий middleware и Store: 60
- 61. Middleware Этот middleware позволяет диспатчить в качестве action обычный Promise 61
- 62. View Provider 62
- 63. react-redux • connect() • <Provider /> 63
- 64. react-redux: connect() • Подключает к компоненту Store • Возвращает новый компонент, который содержит переданный компонент, как вложенный • Ему в свойствах будут переданы подключенный Store и функция dispatch 64
- 66. react-redux: <Provider /> • Главный компонент • Делает доступным вызов connect() для всех дочерних элементов 66
- 68. Подводим итоги • Нет boilerplate кода, за счёт того, что мутации описываются функциями • Как следствие - нет зависимости от API, его по сути нет • При таком подходе легко сделать record/replay • Нет диспетчера - нет проблемы его понимания • Легкое повторное использование reducers, пример: https://github.com/rackt/redux/blob/master/examples/real-world/reducers/ paginate.js • За счёт middleware легко организовать асинхронную загрузку данных для компонент: https://github.com/DenisIzmaylov/redux-catch-promise 68
- 69. 69
- 70. Как начать? Подробнейшая документация (ссылка в конце) 70
- 71. Экосистема
- 72. Redux DevTools • Live Edit • Time-Travel 72
- 73. Redux Slider Monitor • Time-Travel через слайдер 73
- 75. И ещё море всего https://github.com/xgrommx/awesome-redux 75
- 77. Импортозамещение Из России с любовью: Даня Абрамов Санкт-Петербург 77
- 78. Отзывы • “Love what you’re doing with Redux” Jing Chen, creator of Flux • “I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.” Bill Fisher, creator of Flux Facebook в восторге 78
- 79. redux - очередной Flux? Нет 79
- 80. redux - the best for isomorphic apps? Да 80
- 81. Полезные ссылки • http://elm-lang.org/ • http://staltz.com/unidirectional-user-interface- architectures.html • http://martinfowler.com/bliki/CQRS.html 81
- 83. Вопросы? Twitter: @DenisIzmaylov GitHub: https://github.com/DenisIzmaylov Facebook: http://fb.com/denis.izmaylov 83