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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
5k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.8k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.6k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
470
RailsエンジニアのためのNext.js入門
hokaccha
7
21k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.3k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
4.1k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
1.1k
Web Frontend Improvement in Cookpad
hokaccha
1
1.1k
Other Decks in Technology
See All in Technology
Phase10_組織浸透_データ活用
overflowinc
0
1.6k
Datadog で実現するセキュリティ対策 ~オブザーバビリティとセキュリティを 一緒にやると何がいいのか~
a2ush
0
130
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
kaomi_wombat
0
240
RGBに陥らないために -プロダクトの価値を届けるまで-
righttouch
PRO
0
110
AWS Systems Managerのハイブリッドアクティベーションを使用したガバメントクラウド環境の統合管理
toru_kubota
0
160
QA組織のAI戦略とAIテスト設計システムAITASの実践
sansantech
PRO
1
140
GitHub Copilot CLI で Azure Portal to Bicep
tsubakimoto_s
0
190
スピンアウト講座06_認証系(API-OAuth-MCP)入門
overflowinc
0
1.1k
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
qa
0
290
Phase04_ターミナル基礎
overflowinc
0
2.3k
From Senior to Staff : To infinity and beyond !
kuahyeow
0
110
Kiroで見直す開発プロセスとAI-DLC
k_adachi_01
0
130
Featured
See All Featured
Done Done
chrislema
186
16k
Paper Plane (Part 1)
katiecoart
PRO
0
5.8k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
64
52k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.1k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
770
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
650
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
How to build a perfect <img>
jonoalderson
1
5.3k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
ラッコキーワード サービス紹介資料
rakko
1
2.7M
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.