Vue.js

天下一クライアントサイドJS MV*フレームワーク武道会資料

Transcript

1. Vue.js ఱԼҰΫϥΠΞϯταΠυJS MV*ϑϨʔϜϫʔΫ෢ಓձ 2014-07-11 @kazupon
2. ఱԼҰΫϥΠΞϯταΠυJS MV*ϑϨʔϜϫʔΫ෢ಓձ
3. Vue.jsʹ͍ͭͯ ΋ͬͱڵຯΛ࣋ͬͯ΋Β͑ΔΑ͏ ͜͜ʹ΍͖ͬͯ·ͨ͠
4. ΑΖ͓͘͠ئ͍ਃ্͛͠·͢
5. About Me • @kazupon • ॴଐɿCUUSOO SYSTEM • ໾ׂɿϦʔυΤϯδχΞ • ࢓ࣄɿ
 ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺͳͲɺ γεςϜશൠɺ΄΅શ෦ʂ
6. Vue.jsͱ͸
7. Vue.js • ௒γϯϓϧͳܰྔMVVMϥΠϒϥϦ • Angular.js | Knockout.js | Ractive.js | Rivets.js͔ΒӨڹΛड͚͍ͯΔ • Evan You ࢯ (github:@yyx990803)ʹ Αͬͯ։ൃ • ໊শ͸࠷ॳ͸Seedͱͯ࢝͠·Γɺ v0.6ͰVue.jsʹ໊শΛϦωʔϜ • ࠷৽Ver: v0.10.5
8. Vue.jsͷಛ௃
9. WebαΠτʹΑΔͱ͜Μͳײ͡ • Simple • Fast • Composable • Compact • Powerful • Module Friendly WebαΠτ:http://vuejs.org
10. Simple • mustacheςϯϓϨʔτ͕هࡌ͞ΕͨHTMLͱJSON γϦΞϥΠζͳΦϒδΣΫτΛݩʹɺViewModelΛ ΠϯελϯεԽ͢Δ͚ͩͰಈ࡞ʂ <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> var demo = new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } }); HTML JS demo.messageΛมߋͯ͠΋ɺinputλά͔Βมߋ͠ ͯ΋ViewModelͱDOMͷ஋͸ಉظ
11. Fast • BatcherʹΑΔඇಉظͳόονॲཧͰ஋͕DOMʹ൓ ө͞ΕΔ (benchmark: http://vuejs.org/perf/) Average (Chrome33 | Firefox28 | Safari7)
12. Composable • ViewModelΛίϯϙʔωϯτͱͯ͠ొ࿥͢Δ͜ͱͰ ϞδϡʔϧԽͯ͠࠶ར༻Ͱ͖Δ var Alert = Vue.extend({ template: ‘<p>{{message}}</p>’, data: { message: ‘Occured Error !!’ }, methods: { show: function () { ɹɹɹ// … ɹɹ} } }); ! Vue.component(‘my-alert’, Alert); <div v-component=“my-alert”></div> Define & Register component Use component
13. Compact • αΠζ͸ minify & gzip Ͱ໿14KB • ଞͷϥΠϒϥϦʹґଘͳ͠
14. Powerful • HTMLʹॻ͍ͨධՁࣜ΍ComputedͳϓϩύςΟ ͸ɺࣗಈతʹґଘ͍ͯ͠Δม਺Λݟ͚ͭͯɺ஋Λ௥ ੻ͯ͘͠ΕΔ <div id="demo"> <button v-on="click: onClick"> {{isOwner ? 'owner' : 'guest'}} </button> </div> var toggle = new Vue({ el: '#demo', methods: { onClick: function (e) { this.isOwner = !this.isOwner; } } }); HTML JS
15. Module friendly • Component, Browserify, Bowerͱ͍ͬͨϞδϡʔϧ ؅ཧγεςϜΛར༻Մೳ
16. ͱ·͋ ͜Μͳײ͡Ͱ͢
17. ͋ͱ ͦͷଞʹ ॏཁͳ΋ͷͱͯ͠
18. ϓϥάΠϯ • Vue.jsΛ֦ு͍ͨ͠ਓͷͨΊʹϓϥάΠϯ͢ΔAPI Λαϙʔτ͍ͯ͠Δ module.exprots = function (Vue, option) { // something plugin logic }; var Vue = require(‘vue’); var myplugin = require(‘myplugin’); ! Vue.use(myplugin, { foo: 1 }); Implement plugin Install plugin
19. ͜͜·Ͱͷઆ໌Ͱ Ͳ͏Ͱ͔ͨ͠ʁ ࢖͍͍ͨ͘ͳΓ·͔ͨ͠ʁ
20. ͜Ε·Ͱͷઆ໌ͰVue.js͸ • ϑϨʔϫʔΫͰ͸ͳ͘ϥΠϒϥϦײ֮Ͱར༻Ͱ͖ͯɺ • ࡞ͬͨViewModelΛϞδϡʔϧԽͰ͖ͯɺ • Ϟδϡʔϧ؅ཧγεςϜͱ࿈ܞͰ͖ͯɺ • ඞཁͳػೳ͸ϓϥάΠϯͰ֦ுͰ͖Δ ඇৗʹॊೈʹখճΓ͕ޮ͍͘ ͍΍ͭ
21. ڵຯΛ࣋ͬͨਓ͸ http://vuejs.org
 ʹΞΫηεͯ͠ Guideʹ໨Λ௨͠ खΛಈ͔͠ͳ͕Β৮ͬͯ༡ͼ·͠ΐ͏ʂ
22. Α͏ͦ͜……… ʰVue.jsͷੈքʱ΁ …………
23. Vue.jsͷࠓޙ (ϩʔυϚοϓ) https://github.com/yyx990803/vue/issues/78
24. Core • v0.11.x • WebComponent ରԠ • Object.observe ରԠ • ͍ͭઌ೔ɺnextϒϥϯν͕੾ΒΕͯɺv0.11޲͚ͷ ։ൃʢoverhaulͯ͠΄΅full scrach͔Βʣ͕ελʔ τ next ϒϥϯν
25. Plugins • vue-touch • vue-resource • vue-router • vue-validator • vue-firebase • vue-import
26. ͓ΘΓʹ
27. ೔ຊਓͷ੠Λฉ͖͍ͨΒ͍͠
28. Vue.jsͷΠϕϯτ΍ͬͯΔΑ • Vue.js΋͘΋͘ձ • ઌ೔ʹ̎ճ໨։࠵ • ຖ݄ୈ1ɾୈ3݄༵ ೔ʹ։࠵͍ͯ͠Δ Έ͍ͨ
29. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ