Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js

 Vue.js

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

July 11, 2014
Tweet

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. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ