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
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2k
私はどうやって技術力を上げたのか
yusukebe
43
18k
CSC509 Lecture 05
javiergs
PRO
0
300
CSC305 Lecture 06
javiergs
PRO
0
220
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.1k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
220
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
810
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
31k
止められない医療アプリ、そっと Swift 6 へ
medley
1
170
CSC305 Lecture 03
javiergs
PRO
0
240
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Featured
See All Featured
Navigating Team Friction
lara
190
15k
It's Worth the Effort
3n
187
28k
Code Reviewing Like a Champion
maltzj
526
40k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Facilitating Awesome Meetings
lara
56
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Building Applications with DynamoDB
mza
96
6.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Faster Mobile Websites
deanohume
310
31k
Statistics for Hackers
jakevdp
799
220k
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
Спасибо!