Модульное React/Redux приложение

Доклад о разделении крупного React/Redux приложения на модули с помощью redux-ducks и npm пакетов.

Transcript

1. Модульное React/Redux приложение
2. Артём Бей JavaScript Developer @defly_self 2
3. Модульное React/Redux приложение 3
5. Приложение из “реального мира” 5
6. В следующем спринте 6
7. Группировка по фичам 7
8. Single Page App store components webpack 8
9. разработчики биллинга команда главной фичи пилят админку Single Page App store components webpack 9
10. Хотим деплоить! 10
11. зелёные что-то сломали … черт! мы подождем :( 11
12. - тесты - continuous integration - git flow 12
13. - тесты - continuous integration - git flow - git revert - git cherry-pick 13
14. JavaScript Way package.json { "dependencies": { "@foocompany/admin": "2.3.1", "@foocompany/billing": "1.2.3", "@foocompany/core": "4.1.7", "@foocompany/i18n": "0.4.2" "@foocompany/common.components": "0.3.1", … } } 14
15. "@foocompany/dashboard": "0.2.9" 15
16. redux-ducks - модульный Redux Модуль (пакет) экспортирует: - reducer - action creators * - selectors * * если они нужны в других модулях action в виде: subapp/reducer/ACTION_TYPE 16
17. const LOADED = 'my-app/widgets/LOADED'; const CREATED = 'my-app/widgets/CREATED'; const UPDATED = 'my-app/widgets/UPDATED'; const REMOVED = 'my-app/widgets/REMOVED'; export default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; } } export function loadWidgets() { return { type: LOADED }; } export function createWidget(widget) { return { type: CREATED, widget }; } export function updateWidget(widget) { return { type: UPDATED, widget }; } export function removeWidget(widget) { return { type: REMOVED, widget }; } export function sayDuckAndWin(to = 'defly_self') { return { type: TWEETED, { to, text: ‘I <3 react', rule: 'be_first', hashtag: '#reactkyiv'} }; }
18. src/export.js package.json { "name": "@foocompany/module", "version": "0.7.2", "main": "src/export.js”, … } 18 import { getRoutes } from './routes'; import { partialReducer } from './redux/reducer'; export { getRoutes, partialReducer };
19. - модули в npm - подключение меняется очень редко - изоляция модуля в подприложение - все версии в package.json - легче написать release notes 19 В чем профит
20. Сложности - на каждый модуль свой репозиторий - npm link не совсем удобен - необходимо следить за версиями - поддержка общих зависимостей - нарушения code style 20
21. Облегчаем себе жизнь - Monorepos - Автоматизация работы с версиями - ESLint - Анализ зависимостей (webpack плагин) 21
22. Feature toggles 22
23. Почитать - The Ducks File Structure for Redux (Medium) - Feature Toggles (Martin Fowler blog) - lernajs.io 23
24. Спасибо!