Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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ϑϨʔϜϫʔΫΓ͑ͷφϨοδڞ༗ • flux͍͍ͧ • 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Ͱಈ͘Μͩͥʁ • ViewActionCreatorʹใΛ͠ɺσʔλ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ʹॲཧΛॻ͔ͳ͍ͷ͕Ұ൪ • ͦͷͨΊʹflux! ֮ͦͯ͠ޛʂ • ઓུେࣄ • ਖ਼ਏ͍ͷͰɺҠ২Λߟ͑ͯΔਓͳΔͰಈ͖·͠ΐ ͏
Slide 31
Slide 31 text
ご清聴ありがとうございました