RiotでSPAなう #meguroes

Meguro.es #5 の発表資料です

Transcript

1. RiotでSPAなう！ 2016/08/04 Meguro.es #5 @mizuki_r
2. @mizuki_r (株)モバイルファクトリー フロントエンドエンジニア JS, Perl Angular, Vue, Riot “HTMLは情報設計言語です！” 2
3. 本日のお題 3
4. RiotJSで SinglePageAppを 作る
5. ーー過程で起きた事例の紹介
6. 絶賛制作進行中です！ あしからず
7. 構成 7
8. 構成 • Webpack • Riot • syntagme • jQuery + jQuery-Plugin 8
9. というわけで、 事例の紹介 をします。 9
10. 事例1. ルーティング 10
11. 事例1. ルーティング • URLରͯ͠೚ҙͷॲཧΛ࣮ߦ͢Δ • riot͸ϓϦΠϯͰRouterΛఏڙ͍ͯ͠Δ • http://riotjs.com/ja/api/route/
12. 本当にそれで十分？
13. 足りなかったので 魔改造した
14. 魔改造1. コンポーネントのマウント
15. 魔改造1. コンポーネントのマウント • riot.router͸URLͷมߋ࣌ʹίʔϧόοΫΛ࣮ ߦ • ReactRouterΈ͍ͨʹComponentΛϧʔςΟϯ ά͢ΔΘ͚Ͱ͸ͳ͍
16. 魔改造1. コンポーネントのマウント <example> <router-view name="router" route={ state.route } routes={ routes } params={ state } /> <script> this.routes = [ { path: '/', component: 'home', param_keys: [ 'pickup_list', 'popular_list' ] }, { path: '/user/:user_id', component: 'user', param_keys: [ 'user' ] } { path: '/user..', component: 'user-list', param_keys: ['user_list'] }, ] </script> </example> ͜Μͳײ͡Ͱ࢖͑ΔΑ͏ʹϥοϓ
17. 魔改造2. パラメータマッチングの拡張
18. 魔改造2. パラメータマッチングの拡張 • riot.route͸ΫΤϦύϥϝʔλ͔͠ѻ͑ͳ͍ • /path/:id/toΛύʔεͯ͠{id: 1234}ΛऔΕΔΑ͏ ʹվ଄
19. 魔改造2. パラメータマッチングの拡張 function secondParser (path, filter) { let keys = [] let format = filter .replace(/\*/g, '([^/?#]+?)') .replace(/\.\./, '.*') .replace(/:([^/?#]+)/g, (pattern, key) => { keys.push(key); return '([^/?#]+?)'}) let re = new RegExp('^' + format + '$') let args = path.match(re) if (args) { args = args.slice(1) let params = _.reduce(keys, (prev, key) => { prev[key] = args.shift(); return prev }, {}) args.unshift(params) return args } } riot.route.parser(null, secondParser) ͜͏͍͏ͷΛఆٛͯ͋͛͠Δͱ…
20. 魔改造2. パラメータマッチングの拡張 औΕΔΑ͏ʹͳΔʂ riot.route('/path/:id/to', function (args) { console.log(args.id) })
21. 魔改造3. popStateで更新する
22. 魔改造3. popStateで更新する • riot.route͸popStateͷΠϕϯτΛ؂ࢹ͍ͯ͠ ͳ͍ • ͳͷͰࣗલͰ؂ࢹ͢Δ
23. 魔改造3. popStateで更新する window.addEventListener('popstate', () => { riot.route.exec() }) ※riot.route.exec͸2.3͔ΒdeprecatedͰ͢
24. 魔改造4. マウント時にルーティング
25. 魔改造4. マウント時にルーティング • URLͷมߋΛݕ஌ͯ͠ίʔϧόοΫΛ࣮ߦ • Ϛ΢ϯτ࣌ʹ͸URL͸͢Ͱʹܾఆ͍ͯ͠Δͷ Ͱ࣮ߦͯ͘͠Εͳ͍(´ʀТʀʆ) • ͳͷͰɺखಈͰୟ͘
26. 魔改造4. マウント時にルーティング this.on('mount', function () { riot.route.exec() }) ※riot.route.exec͸2.3͔ΒdeprecatedͰ͢
27. Q. 公開しないんですか？
28. Q. 公開しないんですか？ • ͱΓ͋͑ͣಈ͘΋ͷΛ࡞ͬͨϨϕϧͳΜͩ • ͜Ε͔Βௐ੔͢Δ • Ͱ͖Δஈ֊ʹͳͬͨΒ͓ͦΒ͘ ެ։͢Δʂ
29. 事例2. カルーセル 29
30. 事例2. カルーセル • ԣʹεϥΠυ͢ΔόφʔͷΞϨ • θϩ͔Β࡞Δͷ͸ΊΜͲ͍͘͞
31. jQueryPluginで いいのがありますよ！！
32. http://kenwheeler.github.io/slick/
33. 事例2. カルーセル <caroucel> <content /> <script> $(this.root).slick() </script> </caroucel> ཁૉΛjQueryʹ͘Θͤͯυʔϯ
34. 事例2. カルーセル • jQuery·͡ศར • ͨͩɺWebpackͰjQuery + pluginΛ͍͍ײ͡ ʹѻ͏ज़Λݟ͚ͭΒΕͯͳ͍
35. 事例2. アニメーション 35
36. 事例2. アニメーション • ཁૉΛදࣔɾඇදࣔͨ͠ͱ͖ʹΞχϝʔγϣ ϯΛ͔͚͍ͨ • ng-enter, ng-leaveΈ͍ͨͳ΍ͭ • enterͨ͠ͱ͖͸؆୯ʹͰ͖͚ͨͲɺleave࣌ ʹΞχϝʔγϣϯΛ଴ͨͣʹফ͑ͯ͠·͏
37. 書いた
38. function changeClass (item, action, name) { item.classList[action]('riot-'+name) } function init () { this.elements = [] const requestAnimation = function () { for (let i = 0; i<this.elements.length; i++) { let item = this.elements[i] let action = item.getAttribute('animate-show') ? 'show' : 'hide' if (action == 'show') changeClass(item, 'remove', 'hide') changeClass(item, 'add', action == 'show' ? 'hide-leave' : 'hide-add') setTimeout(() => { changeClass(item, 'add', action == 'show' ? 'hide-leave-active' : 'hide-add-active') }, 0) let onAnimationEnd = function () { changeClass(item, 'remove', action == 'show' ? 'hide-leave-active' : 'hide-add-active') changeClass(item, 'remove', action == 'show' ? 'hide-leave' : 'hide-add') if (action == 'hide') changeClass(item, 'add', 'hide') item.removeEventListener('animationend', onAnimationEnd, false) item.removeEventListener('transitionend', onAnimationEnd, false) } item.addEventListener('animationend', onAnimationEnd, false) item.addEventListener('transitionend', onAnimationEnd, false) } }.bind(this) this.on('mount', function () { this.elements = this.root.querySelectorAll('[animate]') }) this.on('update', function () { for (var i = 0; i<this.elements.length; i++) { let item = this.elements[i] let value = item.getAttribute('animate-show') this.previous || (this.previous = {}) if (this.previous[i] === undefined) this.previous[i] = value if (this.previous[i] != value) { this.previous[i] = value window.requestAnimationFrame(requestAnimation) } } }) } export default { init, }
39. <example> <div animate animate-show={ show_fg }> animate target </div> <style type="sass"> example { &[animate] { transition: 500ms linear; &.riot-hide { display: none; } &.riot-hide-leave { opacity: 0; &.riot-hide-leave-active { opacity: 1; } } &.riot-hide-add { opacity: 1; &.riot-hide-active { opacity: 0; } } } } </style> <script> this.mixin(require('riot-animate-show')) </script> </example>
40. まとめ 40
41. まとめ • riot.routeຐվ଄ͨ͠ • ௒ௐ੔த • jQueryPluginศར • ؆୯ʹ࢖͑Δ • animateࣗ࡞ͨ͠ • ΍ͬͺΓRiot͸͕͜͜ऑ͍ 41
42. さいごに ϞόΠϧϑΝΫτϦʔͰ͸ɺ JavaScript͕େ޷͖ͳΤϯδχΞΛืू͓ͯ͠Γ·͢ʂ 42