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
Flux層の責務について考える
Search
yukinm7
January 23, 2019
Programming
3
2k
Flux層の責務について考える
yukinm7
January 23, 2019
Tweet
Share
More Decks by yukinm7
See All by yukinm7
モダンJavaScriptフレームワークで技術的負債を作らないために
yukinm7
0
1.3k
Other Decks in Programming
See All in Programming
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Jetpack for KMP
fornewid
1
290
CSC307 Lecture 07
javiergs
PRO
0
220
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
CSC307 Lecture 14
javiergs
PRO
0
220
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Product Management LT会_クアンド新家
shinshin
0
210
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
517
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Designing Experiences People Love
moore
136
23k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
In The Pink: A Labor of Love
frogandcode
139
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Practical Orchestrator
shlominoach
185
10k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Making Projects Easy
brettharned
111
5.7k
How to name files
jennybc
67
96k
Transcript
Fluxͷʹ͍ͭͯߟ͑Δ גࣜձࣾϠϓϦ َ༔و #Yappli_Tech
َ༔و ▸ 20172݄ʹϠϓϦʹೖࣾ ▸ ೖࣾޙΠϯϑϥɺόοΫΤϯυɺϑϩϯτΤϯυΛ ܦݧ ▸ AWSɺAnsibleɺPHPɺLaravelɺRubyɺRuby on RailsɺJavaScriptɺTypeScriptɺReact.jsɺVue.jsɺ
Golang ▸ ݱCMSͷҰ෦ΛReact.jsɺReduxͰ։ൃ ▸ ݱࡏ৽CMSͷαʔόʔαΠυʢGolangʣɺϑϩϯ τΤϯυʢVue.jsɺNuxt.jsʣͷ࣮ ▸ ৽CMSͷFluxΛઃܭ ࣗݾհ #Yappli_Tech @yukinm71
Fluxͱ View state Component Dispatcher Action State Server Flux Store
#Yappli_Tech
StateͱStateΛมߋ͢ΔͨΊͷؔͷྲྀΕʢFluxແ͠ʣ View State ؔ ίϯϙʔωϯτ #Yappli_Tech
StateͱStateΛมߋ͢ΔͨΊͷؔͷྲྀΕʢFlux༗Γʣ View Flux ίϯϙʔωϯτ State Action #Yappli_Tech
Fluxઃܭͷ͠͞ ▸ FluxଆͱComponentଆͷൣғͷܾఆ ▸ FluxΛͲͷ୯ҐͰׂ͢Δͷ͕ਖ਼͍͔͠ͷஅ͕͍͠ ▸ தنҎ্ͷઃܭαϯϓϧ͕গͳ͍ɺ͜Ε͕ਖ਼͍͠ͱ͍͏ͷ͕ͳ͍ ࣗ༝͕ߴ͘ɺਖ਼ղ͕Θ͔Βͳ͍ͱ͍͏͠͞ #Yappli_Tech
ࣗ༝ͷߴ͞ͱ͍͏͠͞ʹཱ͔ͪ͏ͨΊʹ ϧʔϧΛܾΊ͍͕ͨϑϩϯτͷෳࡶੑʹΑΓ͡Ί͔ΒܾΊΕͳ͍෦ ଟ͍ͷͰɺنͷ֦େʹ͑ΒΕΔ֦ுੑɾ౷ҰੑΛ࣋ͬͨ ઃܭͱϧʔϧΛܾΊͯΓग़͢ ▸ StoreׂͷϧʔϧΛܾΊΔ ▸ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ ϠϓϦͷϑϩϯτΤϯυઃܭͰ֦ுੑͱ౷ҰੑΛ୲อ͢ΔͨΊʹͬͯΑ͔ͬ ͨɺଞͷதʙେنΞϓϦέʔγϣϯʹ൚༻ੑ͕͋Γͦ͏ͩͱײ্ͨ͡ه
ͷ̎ͭʹ͍ͭͯհ͍͖ͤͯͨͩ͞·͢ #Yappli_Tech
StoreׂͷϧʔϧΛܾΊΔ Fluxઃܭͷ͠͞ʹཱ͔ͪ͏ͨΊʹ StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
StoreׂͷϧʔϧΛܾΊΔ தنҎ্ͷΞϓϦέʔγϣϯͩͱ։ൃ͕ਐΉʹͭΕStoreංେԽ͍ͯ͠ ͘ͷͰStoreͷׂΛߦ͏ඞཁ͕ग़ͯ͘Δ͕ɺͦΕΛͲͷ୯ҐͰߦ͏͔ Store video photo account permiss ion StoreׂͷϧʔϧΛܾΊΔ
#Yappli_Tech State
ΞϓϦέʔγϣϯશମ + ը໘୯ҐͰ͚Δ தʙେنΞϓϦέʔγϣϯ։ൃͷ߹ StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
Storeͷmoduleׂ (photo) Store root Store (book) Store (Video) Store permiss
ion isInitiali zed account contents contents contents StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
ΞϓϦέʔγϣϯશମ+ը໘୯ҐͰStoreׂ͢Δ ͜ͱʹΑΔ֦ுੑɺ౷Ұੑͷ୲อ ▸ ׂ୯Ґ͕໌֬Ͱ໎͏͜ͱ͕ͳ͍ʢ֦ுੑɺ౷Ұੑʣ StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
ΞϓϦέʔγϣϯશମ+ը໘୯ҐͰStoreׂ͢ΔϝϦοτ ▸ ը໘ʹඞཁͳใͷΈऔಘͰ͖Δ ▸ ֤module StoreͦͷϖʔδͷӬଓԽ͖͢σʔλʹؔ͢ΔϩδοΫʹ ूதͰ͖Δ StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
FluxଆͱViewଆͷ ൣғͷϧʔϧΛܾΊΔ Fluxઃܭͷ͠͞ʹཱ͔ͪ͏ͨΊʹ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ View Flux Component Component Component Store State State ComponentͱStoreͷͲͪΒͷStateʹঢ়ଶΛ͔࣋ͭ
FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
ϑϩϯτͰཧ͢Δ༷ʑͳσʔλ ▸ αʔόʔଆ͔Βऔಘ͖ͯͨ͠ӬଓԽσʔλɹˠɹStoreଆͷState ▸ ը໘ͷঢ়ଶɹˠɹComponentଆͷState ▸ αʔόʔଆ͔Βऔಘͨ͠ӬଓԽσʔλ͕ݩͰɺϢʔβʔʹΑͬͯҰ࣌తʹ ฤू͞ΕΔσʔλɹˠɹʁʁʁ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
ϢʔβʔʹΑͬͯߋ৽͞ΕΔσʔλͷཧΛߟ͑Δ 1. ࠨଆͷϦετ͔Βฤू͢Δίϯς ϯπΛબ͢Δ 2. ίϯςϯπΛฤू͢Δ 3. ίϯςϯπΛอଘ͢Δɻอଘޙ ࠨଆͷϦετʹө͞ΕΔ ͜ͷ෦ͷ
ঢ়ଶཧʹ ͍ͭͯߟ͑Δ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
ӬଓԽσʔλʹؔ͢Δͷશͯ StoreଆͷStateͰཧ͢Δ தʙେنΞϓϦέʔγϣϯ։ൃͷ߹ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
StoreଆͷStateͰཧ͢Δ StoreʢVuexʣ contents editContent changeTitle save FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ
ӬଓԽσʔλʹؔ͢ΔͷશͯStoreଆʹஔ͘ ͜ͱʹΑΔ֦ுੑɺ౷Ұੑͷ୲อ ▸ σʔλ͕ͲͷStateʹରԠ͢Δ͔ͱ͍͏͜ͱʹ͍ͭͯ໎Θͳ͘ͳΔʢ౷Ұ ੑʣ ▸ ίϯϙʔωϯτ͕ଟॏͷ߹ͰίϯϙʔωϯτؒͰStateΛड͚͢ඞ ཁ͕ͳ͍ͷͰதʙେنΞϓϦέʔγϣϯ։ൃʹڧ͍ʢ֦ுੑʣ #Yappli_Tech FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ
ӬଓԽσʔλʹؔ͢ΔͷશͯStoreଆʹஔ͘߹ͷϝϦοτ ▸ αʔόʔଆʹอଘ͢Δσʔλʹؔ͢ΔϩδοΫ͕ҰՕॴʹ·ͱ·ΔͷͰ ςετ͍͢͠ ▸ ViewଆViewଆͷॲཧʹूதͰ͖Δ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
(photo) Store root Store (book) Store contents contents photo state
(video) Store (shop) Store contents contents shop state video state book state View account permiss ion Flux ֤ϖʔδͷӬଓԽσʔλʹ ؔ͢ΔState Componentͷݟͨʹ ؔ͢ΔState ը໘શମʹ ؔ͢ΔState ࠷ऴతͳߏͱ֦ுੑɾ౷Ұੑʹ͍ͭͯ
·ͱΊ ▸ ઃܭʹਖ਼ղͳ͍͕ɺ͜ͷߏͰ͋ΔఔͷΞϓϦέʔγϣϯશମͷ֦ ுੑɺ౷ҰੑΛ୲อͰ͖Δ ▸ ͋Δఔͷઃܭج൫͕Ͱ͖ͯ։ൃελʔτͨ͠ޙFluxࣗ༝͕ߴ͍ ͨΊFluxͷػೳΛษڧͨ͠Γɺ͍ʹ͍͘෦ϝϯόʔͱର͠ͳ͕ ΒϧʔϧΛܾΊ͍ͯ͘͜ͱ͕େࣄ ▸ ϧʔϧͷఆணԽʹΊΔ͜ͱॏཁʢϧʔϧͷυΩϡϝϯτԽɺϨϏϡʔ
ͷΈʣ #Yappli_Tech
GitHubͷWikiʹυΩϡϝϯτԽ #Yappli_Tech
ϓϧϦΫϝϯόʔʹΑΔApproveඞਢɺ QAલʹϨϏϡΞʔʹΑΔػೳ࠷ऴνΣοΫ #Yappli_Tech
ଞʹ͜Μͳࣄͬͯ·͢ ▸ FluxશମΛλΠϓηʔϑ ▸ GRPC௨৴ʹΑΔ௨৴෦ؚΊͯλΠϓηʔϑ ▸ ActionsɺMutationsͷ໋໊نଇܾΊ ▸ ଟݴޠԽରԠ ▸
watcherʹΑΔStore Stateͷࢹ #Yappli_Tech