Download to read offline
Uploaded byDenis Izmaylov
redux: the best for isomorphic apps
Документ обсуждает архитектуру Redux, выделяя ее преимущества для изоморфных приложений и решение проблем, связанных с реализацией Flux. Он привлекает внимание к снижению объема boilerplate-кода, упрощению работы с асинхронной загрузкой данных и упрощению восстановления состояния приложения. Документ также содержит полезные ссылки и отзывы разработчиков о Redux.
More Related Content
redux: the best for isomorphic apps
- 1. redux: the best forisomorphic apps Денис Измайлов Startup Makers 24 сентября 2015
- 2.
- 3.
- 4.
- 5.
- 6. Проблема масштабирования MVC 30апреля 2014, Сан-Франциско F8 Facebook Developer Conference 6
- 7. 30 апреля 2014,Сан-Франциско F8 Facebook Developer Conference 7
- 8.
- 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
- 15.
- 16.
- 17. Основные цели Воспроизводимость состояния stateBstate A state Bstate A 17
- 18. Основные цели Воспроизводимость состояния errorstatestate 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
- 21.
- 22. Организация изоморфных приложений API Browser- specificJS Server-specific JS Ваше приложение 22
- 23. Организация изоморфных приложений Browser- specificJS Server-specific JS Бизнес-логика Routes Модели Схемы Валидация i18n Конфигурация Компоненты Стилизация и т.д 23
- 24. Server-Side Rendering (SSR) Генерация отображения настороне сервера 24
- 25.
- 26.
- 27.
- 28.
- 29. Взаимодействие API сервер Front-end сервер Браузер - HTML - критичныйCSS - JavaScript 29
- 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
- 36.
- 37.
- 38.
- 39.
- 40. Проблемы реализаций Flux •Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний 40
- 41. Проблемы реализаций Flux •Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний • Сложная для понимания роль диспетчера 41
- 42. Проблемы диспетчера Flux Store2 Диспетчер Component 3 Action 1 42
- 43. Проблемы диспетчера Flux Store2 Диспетчер Action 1 Component 3 Action 1 43
- 44. Проблемы диспетчера Flux Store2 Диспетчер Action 1 Component 3 Action 1 Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. 44
- 45.
- 46. Проблемы реализаций Flux •Обилие boilerplate-кода • Заточенность кода под API • Логика сторов связана с их состоянием • Сложно сделать record/replay состояний • Сложная для понимания роль диспетчера • Проблема повторного использования 46
- 47. Проблемы Flux при Server-SideRendering • Сложно реализовать асинхронную загрузку данных • Передача состояния сторов от сервера клиенту • 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
- 49.
- 50. Сторы — неклассы А функции описывающие мутации: 50
- 51.
- 52.
- 53. Где же теперьstate? 53
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. Middleware • Точка расширения,куда передаётся action, прежде, чем попасть в reducers • Функция, принимающая action, следующий middleware и Store: 60
- 61. Middleware Этот middleware позволяетдиспатчить в качестве action обычный Promise 61
- 62.
- 63.
- 64. react-redux: connect() • Подключаетк компоненту Store • Возвращает новый компонент, который содержит переданный компонент, как вложенный • Ему в свойствах будут переданы подключенный Store и функция dispatch 64
- 65.
- 66. react-redux: <Provider /> •Главный компонент • Делает доступным вызов connect() для всех дочерних элементов 66
- 67.
- 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.
- 70.
- 71.
- 72. Redux DevTools • LiveEdit • Time-Travel 72
- 73. Redux Slider Monitor •Time-Travel через слайдер 73
- 74.
- 75. И ещё моревсего https://github.com/xgrommx/awesome-redux 75
- 76.
- 77. Импортозамещение Из России слюбовью: Даня Абрамов Санкт-Петербург 77
- 78. Отзывы • “Love whatyou’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 - thebest for isomorphic apps? Да 80
- 81. Полезные ссылки • http://elm-lang.org/ •http://staltz.com/unidirectional-user-interface- architectures.html • http://martinfowler.com/bliki/CQRS.html 81
- 82.
- 83. Вопросы? Twitter: @DenisIzmaylov GitHub: https://github.com/DenisIzmaylov Facebook:http://fb.com/denis.izmaylov 83