Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Модульное React/Redux приложение
Search
Artem Bey
June 30, 2017
Programming
1
320
Модульное React/Redux приложение
Доклад о разделении крупного React/Redux приложения на модули с помощью redux-ducks и npm пакетов.
Artem Bey
June 30, 2017
Tweet
Share
More Decks by Artem Bey
See All by Artem Bey
Hypermedia API (MinskJS version)
defly
0
67
Node.js Streams
defly
0
160
Observable как атом приложения
defly
1
120
Other Decks in Programming
See All in Programming
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
400
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
Patched fetch did not work
quramy
4
410
Kotlin 2.0 and Beyond
antonarhipov
2
150
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
300
What is Parser
yui_knk
9
4.2k
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
オートマトン学習しろ / Do automata learning
makenowjust
3
130
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
Featured
See All Featured
Teambox: Starting and Learning
jrom
131
8.7k
Gamification - CAS2011
davidbonilla
79
5k
Agile that works and the tools we love
rasmusluckow
327
20k
Documentation Writing (for coders)
carmenintech
65
4.3k
Designing the Hi-DPI Web
ddemaree
278
34k
Facilitating Awesome Meetings
lara
49
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
The Language of Interfaces
destraynor
153
23k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
What the flash - Photography Introduction
edds
67
11k
Transcript
Модульное React/Redux приложение
Артём Бей JavaScript Developer @defly_self 2
Модульное React/Redux приложение 3
4
Приложение из “реального мира” 5
В следующем спринте 6
Группировка по фичам 7
Single Page App store components webpack 8
разработчики биллинга команда главной фичи пилят админку Single Page App
store components webpack 9
Хотим деплоить! 10
зелёные что-то сломали … черт! мы подождем :( 11
- тесты - continuous integration - git flow 12
- тесты - continuous integration - git flow - git
revert - git cherry-pick 13
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
"@foocompany/dashboard": "0.2.9" 15
redux-ducks - модульный Redux Модуль (пакет) экспортирует: - reducer -
action creators * - selectors * * если они нужны в других модулях action в виде: subapp/reducer/ACTION_TYPE 16
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'} }; }
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 };
- модули в npm - подключение меняется очень редко -
изоляция модуля в подприложение - все версии в package.json - легче написать release notes 19 В чем профит
Сложности - на каждый модуль свой репозиторий - npm link
не совсем удобен - необходимо следить за версиями - поддержка общих зависимостей - нарушения code style 20
Облегчаем себе жизнь - Monorepos - Автоматизация работы с версиями
- ESLint - Анализ зависимостей (webpack плагин) 21
Feature toggles 22
Почитать - The Ducks File Structure for Redux (Medium) -
Feature Toggles (Martin Fowler blog) - lernajs.io 23
Спасибо!