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.5k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
330
RailsエンジニアのためのNext.js入門
hokaccha
7
18k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6.9k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.6k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
860
Web Frontend Improvement in Cookpad
hokaccha
1
950
Other Decks in Technology
See All in Technology
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
170
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Android研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
100
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
Speed Design
sergeychernyshev
9
270
Scaling GitHub
holman
458
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
It's Worth the Effort
3n
181
27k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Typedesign – Prime Four
hannesfritz
37
2.2k
Rails Girls Zürich Keynote
gr2m
93
13k
Navigating Team Friction
lara
181
13k
Teambox: Starting and Learning
jrom
130
8.6k
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.