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
1.9k
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
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
220
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
790
Java 22 Overview
kishida
1
150
Designing for tomorrow's programming workflows
honnibal
PRO
2
100
object-oriented-conference-2024
fuwasegu
8
2.6k
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Semantic search with Django and pgvector
pauloxnet
0
220
Site Reliability Engineering for GMO
pyama86
3
400
OpenAPI を守るのは難しい
ohmori_yusuke
2
750
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
240
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
170
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.1k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Six Lessons from altMBA
skipperchong
19
3k
How to Ace a Technical Interview
jacobian
272
22k
Designing for Performance
lara
601
67k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
Building Your Own Lightsaber
phodgson
97
5.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Being A Developer After 40
akosma
56
580k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
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