Tweet
Tweet

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Λ ΠϯελϯεԽ͢Δ͚ͩͰಈ࡞ʂ

{{message}}

var demo = new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } }); HTML JS demo.messageΛมߋͯ͠΋ɺinputλά͔Βมߋ͠ ͯ΋ViewModelͱDOMͷ஋͸ಉظ

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 component

Slide 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

͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ