The State Transparented Web Application

2017/01に社内勉強会で話した何かです

Transcript

1. WebΫϥΠΞϯτΞϓϦέʔγϣϯʹ ͓͚ΔεςʔτϚγϯͱಁաతΠϯ λʔϑΣʔε @axross
2. whoami » @axross / Kohei Asai » Web Application Developer
3. ΑΖ͓͘͠ئ͍͠·͢
4. WebΫϥΠΞϯτʹ͓͚Δ…Կʁ » ཁ͸Fluxͱ͔Reactͱ͔ͷ࿩ » ࠜຊతͳߟ͑ํͱ͔ » ͜ͷ࿩ʹڵຯΛ࣋ͬͯͦ͏ͳਓ͕͍ͨ
5. WebΫϥΠΞϯτΞϓϦέʔγϣϯʁ » ࠓͷWebϑϩϯτΤϯυʹ͸2छྨ͋Δ » WebυΩϡϝϯτ » ओʹ੩తͳ৘ใΛఏڙ͢Δ » WebΫϥΠΞϯτΞϓϦέʔγϣϯ » ओʹιϑτ΢ΣΞΛఏڙ͢Δ
6. WebΫϥΠΞϯτΞϓϦέʔγϣϯͷ୆಄ » ͋͑ͯʮมભͨ͠ʯͱ͸ݴΘͳ͍ » ࠓ΋WebυΩϡϝϯτ΋ଘࡏ͢Δ (ͱ͍͏͔Web͸ຊདྷͦ͏͍͏༻్ ͷ͸ͣ) » React͕৽͍͔͠ΒjQuery΍ΊΑ͏ʂͱ͔Ͱ͸ͳ͍ͱࢥ͏ » ͱ͸͍͑ɺॻ͔ΕΔJavaScript͕ΞϓϦέʔγϣϯͱͯ͠ͷମࡋΛอ ͭͦΕʹͳͬͨ
7. FluxͱReactʹ͍͓ͭͯ͞Β͍ ඞཁͷͳ͍ਓ͸৸͍ͯͯͩ͘͞
8. Flux » Facebook͕σβΠϯύλʔϯͱͯ͠ఏএͨ֓͠೦ » ΦϒβʔόʔύλʔϯΛϕʔεͱͨ͠ঢ়ଶભҠ؅ཧͷ΍Γํ » ViewͳͲ͕Action CreatorΛίʔϧ » αϒεΫϥΠϒ͍ͯ͠ΔStore͕൓Ԡ͠ɺϝοηʔδ(Action)ͷ಺༰ Λ΋ͱʹࣗ਎ͷ؅ཧ͢Δঢ়ଶΛߋ৽͢Δ
9. Fluxʹ͓͚ΔView » View͸StoreΛαϒεΫϥΠϒ͢Δ » Store͕؅ཧ͍ͯ͠Δঢ়ଶ͕ߋ৽͞ΕΔࡍʹɺͦͷมߋ͕σΟεύο ν͞ΕΔ » ߋ৽ޙͷঢ়ଶ஋͕ྲྀΕͯ͘ΔͷͰɺView͸ͦΕΛ΋ͱʹը໘Λ࠶ඳը ͢Δ
10. Virtual DOM » ViewʹྲྀΕͯ͘Δ஋͸ɺৗʹߋ৽ޙঢ়ଶͷ׬શ஋ʹͳΔ (ࠩ෼Ͱ͸ͳ ͍) » ͕ɺDOM͸ࠩ෼ͷखଓ͖తͳߋ৽Λ޷Ή » Virtual DOMͱ͍͏ঢ়ଶ஋ͱDOMͱͷதؒදݱ͕͋Ε͹ɺதؒදݱ ಉ࢜Ͱࠩ෼Λܭࢉͯ͠ɺDOMΛͲ͏มߋ͢Ε͹͍͍͔ͱ͍͏खଓ͖ ॲཧΛܾఆͰ͖Δ » ͍ͬͯ͏ͷΛ୲͏ͷ͕React
11. Flux ♥ React » ͭ·ΓFlux͸Virtual DOMͷΑ͏ͳ࢓૊Έ͕ͳ͍ͱ੒ཱͰ͖ͳ͍ » React͕͋Δ͜ͱͰɺFlux͕࣮༻Ͱ͖Δ
12. Α͘ݴΘΕΔ͜ͱ » ʮRedux (Flux)ͬͯεςʔτϚγϯ (༗ݶΦʔτϚτϯ)ͬΆ͍ΑͶʯ » ʮRedux (Flux)͸CQRSΛڧ੍Ͱ͖ΔΑͶʯ » (ͨͿΜFluxͷ͜ͱͳΜ͚ͩͲɺRedux͕༗໊ͳͷͰ୅໊ࢺͱͯ͠༻ ͍ΒΕΔ)
13. ༗ݶΦʔτϚτϯ σδλϧճ࿏΍ϓϩάϥϜͷઃܭͰ࢖ΘΕΔ͜ͱ͕͋Γɺ͋ΔҰ࿈ͷঢ় ଶΛͱͬͨͱ͖ͲͷΑ͏ʹ࿦ཧ͕ྲྀΕΔ͔Λௐ΂Δ͜ͱ͕Ͱ͖Δɻ ༗ݶ ݸͷʮঢ়ଶʯͷ͏ͪ1ͭͷঢ়ଶΛͱΔɻ͋Δ࣌఺Ͱ͸1ͭͷঢ়ଶ͔͠ͱΒ ͣɺͦΕΛͦͷ࣌఺ͷʮݱࡏঢ়ଶʯͱݺͿɻԿΒ͔ͷΠϕϯτ΍৚݅ʹ Αͬͯ͋Δঢ়ଶ͔Βผͷঢ়ଶ΁ͱҠߦ͠ɺͦΕΛʮભҠʯͱݺͿɻ ͦΕ ͧΕͷݱࡏঢ়ଶ͔ΒભҠ͠͏Δঢ়ଶͱɺભҠͷ͖͔͚ͬͱͳΔ৚݅Λྻ ڍ͢Δ͜ͱͰఆٛ͞ΕΔɻ via. ༗ݶΦʔτϚτϯ - Wikipedia
14. FluxͷStore ͔ͨ͠ʹ // TodoStore#reduce() ... switch (action.type) { // ... // ೖྗͷఆٛ case TodoActionTypes.TOGGLE_TODO: // ঢ়ଶભҠઌͷఆٛ (state.update()ͷฦ஋͕ભҠޙͷঢ়ଶ) return state.update( action.id, todo => todo.set('complete', !todo.complete), ); // ... } // ... via. flux/TodoStore.js at master · facebook/flux · GitHub
15. CQRS » ίϚϯυΫΤϦ੹຿෼཭ (Command and Query Responsibility Segregation) » ಡΈࠐΈͱॻ͖ࠐΈΛΠϯλʔϑΣʔεͱͯ͠໌֬ʹ෼͚Δݪଇ » Command (ॻ͖ࠐΈ) ͸ඞͣ෭࡞༻Λ࣋ͪɺQuery (ಡΈࠐΈ) ͸෭ ࡞༻Λ࣋ͨͳ͍ » ͜ΕΒΛ໌֬ʹ෼͚Δ͜ͱͰɺϓϩάϥϜͷৼΔ෣͍ͷཧղͷ೉͠͞ ͕ܰݮ͞ΕΔ via. ϝΠϠʔઌੜͷҒେ͞ͱCommand-Query෼཭
16. Fluxʹ͓͚ΔCQRS » ঢ়ଶͷมߋ͸ඞͣAction CreatorΛ௨Δ → Command » ݱࡏͷঢ়ଶ͸Store͔͠஌Γಘͳ͍ → Query » ͦΕͧΕͷཁૉʹରͯ͠ٯͷૢ࡞Λ͢Δ͜ͱ͸Ͱ͖ͳ͍ » ͔ͨ͠ʹ…ʁ
17. ͭ·ΓͲ͏͍͏͜ͱͩͬͯ͹Αʁ » Flux͸༗ݶΦʔτϚτϯͷΑ͏ʹৼΔ෣ΘͤΔ͜ͱ͕Ͱ͖Δ » FluxʹΑͬͯCQRS͕ڧ੍͞ΕΔ » React͕͋Δ͜ͱʹΑͬͯFlux͕࣮༻Ͱ͖Δ » ͭ·ΓɺFluxͱ͍͏εςʔτϚγϯͱɺReactͱ͍͏ಁաతϢʔβʔ ΠϯλʔϑΣʔεʹΑͬͯΞϓϦέʔγϣϯΛߏங͢Δ » (༗ݶΦʔτϚτϯͱ͔CQRSͱ͔ʹ໌Δ͘ͳ͍ͷͰؒҧͬͯͨΒϚα ΧϦ͍ͩ͘͞)
18. ͦΜͳ͜ͱͰ͖Μͷ(ຊ౰ʹͰ͖ͯΜͷ)ʁ » ʮFluxͱReact͚ͩʯͰ͸ແཧ… » ֤ʑ͕࣌ؒ࣠Λ࣋ͭ֓೦Λѻ͏ͷ͕೉͍͠ » ඇಉظతॲཧΛͲ͏͢Δ͔ » ΞχϝʔγϣϯΛͲ͏͢Δ͔ » ࣄ࣮ɺ౰࣌ʮFluxͷͲ͜ͰAjaxΛ͢Δ͔ʯͱ͍͏໰͍Ͱք۾͕ ৭ʑΞϨͨ͠
19. ͨͱ͑͹ʁ » ϢʔβʔϑΟʔυόοΫΛ͖ͪΜͱ͢Δ਌੾ͳ෺Λ࡞Δલఏ » Ϧετͷ߲໨Λϩʔυ(ߋ৽)͍ͨ͠ → ϩʔσΟϯάதʹͦͷࢫΛදࣔ ͍ͨ͠ » ϝοηʔδ(Action)͕2ͭಉ࣌ʹσΟεύον͞ΕΔඞཁ͕͋Δ » StoreͷதͰྫ֎΍Τϥʔ͕ൃੜͨ͠ΒͲ͏͢Δ͔ʁ » ఘΊ͍ͨ » ௨ৗൃੜ͠ͳ͍Α͏ͳྫ֎͸ఘΊͯΫϥογϡ͍ͤͨ͞
20. ͡Ό͋Ͳ͏͢Δ͔ʁ » Store͔ΒActionΛݺ΂͹ɺҰԠͰ͖Δ » ͱ͸͍͑ɺ͜Ε͸FluxͰ͸ېࢭ͞Ε͍ͯΔ » σʔλϑϩʔ͕୯ํ޲Ͱ͋Δͱ͍͏ϝϦοτΛࣦͬͯ͠·͏ » Fluxͷ্ʹ΋͏ҰͭɺԿ͔Λෑ͘ඞཁ͕͋Δ
21. Fluxͷ্ʹԿ͔Λෑ͘ʁ » ʮϢʔεέʔε૚ʯ : Ϣʔβʔೖྗ͔ΒɺAction CreatorΛฒྻɾ௚ ྻʹ૊Έ߹Θͤͯίʔϧ͢Δखଓ͖తͳ૚͕ඞཁ » redux-sagaɺredux-thunkɺredux-observable » Reduxͷϛυϧ΢ΣΞͱͯ͠ɺಠࣗDSLͳͲͰϢʔεέʔε૚Λ࡞ Δ » ΫϦʔϯΞʔΩςΫνϟͳͲ » தن໛Ҏ্Ͱ͋Ε͹ɺ͖ͪΜͱͨ͠ΞʔΩςΫνϟʹ৐ͤΔͷ΋ ख
22. ྫ Viewͱ༗ݶΦʔτϚτϯͱͯ͠ͷFlux͕ଘࡏɺͦͷؒʹUsecase
23. ͦͷଞ » iOS΍AndroidͰ΋Fluxͷ׆༻ྫ͕૿͖͑ͯͨ » ͱ͸͍͑ɺiOS΍AndroidʹVirtual DOM͸ͳ͍ͷͰɺԿΒ͔ͷ ࢓૊Έ͸ඞཁ » facebook/componentkit » zserge/anvil » ͱ͍͏͔ήʔϜͱ͔ͩͱɺ͜͏͍͏΍ΓํΛ͍ͯ͠Δ΋ͷ͕ଟ͍ » WebϑϩϯτΤϯυ΋ੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏