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
330
Модульное 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
82
Node.js Streams
defly
0
170
Observable как атом приложения
defly
1
140
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
160
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
440
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
380
株式会社 Sun terras カンパニーデック
sunterras
0
250
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
240
Serena MCPのすすめ
wadakatu
4
930
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
950
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
チームの境界をブチ抜いていけ
tokai235
0
110
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
8
5.5k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
200
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Visualization
eitanlees
148
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Building Adaptive Systems
keathley
43
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Become a Pro
speakerdeck
PRO
29
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Writing Fast Ruby
sferik
629
62k
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
Спасибо!