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
BdashにおけるFlux設計
Search
Kazuhito Hokamura
May 10, 2017
Technology
4
5.6k
BdashにおけるFlux設計
Kazuhito Hokamura
May 10, 2017
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
4.7k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.6k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
440
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
1k
Web Frontend Improvement in Cookpad
hokaccha
1
1.1k
Other Decks in Technology
See All in Technology
「Linux」という言葉が指すもの
sat
PRO
4
140
AWSで始める実践Dagster入門
kitagawaz
1
750
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
220
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
550
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
380
メルカリIBISの紹介
0gm
0
710
slog.Handlerのよくある実装ミス
sakiengineer
4
480
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
roppongirb_20250911
igaiga
1
260
S3アクセス制御の設計ポイント
tommy0124
3
210
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Six Lessons from altMBA
skipperchong
28
4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Docker and Python
trallard
46
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing for Performance
lara
610
69k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Documentation Writing (for coders)
carmenintech
74
5k
Transcript
Bdashʹ͓͚ΔFluxઃܭ
@hokaccha
None
None
Bdash • ElectronͷσεΫτοϓΞϓϦέʔγϣϯ • BIπʔϧͬΆ͍ͷ • ViewશͯReact
BdashͷFluxઃܭʹ͍ͭͯ
• FluxϑϨʔϜϫʔΫະ༻ • ࠷దͳઃܭΛࣗͰߟ͑ͳ͕Β࣮͍ͯͬͨ͠
Domain Logicͷݺͼग़͠
Domain Logic • ඳըʹؔ͢Δ͜ͱҎ֎ͷશͯͷॲཧ • DatabaseͱͷΓऔΓͱ͔ • APIݺͼग़͠ͱ͔ • ઃఆͷཧͱ͔
Ͳ͜ʹ͋Δ͖͔ • Store? • Actino Creator? • Middleware?
None
import { dispatch } from './QueryStore'; import Database from '../lib/Database';
const QueryAction = {}; QueryAction.addNewQuery = params => { Database.Query.create(params).then(query => { dispatch('addNewQuery', { query }); }); }; Action Creator 㲗 Domain Logic
• Domain LogicΛFluxͷϑϩʔ͔Β͢Δ • Action Creator͔Βݺͼग़͚ͩ͢ • StoreStateͷߋ৽͚ͩʹྗ͢Δ
• StoreͱDomain Logicςετ͘͢͠ͳΔ • Action Creator͕ςετͮ͠Β͍ • શ͕ͯPure functionͱ͍͏ͷݬͳͷͰఘΊΔ
Storeͷׂ
ͭ·ΓStateΛͲ͏ׂ͢Δ͔
facebook/flux • Ϧιʔεʁ͝ͱʹStoreΛׂ͢Δ • DispatcherʹΑΔަ௨ཧɺwaitForΛͬͨ ґଘͷղܾ͕ඞཁ
Redux • StoreΛׂ͠ͳ͍ʢSingle Stateʣ • StateΛߋ৽͢ΔॲཧʢreducerʣΛׂ͢Δ • waitForDispatcher͕ෆཁ • State͕ڊେʹͳΔ
Bdash • Page୯ҐͰ͚ͯΈͨ • Page͝ͱʹಠཱͨ͠StoreΛ࣋ͭ • Page == Container Component
None
• Storeಉ࢜ͷґଘ͕ͳ͍ • waitForDispatcherෆཁ • StateΛΘ͔Γཻ͍͢ͰׂͰ͖Δ Good
• PageΛ·͍ͨͩσʔλͷڞ༗͕໘ • ෳͷPageͰಉ͡σʔλΛ࣋ͭ͜ͱ͋Δͷ Ͱແବ͕͋Δ Bad
PageؒͰͷσʔλڞ༗ • PageؒͰڞ༗͢ΔσʔλDomain LogicʹετΞ͢Δ • PageΓସ͑࣌ʹຖճDomain Logic͔ΒऔΓ͢ • αʔόʔαΠυͷ։ൃͱ͍ۙײ֮
൚༻తͳઃܭͰͳ͍ ⚠
ΞϓϦέʔγϣϯʹ దͨ͠ઃܭΛɻ
ল
• ଞʹಠࣗͷઃܭɾ࣮͕͍͔ͭ͋͘Δ • ίϯτϦϏϡʔγϣϯͷෑډ͕ߴ͘ͳΔ • Ϩʔϧʹͬͨ΄͏͕ઃܭࢥΛڞ༗͢Δ ίετ͕ݮΔ
Α͔ͬͨ
• ݸਓతʹ͖Ε͍ʹઃܭͰ͖ͯຬ • ઃܭΛߟ͑ΔͷษڧʹͳΔ
Thanks.