天下一クライアントサイドJS MV*フレームワーク武道会資料
Vue.jsఱԼҰΫϥΠΞϯταΠυJS MV*ϑϨʔϜϫʔΫಓձ2014-07-11@kazupon
View Slide
ఱԼҰΫϥΠΞϯταΠυJSMV*ϑϨʔϜϫʔΫಓձ
Vue.jsʹ͍ͭͯͬͱڵຯΛ࣋ͬͯΒ͑ΔΑ͏͜͜ʹ͖ͬͯ·ͨ͠
ΑΖ͓͘͠ئ͍ਃ্͛͠·͢
About Me• @kazupon• ॴଐɿCUUSOO SYSTEM• ׂɿϦʔυΤϯδχΞ• ࣄɿ ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺͳͲɺγεςϜશൠɺ΄΅શ෦ʂ
Vue.jsͱ
Vue.js• γϯϓϧͳܰྔMVVMϥΠϒϥϦ• Angular.js | Knockout.js | Ractive.js |Rivets.js͔ΒӨڹΛड͚͍ͯΔ• Evan You ࢯ (github:@yyx990803)ʹΑͬͯ։ൃ• ໊শ࠷ॳSeedͱͯ࢝͠·Γɺv0.6ͰVue.jsʹ໊শΛϦωʔϜ• ࠷৽Ver: v0.10.5
Vue.jsͷಛ
WebαΠτʹΑΔͱ͜Μͳײ͡• Simple• Fast• Composable• Compact• Powerful• Module FriendlyWebαΠτ:http://vuejs.org
Simple• mustacheςϯϓϨʔτ͕هࡌ͞ΕͨHTMLͱJSONγϦΞϥΠζͳΦϒδΣΫτΛݩʹɺViewModelΛΠϯελϯεԽ͢Δ͚ͩͰಈ࡞ʂ{{message}}var demo = new Vue({el: '#demo',data: {message: 'Hello Vue.js!'}});HTML JSdemo.messageΛมߋͯ͠ɺinputλά͔Βมߋͯ͠ViewModelͱDOMͷಉظ
Fast• BatcherʹΑΔඇಉظͳόονॲཧͰ͕DOMʹө͞ΕΔ (benchmark: http://vuejs.org/perf/)Average (Chrome33 | Firefox28 | Safari7)
Composable• ViewModelΛίϯϙʔωϯτͱͯ͠ొ͢Δ͜ͱͰϞδϡʔϧԽͯ͠࠶ར༻Ͱ͖Δvar Alert = Vue.extend({template: ‘{{message}}’,data: {message: ‘Occured Error !!’},methods: {show: function () {ɹɹɹ// …ɹɹ}}});!Vue.component(‘my-alert’, Alert);Define & Register component Use component
Compact• αΠζ minify & gzip Ͱ14KB• ଞͷϥΠϒϥϦʹґଘͳ͠
Powerful• HTMLʹॻ͍ͨධՁࣜComputedͳϓϩύςΟɺࣗಈతʹґଘ͍ͯ͠ΔมΛݟ͚ͭͯɺΛͯ͘͠ΕΔ{{isOwner ? 'owner' : 'guest'}}var toggle = new Vue({el: '#demo',methods: {onClick: function (e) {this.isOwner = !this.isOwner;}}});HTMLJS
Module friendly• Component, Browserify, Bowerͱ͍ͬͨϞδϡʔϧཧγεςϜΛར༻Մೳ
ͱ·͋͜Μͳײ͡Ͱ͢
͋ͱͦͷଞʹॏཁͳͷͱͯ͠
ϓϥάΠϯ• 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 pluginInstall plugin
͜͜·Ͱͷઆ໌ͰͲ͏Ͱ͔ͨ͠ʁ͍͍ͨ͘ͳΓ·͔ͨ͠ʁ
͜Ε·Ͱͷઆ໌ͰVue.js• ϑϨʔϫʔΫͰͳ͘ϥΠϒϥϦײ֮Ͱར༻Ͱ͖ͯɺ• ࡞ͬͨViewModelΛϞδϡʔϧԽͰ͖ͯɺ• ϞδϡʔϧཧγεςϜͱ࿈ܞͰ͖ͯɺ• ඞཁͳػೳϓϥάΠϯͰ֦ுͰ͖ΔඇৗʹॊೈʹখճΓ͕ޮ͍͍ͭ͘
ڵຯΛ࣋ͬͨਓhttp://vuejs.org ʹΞΫηεͯ͠GuideʹΛ௨͠खΛಈ͔͠ͳ͕Β৮ͬͯ༡ͼ·͠ΐ͏ʂ
Α͏ͦ͜………ʰVue.jsͷੈքʱ…………
Vue.jsͷࠓޙ(ϩʔυϚοϓ)https://github.com/yyx990803/vue/issues/78
Core• v0.11.x• WebComponent ରԠ• Object.observe ରԠ• ͍ͭઌɺnextϒϥϯν͕ΒΕͯɺv0.11͚ͷ։ൃʢoverhaulͯ͠΄΅full scrach͔Βʣ͕ελʔτnextϒϥϯν
Plugins• vue-touch• vue-resource• vue-router• vue-validator• vue-firebase• vue-import
͓ΘΓʹ
ຊਓͷΛฉ͖͍ͨΒ͍͠
Vue.jsͷΠϕϯτͬͯΔΑ• Vue.js͘͘ձ• ઌʹ̎ճ։࠵• ຖ݄ୈ1ɾୈ3݄༵ʹ։࠵͍ͯ͠ΔΈ͍ͨ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ