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
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
320
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
360
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.1k
How to achieve interoperable digital identity across Asian countries
fujie
0
120
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
280
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
320
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
24
17k
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
280
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
420
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
Azure Well-Architected Framework入門
tomokusaba
1
310
Findy Team+のSOC2取得までの道のり
rvirus0817
0
360
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Building Adaptive Systems
keathley
43
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
239
17k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Navigating Team Friction
lara
189
15k
How to Ace a Technical Interview
jacobian
280
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GitHub's CSS Performance
jonrohan
1032
460k
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.