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
80
Node.js Streams
defly
0
170
Observable как атом приложения
defly
1
140
Other Decks in Programming
See All in Programming
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
420
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
250
実践 Dev Containers × Claude Code
touyu
1
100
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
370
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
Flutterと Vibe Coding で個人開発!
hyshu
1
210
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
650
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
JetBrainsのAI機能の紹介 #jjug
yusuke
0
180
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for Performance
lara
610
69k
Statistics for Hackers
jakevdp
799
220k
GitHub's CSS Performance
jonrohan
1031
460k
For a Future-Friendly Web
brad_frost
179
9.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Git: the NoSQL Database
bkeepers
PRO
431
65k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Code Reviewing Like a Champion
maltzj
524
40k
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
Спасибо!