Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
RiotからVueに移行した話 #gotandajs
Search
mizuki_r
December 02, 2016
Programming
0
2.6k
RiotからVueに移行した話 #gotandajs
GotandaJS #6 の資料です
mizuki_r
December 02, 2016
Tweet
Share
More Decks by mizuki_r
See All by mizuki_r
FrontendUp_新規事業で_Remixを採用した理由と対策.pdf
rymizuki
0
110
税理士ドットコムの 技術的挑戦 #tapioca_lt
rymizuki
0
260
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
670
モダンとレガシー #gotandaem
rymizuki
0
540
Vuexに型を付けるパターンを調べた #gotandajs
rymizuki
0
120
DockerでNodeの開発は厳しいのか? #gotandajs
rymizuki
3
370
マネージャー!きみは何者だ! #gotandaem
rymizuki
0
1.7k
物語を楽しむための物語論
rymizuki
0
500
失敗と向き合う
rymizuki
0
1.4k
Other Decks in Programming
See All in Programming
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.7k
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.2k
プログラミング教育のコスパの話
superkinoko
0
120
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
700
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
WordPress Playground for Developers
iambherulal
0
120
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
230
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.1k
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.7k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Become a Pro
speakerdeck
PRO
27
5.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
jlugia
229
18k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Adopting Sorbet at Scale
ufuk
75
9.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
Docker and Python
trallard
44
3.3k
Embracing the Ebb and Flow
colly
85
4.6k
Visualization
eitanlees
146
16k
Transcript
RiotからVueに移行した話 2016/12/02 GotandaJS #6 @mizuki_r
@mizuki_r (株)モバイルファクトリー フロントエンドエンジニア JS, Perl Angular, Vue, Riot “HTMLは情報設計言語です!” 2
本日のお話
本日のお題
本日のお題 RiotͰॻ͍͍ͯͨͷΛ Vueʹॻ͖͑ͨɻ
本日のお題 • ViewϑϨʔϜϫʔΫΓ͑ͷφϨοδڞ༗ • flux͍͍ͧ • view vs logicͷநԽେࣄ
ビルド環境
ビルド環境(前) • webpack • babel?preset[]=2015 • style + css +
postcss + scss • riot
ビルド環境(後) • webpack • babel?preset[]=2015 • style + css +
postcss + scss • vue
ビルド環境
なぜVueか?
基本的なHTML,CSS,そしてJavaScript • ϑϨʔϜϫʔΫͷߏͱͯ͠ɺHTMLɺCSSɺ JS͕ͦΕͧΕଘࡏ͍ͯ͠Δ • expressionͷॻ͖͚͑ͩͰ΄΅΄΅͓ΘΔ
ライフサイクル ·͋ͦΜͳʹࣅͯΔΘ͚͡Όͳ͍… ͕ɺ mount → created, mount unmount → unmount
update → watch etc… Riot࠷খͷϥΠϑαΠΫϧ͔࣋ͬͯ͠ͳ͍ͷͰɺ VueͷҠߦָɻ
jQueryの資産をそのまま活かせる • slick • masonry
やったこと
やったこと • SyntagmeͷStoreͷͷड͚औΓํΛมߋ • RouterΛࣗ࡞ͷͷ͔ΒVueRouterมߋ • *.tagΛ*.vueॻ͖͑ॻ͖͑ॻ͖͑
SyntagmeのStateを受け取る AppComponentͷcreatedͰsyntagmeͱଓ
VueRouterへ • ·͋ͦͦݩ͕ࣗ࡞ͩͬͨΜͰ… • શ෦ॻ͖͠ • VueRouter·͡ศར
*.tag to *.vue • HTML to pug • هड़ྔతʹHTMLॻ͘ͷΊΜͲ͔ͬͨ •
ActionCreatorͷͭͳ͗͠ • γϯλοΫεͷஔ͖͑
戦略
戦略 - 前日談 • ։ൃ։͔࢝ΒVueԽݟࠐΜͰ͍ͨ • ॳظRiotͰΘʔͬͯॻ͍ͯɺVue͕͍͍̎ ײͬ͡Ά͍ใ͕ग़ἧͬͨΒҠߦ͢Δ༧ఆ ――͕ɺ్தఀظ͕ڬ·ΓଦੑͷΑ͏ʹRiotͰॻ͍͍ͯͨɻ
fluxアーキテクチャの採用 • ࣗ࡞ϑϨʔϜϫʔΫSyntagmeͷར༻ • Angular to Whatever༻Λఆͯ͠࡞͍͚ͬͯͨͲɺRiotͰಈ͘Μͩͥʁ • ViewActionCreatorʹใΛ͠ɺσʔλProviderComponent͕Store͔Βड͚ औͬͯViewಉ࢜ͰσʔλΛͤ͞Δઃܭɻ͜ΕʹΑΓɺActionCreatorͷଓͱ
ProviderComponent͑͞ม͑ΕଞͷViewʹҠߦ͘͢͠ͳΔʕʕͱ͍͏Ծઆͩͬ ͨ • ઈରʹViewʹϩδοΫΛॻ͔ͳ͍ͱ͍͏ܾҙ • ActionCreatorͱReducerʹॲཧΛدͤΔ͍ͬͯ͏ϥΠϯ͚ͩࢮक
viewの役割 • ActionCreatorΛୟ͘ • DOM͔Βऔͬͯ͘Δ • routerͷભҠ Ҏ্
小さいコンポーネントをたくさん • Riotͷརͱׂ͕ͯ͠͠қ͍͜ͱΛ׆͔ͨ͠ • ରͷDOMΛΓऔΓ • ผϑΝΠϧʹషΓ͚ͯλάͰғΉ͚ͩ • grepͰ୳ͤΔൣғ •
ίϯϙʔωϯτͷ༰ • ϑϨʔϜϫʔΫʹґଘͨ͠γϯλοΫ
振り返り
良かったこと • View : LogicͷநԽͷޭ • Vueͷtickͷॲཧ͕ૉఢ • ެࣜαϙʔτڧ͍ •
ຊޠυΩϡϝϯτڧ͍ • ମײύϑΥʔϚϯεͷվળ • Τϥʔ͕ܹݮͨ͠ • ָ͍͠
苦労した • JavaScript͔ΒϖʔδભҠ • action-creatorͷதͰ͚ͬͯͨͲɺvueͰͲ͏͖͔͢அͰ͖ͣɺcomponentʹҾ͖ͨ͠ • ͖Δɻઈ͖ΔɻͬͯΔݟ͚ͩͰ200ߦॻ ͖͑ͱ͔ຊʹ͏͖Δ • routerͷҠ২
• ͜͜ͷڍಈ͕Ұ൪มΘΓ͍͢ɻશ෦reducerܦ༝ͰURLͱ͔औಘ͔ͯͨ͠Βக໋తʹͳΒ ͳ͔͕ͬͨɺ؊Λྫྷͨ͠ • ΤϯτϦʔϙΠϯτ͕গͳ͔ͬͨͷͰٹΘΕͨɻଟ͔ͬͨΒઈͯͨ͠
今後 • syntagme to vuex͢Δͷʁ • ͨͿΜ͠ͳ͍ • ݱঢ়Viewʹґଘ͠ͳ͍ϩδοΫΛॻ͍͖ͯͨͷʹ͜͜ ͰVueʹґଘ͢Δͷͪΐͬͱ
• ϩδοΫॻ͖͢ͷVueͷWAFॻ͖͑Δͷͱن ͕ҧ͏
まとめ
まとめ • RiotΛVueʹஔ͖͑ΔࣄྫΛհ͠·ͨ͠ • ViewʹॲཧΛॻ͔ͳ͍ͷ͕Ұ൪ • ͦͷͨΊʹflux! ֮ͦͯ͠ޛʂ • ઓུେࣄ
• ਖ਼ਏ͍ͷͰɺҠ২Λߟ͑ͯΔਓͳΔͰಈ͖·͠ΐ ͏
ご清聴ありがとうございました