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

Slide 1

Slide 1 text

RiotからVueに移行した話 2016/12/02 GotandaJS #6 @mizuki_r

Slide 2

Slide 2 text

@mizuki_r (株)モバイルファクトリーフロントエンドエンジニア JS, Perl Angular, Vue, Riot “HTMLは情報設計言語です！” 2

Slide 3

Slide 3 text

本日のお話

Slide 4

Slide 4 text

本日のお題

Slide 5

Slide 5 text

本日のお題 RiotͰॻ͍͍ͯͨ΋ͷΛ Vueʹॻ͖׵͑ͨ࿩ɻ

Slide 6

Slide 6 text

本日のお題 • ViewϑϨʔϜϫʔΫ৐Γ׵͑ͷφϨοδڞ༗ • ﬂux͍͍ͧ • view vs logicͷந৅Խେࣄ

Slide 7

Slide 7 text

ビルド環境

Slide 8

Slide 8 text

ビルド環境（前） • webpack • babel?preset[]=2015 • style + css + postcss + scss • riot

Slide 9

Slide 9 text

ビルド環境（後） • webpack • babel?preset[]=2015 • style + css + postcss + scss • vue

Slide 10

Slide 10 text

ビルド環境

Slide 11

Slide 11 text

なぜVueか？

Slide 12

Slide 12 text

基本的なHTML,CSS,そしてJavaScript • ϑϨʔϜϫʔΫͷߏ଄ͱͯ͠ɺHTMLɺCSSɺ JS͕ͦΕͧΕଘࡏ͍ͯ͠Δ • expressionͷॻ͖׵͚͑ͩͰ΄΅΄΅͓ΘΔ

Slide 13

Slide 13 text

ライフサイクル ·͋ͦΜͳʹࣅͯΔΘ͚͡Όͳ͍… ͕ɺ mount → created, mount unmount → unmount update → watch etc… Riot͸࠷খͷϥΠϑαΠΫϧ͔࣋ͬͯ͠ͳ͍ͷͰɺ Vue΁ͷҠߦ͸ָɻ

Slide 14

Slide 14 text

jQueryの資産をそのまま活かせる • slick • masonry

Slide 15

Slide 15 text

やったこと

Slide 16

Slide 16 text

やったこと • SyntagmeͷStoreͷ஋ͷड͚औΓํΛมߋ • RouterΛࣗ࡞ͷ΋ͷ͔ΒVueRouter΁มߋ • *.tagΛ*.vue΁ॻ͖׵͑ॻ͖׵͑ॻ͖׵͑

Slide 17

Slide 17 text

SyntagmeのStateを受け取る AppComponentͷcreatedͰsyntagmeͱ઀ଓ

Slide 18

Slide 18 text

VueRouterへ • ·͋ͦ΋ͦ΋ݩ͕ࣗ࡞ͩͬͨΜͰ… • શ෦ॻ͖௚͠ • VueRouter·͡ศར

Slide 19

Slide 19 text

*.tag to *.vue • HTML to pug • هड़ྔతʹHTMLॻ͘ͷΊΜͲ͔ͬͨ • ActionCreatorͷͭͳ͗௚͠ • γϯλοΫεͷஔ͖׵͑

Slide 20

Slide 20 text

戦略

Slide 21

Slide 21 text

戦略 - 前日談 • ։ൃ։͔࢝ΒVueԽ͸ݟࠐΜͰ͍ͨ • ॳظ͸RiotͰΘʔͬͯॻ͍ͯɺVue͕͍͍̎ ײͬ͡Ά͍৘ใ͕ग़ἧͬͨΒҠߦ͢Δ༧ఆ ――͕ɺ్தఀ଺ظ͕ڬ·ΓଦੑͷΑ͏ʹRiotͰॻ͍͍ͯͨɻ

Slide 22

Slide 22 text

fluxアーキテクチャの採用 • ࣗ࡞ϑϨʔϜϫʔΫSyntagmeͷར༻ • Angular to Whatever༻Λ૝ఆͯ͠࡞͍͚ͬͯͨͲɺRiotͰ΋ಈ͘Μͩͥʁ • View͸ActionCreatorʹ৘ใΛ౉͠ɺσʔλ͸ProviderComponent͕Store͔Βड͚ औͬͯViewಉ࢜ͰσʔλΛ఻೻ͤ͞Δઃܭɻ͜ΕʹΑΓɺActionCreatorͷ઀ଓͱ ProviderComponent͑͞ม͑Ε͹ଞͷViewʹҠߦ͠΍͘͢ͳΔʕʕͱ͍͏Ծઆͩͬ ͨ • ઈରʹViewʹϩδοΫΛॻ͔ͳ͍ͱ͍͏ܾҙ • ActionCreatorͱReducerʹॲཧΛدͤΔ͍ͬͯ͏ϥΠϯ͚ͩ͸ࢮक

Slide 23

Slide 23 text

viewの役割 • ActionCreatorΛୟ͘ • DOM͔Β஋औͬͯ͘Δ • routerͷભҠ Ҏ্

Slide 24

Slide 24 text

小さいコンポーネントをたくさん • Riotͷར఺ͱͯ͠෼ׂ͕͠қ͍͜ͱΛ׆͔ͨ͠ • ର৅ͷDOMΛ੾ΓऔΓ • ผϑΝΠϧʹషΓ෇͚ͯλάͰғΉ͚ͩ • ໨grepͰ΋୳ͤΔൣғ • ίϯϙʔωϯτͷ಺༰ • ϑϨʔϜϫʔΫʹґଘͨ͠γϯλοΫ

Slide 25

Slide 25 text

振り返り

Slide 26

Slide 26 text

良かったこと • View : Logicͷந৅Խͷ੒ޭ • Vueͷtickͷॲཧ͕ૉఢ • ެࣜαϙʔτڧ͍ • ೔ຊޠυΩϡϝϯτڧ͍ • ମײύϑΥʔϚϯεͷվળ • Τϥʔ͕ܹݮͨ͠ • ָ͍͠

Slide 27

Slide 27 text

苦労した • JavaScript͔ΒϖʔδભҠ • action-creatorͷதͰ΍͚ͬͯͨͲɺvueͰ͸Ͳ͏͢΂͖͔൑அͰ͖ͣɺcomponentʹҾ͖౉ͨ͠ • ๞͖Δɻ௒ઈ๞͖Δɻ஌ͬͯΔ஌ݟ͚ͩͰ200ߦॻ ͖׵͑ͱ͔ຊ౰ʹ΋͏๞͖Δ • routerͷҠ২ • ͜͜ͷڍಈ͕Ұ൪มΘΓ΍͍͢ɻશ෦reducerܦ༝ͰURLͱ͔औಘ͔ͯͨ͠Βக໋తʹ͸ͳΒ ͳ͔͕ͬͨɺ؊Λྫྷ΍ͨ͠ • ΤϯτϦʔϙΠϯτ͕গͳ͔ͬͨͷͰٹΘΕͨɻଟ͔ͬͨΒઈ๬ͯͨ͠

Slide 28

Slide 28 text

今後 • syntagme to vuex͢Δͷʁ • ͨͿΜ͠ͳ͍ • ݱঢ়Viewʹґଘ͠ͳ͍ϩδοΫΛॻ͍͖ͯͨͷʹ͜͜ ͰVueʹґଘ͢Δͷ͸ͪΐͬͱ • ϩδοΫॻ͖௚͢ͷ͸VueͷWAFॻ͖׵͑Δͷͱ͸ن ໛͕ҧ͏

Slide 29

Slide 29 text

まとめ

Slide 30

Slide 30 text

まとめ • RiotΛVueʹஔ͖׵͑ΔࣄྫΛ঺հ͠·ͨ͠ • ViewʹॲཧΛॻ͔ͳ͍ͷ͕Ұ൪ • ͦͷͨΊʹ͸ﬂux! ֮ͦͯ͠ޛʂ • ઓུେࣄ • ਖ਼௚ਏ͍ͷͰɺҠ২Λߟ͑ͯΔਓ͸ͳΔ͸΍Ͱಈ͖·͠ΐ ͏

Slide 31

Slide 31 text

ご清聴ありがとうございました