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