RiotからVueに移行した話 #gotandajs

GotandaJS #6 の資料です

Transcript

1. RiotからVueに移行した話 2016/12/02 GotandaJS #6 @mizuki_r
2. @mizuki_r (株)モバイルファクトリー フロントエンドエンジニア JS, Perl Angular, Vue, Riot “HTMLは情報設計言語です！” 2
3. 本日のお話
4. 本日のお題
5. 本日のお題 RiotͰॻ͍͍ͯͨ΋ͷΛ Vueʹॻ͖׵͑ͨ࿩ɻ
6. 本日のお題 • ViewϑϨʔϜϫʔΫ৐Γ׵͑ͷφϨοδڞ༗ • flux͍͍ͧ • view vs logicͷந৅Խେࣄ
7. ビルド環境
8. ビルド環境（前） • webpack • babel?preset[]=2015 • style + css + postcss + scss • riot
9. ビルド環境（後） • webpack • babel?preset[]=2015 • style + css + postcss + scss • vue
10. ビルド環境
11. なぜVueか？
12. 基本的なHTML,CSS,そしてJavaScript • ϑϨʔϜϫʔΫͷߏ଄ͱͯ͠ɺHTMLɺCSSɺ JS͕ͦΕͧΕଘࡏ͍ͯ͠Δ • expressionͷॻ͖׵͚͑ͩͰ΄΅΄΅͓ΘΔ
13. ライフサイクル ·͋ͦΜͳʹࣅͯΔΘ͚͡Όͳ͍… ͕ɺ mount → created, mount unmount → unmount update → watch etc… Riot͸࠷খͷϥΠϑαΠΫϧ͔࣋ͬͯ͠ͳ͍ͷͰɺ Vue΁ͷҠߦ͸ָɻ
14. jQueryの資産をそのまま活かせる • slick • masonry
15. やったこと
16. やったこと • SyntagmeͷStoreͷ஋ͷड͚औΓํΛมߋ • RouterΛࣗ࡞ͷ΋ͷ͔ΒVueRouter΁มߋ • *.tagΛ*.vue΁ॻ͖׵͑ॻ͖׵͑ॻ͖׵͑
17. SyntagmeのStateを受け取る AppComponentͷcreatedͰsyntagmeͱ઀ଓ
18. VueRouterへ • ·͋ͦ΋ͦ΋ݩ͕ࣗ࡞ͩͬͨΜͰ… • શ෦ॻ͖௚͠ • VueRouter·͡ศར
19. *.tag to *.vue • HTML to pug • هड़ྔతʹHTMLॻ͘ͷΊΜͲ͔ͬͨ • ActionCreatorͷͭͳ͗௚͠ • γϯλοΫεͷஔ͖׵͑
20. 戦略
21. 戦略 - 前日談 • ։ൃ։͔࢝ΒVueԽ͸ݟࠐΜͰ͍ͨ • ॳظ͸RiotͰΘʔͬͯॻ͍ͯɺVue͕͍͍̎ ײͬ͡Ά͍৘ใ͕ग़ἧͬͨΒҠߦ͢Δ༧ఆ ――͕ɺ్தఀ଺ظ͕ڬ·ΓଦੑͷΑ͏ʹRiotͰॻ͍͍ͯͨɻ
22. fluxアーキテクチャの採用 • ࣗ࡞ϑϨʔϜϫʔΫSyntagmeͷར༻ • Angular to Whatever༻Λ૝ఆͯ͠࡞͍͚ͬͯͨͲɺRiotͰ΋ಈ͘Μͩͥʁ • View͸ActionCreatorʹ৘ใΛ౉͠ɺσʔλ͸ProviderComponent͕Store͔Βड͚ औͬͯViewಉ࢜ͰσʔλΛ఻೻ͤ͞Δઃܭɻ͜ΕʹΑΓɺActionCreatorͷ઀ଓͱ ProviderComponent͑͞ม͑Ε͹ଞͷViewʹҠߦ͠΍͘͢ͳΔʕʕͱ͍͏Ծઆͩͬ ͨ • ઈରʹViewʹϩδοΫΛॻ͔ͳ͍ͱ͍͏ܾҙ • ActionCreatorͱReducerʹॲཧΛدͤΔ͍ͬͯ͏ϥΠϯ͚ͩ͸ࢮक
23. viewの役割 • ActionCreatorΛୟ͘ • DOM͔Β஋औͬͯ͘Δ • routerͷભҠ Ҏ্
24. 小さいコンポーネントをたくさん • Riotͷར఺ͱͯ͠෼ׂ͕͠қ͍͜ͱΛ׆͔ͨ͠ • ର৅ͷDOMΛ੾ΓऔΓ • ผϑΝΠϧʹషΓ෇͚ͯλάͰғΉ͚ͩ • ໨grepͰ΋୳ͤΔൣғ • ίϯϙʔωϯτͷ಺༰ • ϑϨʔϜϫʔΫʹґଘͨ͠γϯλοΫ
25. 振り返り
26. 良かったこと • View : Logicͷந৅Խͷ੒ޭ • Vueͷtickͷॲཧ͕ૉఢ • ެࣜαϙʔτڧ͍ • ೔ຊޠυΩϡϝϯτڧ͍ • ମײύϑΥʔϚϯεͷվળ • Τϥʔ͕ܹݮͨ͠ • ָ͍͠
27. 苦労した • JavaScript͔ΒϖʔδભҠ • action-creatorͷதͰ΍͚ͬͯͨͲɺvueͰ͸Ͳ͏͢΂͖͔൑அͰ͖ͣɺcomponentʹҾ͖౉ͨ͠ • ๞͖Δɻ௒ઈ๞͖Δɻ஌ͬͯΔ஌ݟ͚ͩͰ200ߦॻ ͖׵͑ͱ͔ຊ౰ʹ΋͏๞͖Δ • routerͷҠ২ • ͜͜ͷڍಈ͕Ұ൪มΘΓ΍͍͢ɻશ෦reducerܦ༝ͰURLͱ͔औಘ͔ͯͨ͠Βக໋తʹ͸ͳΒ ͳ͔͕ͬͨɺ؊Λྫྷ΍ͨ͠ • ΤϯτϦʔϙΠϯτ͕গͳ͔ͬͨͷͰٹΘΕͨɻଟ͔ͬͨΒઈ๬ͯͨ͠
28. 今後 • syntagme to vuex͢Δͷʁ • ͨͿΜ͠ͳ͍ • ݱঢ়Viewʹґଘ͠ͳ͍ϩδοΫΛॻ͍͖ͯͨͷʹ͜͜ ͰVueʹґଘ͢Δͷ͸ͪΐͬͱ • ϩδοΫॻ͖௚͢ͷ͸VueͷWAFॻ͖׵͑Δͷͱ͸ن ໛͕ҧ͏
29. まとめ
30. まとめ • RiotΛVueʹஔ͖׵͑ΔࣄྫΛ঺հ͠·ͨ͠ • ViewʹॲཧΛॻ͔ͳ͍ͷ͕Ұ൪ • ͦͷͨΊʹ͸flux! ֮ͦͯ͠ޛʂ • ઓུେࣄ • ਖ਼௚ਏ͍ͷͰɺҠ২Λߟ͑ͯΔਓ͸ͳΔ͸΍Ͱಈ͖·͠ΐ ͏
31. ご清聴ありがとうございました