Flux層の責務について考える

Transcript

1. Flux૚ͷ੹຿ʹ͍ͭͯߟ͑Δ גࣜձࣾϠϓϦ َ໦༔و #Yappli_Tech

2. َ໦༔و ▸ 2017೥2݄ʹϠϓϦʹೖࣾ ▸ ೖࣾޙ͸ΠϯϑϥɺόοΫΤϯυɺϑϩϯτΤϯυΛ ܦݧ ▸ 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

3. Fluxͱ͸ View state Component Dispatcher Action State Server Flux Store

   #Yappli_Tech

4. StateͱStateΛมߋ͢ΔͨΊͷؔ਺ͷྲྀΕʢFluxແ͠ʣ View State ؔ਺ ίϯϙʔωϯτ #Yappli_Tech

5. StateͱStateΛมߋ͢ΔͨΊͷؔ਺ͷྲྀΕʢFlux༗Γʣ View Flux ίϯϙʔωϯτ State Action #Yappli_Tech

6. Fluxઃܭͷ೉͠͞ ▸ FluxଆͱComponentଆͷ੹೚ൣғͷܾఆ ▸ Flux૚ΛͲͷ୯ҐͰ෼ׂ͢Δͷ͕ਖ਼͍͔͠ͷ൑அ͕೉͍͠ ▸ தن໛Ҏ্ͷઃܭαϯϓϧ͕গͳ͍ɺ͜Ε͕ਖ਼͍͠ͱ͍͏ͷ͕ͳ͍ ࣗ༝౓͕ߴ͘ɺਖ਼ղ͕Θ͔Βͳ͍ͱ͍͏೉͠͞ #Yappli_Tech

7. ࣗ༝౓ͷߴ͞ͱ͍͏೉͠͞ʹཱͪ޲͔͏ͨΊʹ ϧʔϧΛܾΊ͍͕ͨϑϩϯτͷෳࡶੑʹΑΓ͸͡Ί͔ΒܾΊΕͳ͍෦෼ ΋ଟ͍ͷͰɺن໛ͷ֦େʹ଱͑ΒΕΔ֦ுੑɾ౷ҰੑΛ࣋ͬͨ ઃܭͱϧʔϧΛܾΊͯ૸Γग़͢ ▸ Store෼ׂͷϧʔϧΛܾΊΔ ▸ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ ϠϓϦͷϑϩϯτΤϯυઃܭͰ֦ுੑͱ౷ҰੑΛ୲อ͢ΔͨΊʹ΍ͬͯΑ͔ͬ ͨɺଞͷதʙେن໛ΞϓϦέʔγϣϯʹ΋൚༻ੑ͕͋Γͦ͏ͩͱײ্ͨ͡ه

   ͷ̎ͭʹ͍ͭͯ঺հ͍͖ͤͯͨͩ͞·͢ #Yappli_Tech

8. Store෼ׂͷϧʔϧΛܾΊΔ Fluxઃܭͷ೉͠͞ʹཱͪ޲͔͏ͨΊʹ Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

9. Store෼ׂͷϧʔϧΛܾΊΔ தن໛Ҏ্ͷΞϓϦέʔγϣϯͩͱ։ൃ͕ਐΉʹͭΕStore͸ංେԽ͍ͯ͠ ͘ͷͰStoreͷ෼ׂΛߦ͏ඞཁ͕ग़ͯ͘Δ͕ɺͦΕΛͲͷ୯ҐͰߦ͏͔ Store video photo account permiss ion Store෼ׂͷϧʔϧΛܾΊΔ

   #Yappli_Tech State

10. ΞϓϦέʔγϣϯશମ + ը໘୯ҐͰ෼͚Δ தʙେن໛ΞϓϦέʔγϣϯ։ൃͷ৔߹ Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

11. Storeͷmodule෼ׂ (photo) Store root Store (book) Store (Video) Store permiss

    ion isInitiali zed account contents contents contents Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

12. ΞϓϦέʔγϣϯશମ+ը໘୯ҐͰStore෼ׂ͢Δ ͜ͱʹΑΔ֦ுੑɺ౷Ұੑͷ୲อ ▸ ෼ׂ୯Ґ͕໌֬Ͱ໎͏͜ͱ͕ͳ͍ʢ֦ுੑɺ౷Ұੑʣ Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

13. ΞϓϦέʔγϣϯશମ+ը໘୯ҐͰStore෼ׂ͢ΔϝϦοτ ▸ ը໘ʹඞཁͳ৘ใͷΈऔಘͰ͖Δ ▸ ֤module Store͸ͦͷϖʔδͷӬଓԽ͢΂͖σʔλʹؔ͢ΔϩδοΫʹ ूதͰ͖Δ Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

14. FluxଆͱViewଆͷ ੹೚ൣғͷϧʔϧΛܾΊΔ Fluxઃܭͷ೉͠͞ʹཱͪ޲͔͏ͨΊʹ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

15. FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ View Flux Component Component Component Store State State ComponentͱStoreͷͲͪΒͷStateʹঢ়ଶΛ͔࣋ͭ

    FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

16. ϑϩϯτͰ؅ཧ͢Δ༷ʑͳσʔλ ▸ αʔόʔଆ͔Βऔಘ͖ͯͨ͠ӬଓԽσʔλɹˠɹStoreଆͷState ▸ ը໘ͷঢ়ଶɹˠɹComponentଆͷState ▸ αʔόʔଆ͔Βऔಘͨ͠ӬଓԽσʔλ͕ݩͰɺϢʔβʔʹΑͬͯҰ࣌తʹ ฤू͞ΕΔσʔλɹˠɹʁʁʁ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

17. ϢʔβʔʹΑͬͯߋ৽͞ΕΔσʔλͷ؅ཧΛߟ͑Δ 1. ࠨଆͷϦετ͔Βฤू͢Δίϯς ϯπΛબ୒͢Δ 2. ίϯςϯπΛฤू͢Δ 3. ίϯςϯπΛอଘ͢Δɻอଘޙ͸ ࠨଆͷϦετʹ΋൓ө͞ΕΔ ͜ͷ෦෼ͷ

    ঢ়ଶ؅ཧʹ ͍ͭͯߟ͑Δ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

18. ӬଓԽσʔλʹؔ͢Δ΋ͷ͸શͯ StoreଆͷStateͰ؅ཧ͢Δ தʙେن໛ΞϓϦέʔγϣϯ։ൃͷ৔߹ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

19. StoreଆͷStateͰ؅ཧ͢Δ StoreʢVuexʣ contents editContent changeTitle save FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ

20. ӬଓԽσʔλʹؔ͢Δ΋ͷ͸શͯStoreଆʹஔ͘ ͜ͱʹΑΔ֦ுੑɺ౷Ұੑͷ୲อ ▸ σʔλ͕ͲͷStateʹରԠ͢Δ͔ͱ͍͏͜ͱʹ͍ͭͯ໎Θͳ͘ͳΔʢ౷Ұ ੑʣ ▸ ίϯϙʔωϯτ͕ଟॏͷ৔߹Ͱ΋ίϯϙʔωϯτؒͰStateΛड͚౉͢ඞ ཁ͕ͳ͍ͷͰதʙେن໛ΞϓϦέʔγϣϯ։ൃʹڧ͍ʢ֦ுੑʣ #Yappli_Tech FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ

21. ӬଓԽσʔλʹؔ͢Δ΋ͷ͸શͯStoreଆʹஔ͘৔߹ͷϝϦοτ ▸ αʔόʔଆʹอଘ͢Δσʔλʹؔ͢ΔϩδοΫ͕ҰՕॴʹ·ͱ·ΔͷͰ ςετ͠΍͍͢ ▸ Viewଆ͸ViewଆͷॲཧʹूதͰ͖Δ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

22. (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 ࠷ऴతͳߏ੒ͱ֦ுੑɾ౷Ұੑʹ͍ͭͯ

23. ·ͱΊ ▸ ઃܭʹਖ਼ղ͸ͳ͍͕ɺ͜ͷߏ੒Ͱ͋Δఔ౓ͷΞϓϦέʔγϣϯશମͷ֦ ுੑɺ౷ҰੑΛ୲อͰ͖Δ ▸ ͋Δఔ౓ͷઃܭج൫͕Ͱ͖ͯ։ൃελʔτͨ͠ޙ΋Flux͸ࣗ༝౓͕ߴ͍ ͨΊFluxͷػೳΛษڧͨ͠Γɺ࢖͍ʹ͍͘෦෼͸ϝϯόʔͱର࿩͠ͳ͕ ΒϧʔϧΛܾΊ͍ͯ͘͜ͱ͕େࣄ ▸ ϧʔϧͷఆணԽʹ౒ΊΔ͜ͱ΋ॏཁʢϧʔϧͷυΩϡϝϯτԽɺϨϏϡʔ

    ͷ࢓૊Έʣ #Yappli_Tech

24. GitHubͷWikiʹυΩϡϝϯτԽ #Yappli_Tech

25. ϓϧϦΫ͸ϝϯόʔʹΑΔApproveඞਢɺ QAલʹϨϏϡΞʔʹΑΔػೳ࠷ऴνΣοΫ #Yappli_Tech

26. ଞʹ΋͜Μͳࣄ΍ͬͯ·͢ ▸ Flux૚શମΛλΠϓηʔϑ ▸ GRPC௨৴ʹΑΔ௨৴෦෼΋ؚΊͯλΠϓηʔϑ ▸ ActionsɺMutationsͷ໋໊نଇܾΊ ▸ ଟݴޠԽରԠ ▸

    watcherʹΑΔStore Stateͷ؂ࢹ #Yappli_Tech