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
One Enishi After Another
snoozer05
PRO
0
150
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
AI Agent 時代的開發者生存指南
eddie
4
2.1k
理論と実務のギャップを超える
eycjur
0
170
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
6
3k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
300
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
350
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
XP, Testing and ninja testing ZOZ5
m_seki
3
800
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
230
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
140
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Mobile First: as difficult as doing things right
swwweet
225
10k
Statistics for Hackers
jakevdp
799
220k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
GitHub's CSS Performance
jonrohan
1032
470k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Designing Experiences People Love
moore
142
24k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
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
Спасибо!