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
2.4k
Flux層の責務について考える
yukinm7
January 23, 2019
Tweet
Share
More Decks by yukinm7
See All by yukinm7
モダンJavaScriptフレームワークで技術的負債を作らないために
yukinm7
0
1.5k
Other Decks in Programming
See All in Programming
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
230
CSC305 Lecture 08
javiergs
PRO
0
270
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
3
670
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
Webサーバーサイド言語としてのRustについて
kouyuume
0
3k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
SODA - FACT BOOK(JP)
sodainc
1
8.6k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
210
Google Opalで使える37のライブラリ
mickey_kubo
3
130
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Gamification - CAS2011
davidbonilla
81
5.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Six Lessons from altMBA
skipperchong
29
4k
Automating Front-end Workflow
addyosmani
1371
200k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Designing Experiences People Love
moore
142
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Unsuck your backbone
ammeep
671
58k
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