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.4k
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
3.7k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.1k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
340
RailsエンジニアのためのNext.js入門
hokaccha
7
18k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.7k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
870
Web Frontend Improvement in Cookpad
hokaccha
1
970
Other Decks in Technology
See All in Technology
ことばをそろえる / Bridging the Terminology Gap
amaotone
5
1k
[RSJ24] Task Success Prediction for Open-Vocabulary Manipulation Based on Multi-Level Aligned Representations
keio_smilab
PRO
0
220
Namespace, Now and Then
tagomoris
0
170
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
390
歴史と背景から改めて振り返るVPC
shotashiratori
2
220
Azure SQL Database Hyperscale HA レプリカの監視
sansantech
PRO
0
190
APIのドキュメント化何使ってますか?
miu_crescent
2
160
プロデザ! BY リクルートvol.22_様々なプロダクト経験の中で活きたPdMのスキル
recruitengineers
PRO
3
170
New Relicで実践する外形監視
aeonpeople
1
120
LLM を現場で評価する
asei
4
680
X-Correlation Injections (or How to break server-side contexts)
fransrosen
0
360
GraphQLとスキーマファーストで切り開く ライドシェアの未来
ku0522a
0
490
Featured
See All Featured
Scaling GitHub
holman
458
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
34
1.9k
Documentation Writing (for coders)
carmenintech
65
4.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Code Review Best Practice
trishagee
62
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Facilitating Awesome Meetings
lara
49
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
What's in a price? How to price your products and services
michaelherold
241
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
122
18k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
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.