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

Vue.js

 Vue.js

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

kazupon

July 11, 2014
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue.js
    ఱԼҰΫϥΠΞϯταΠυJS MV*ϑϨʔϜϫʔΫ෢ಓձ

    2014-07-11

    @kazupon

    View Slide

  2. ఱԼҰΫϥΠΞϯταΠυJS
    MV*ϑϨʔϜϫʔΫ෢ಓձ

    View Slide

  3. Vue.jsʹ͍ͭͯ
    ΋ͬͱڵຯΛ࣋ͬͯ΋Β͑ΔΑ͏
    ͜͜ʹ΍͖ͬͯ·ͨ͠

    View Slide

  4. ΑΖ͓͘͠ئ͍ਃ্͛͠·͢

    View Slide

  5. About Me
    • @kazupon

    • ॴଐɿCUUSOO SYSTEM

    • ໾ׂɿϦʔυΤϯδχΞ

    • ࢓ࣄɿ

    ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺͳͲɺ
    γεςϜશൠɺ΄΅શ෦ʂ

    View Slide

  6. Vue.jsͱ͸

    View Slide

  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

    View Slide

  8. Vue.jsͷಛ௃

    View Slide

  9. WebαΠτʹΑΔͱ͜Μͳײ͡
    • Simple

    • Fast

    • Composable

    • Compact

    • Powerful

    • Module Friendly
    WebαΠτ:http://vuejs.org

    View Slide

  10. Simple
    • mustacheςϯϓϨʔτ͕هࡌ͞ΕͨHTMLͱJSON
    γϦΞϥΠζͳΦϒδΣΫτΛݩʹɺViewModelΛ
    ΠϯελϯεԽ͢Δ͚ͩͰಈ࡞ʂ

    {{message}}


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

    View Slide

  11. Fast
    • BatcherʹΑΔඇಉظͳόονॲཧͰ஋͕DOMʹ൓
    ө͞ΕΔ (benchmark: http://vuejs.org/perf/)
    Average (Chrome33 | Firefox28 | Safari7)

    View Slide

  12. 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

    View Slide

  13. Compact
    • αΠζ͸ minify & gzip Ͱ໿14KB

    • ଞͷϥΠϒϥϦʹґଘͳ͠

    View Slide

  14. Powerful
    • HTMLʹॻ͍ͨධՁࣜ΍ComputedͳϓϩύςΟ
    ͸ɺࣗಈతʹґଘ͍ͯ͠Δม਺Λݟ͚ͭͯɺ஋Λ௥
    ੻ͯ͘͠ΕΔ


    {{isOwner ? 'owner' : 'guest'}}


    var toggle = new Vue({
    el: '#demo',
    methods: {
    onClick: function (e) {
    this.isOwner = !this.isOwner;
    }
    }
    });
    HTML
    JS

    View Slide

  15. Module friendly
    • Component, Browserify, Bowerͱ͍ͬͨϞδϡʔϧ
    ؅ཧγεςϜΛར༻Մೳ

    View Slide

  16. ͱ·͋
    ͜Μͳײ͡Ͱ͢

    View Slide

  17. ͋ͱ
    ͦͷଞʹ
    ॏཁͳ΋ͷͱͯ͠

    View Slide

  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

    View Slide

  19. ͜͜·Ͱͷઆ໌Ͱ
    Ͳ͏Ͱ͔ͨ͠ʁ
    ࢖͍͍ͨ͘ͳΓ·͔ͨ͠ʁ

    View Slide

  20. ͜Ε·Ͱͷઆ໌ͰVue.js͸
    • ϑϨʔϫʔΫͰ͸ͳ͘ϥΠϒϥϦײ֮Ͱར༻Ͱ͖ͯɺ

    • ࡞ͬͨViewModelΛϞδϡʔϧԽͰ͖ͯɺ

    • Ϟδϡʔϧ؅ཧγεςϜͱ࿈ܞͰ͖ͯɺ

    • ඞཁͳػೳ͸ϓϥάΠϯͰ֦ுͰ͖Δ
    ඇৗʹॊೈʹখճΓ͕ޮ͍͘
    ͍΍ͭ

    View Slide

  21. ڵຯΛ࣋ͬͨਓ͸
    http://vuejs.org

    ʹΞΫηεͯ͠
    Guideʹ໨Λ௨͠
    खΛಈ͔͠ͳ͕Β৮ͬͯ༡ͼ·͠ΐ͏ʂ

    View Slide

  22. Α͏ͦ͜………
    ʰVue.jsͷੈքʱ΁
    …………

    View Slide

  23. Vue.jsͷࠓޙ
    (ϩʔυϚοϓ)
    https://github.com/yyx990803/vue/issues/78

    View Slide

  24. Core
    • v0.11.x

    • WebComponent ରԠ

    • Object.observe ରԠ

    • ͍ͭઌ೔ɺnextϒϥϯν͕੾ΒΕͯɺv0.11޲͚ͷ
    ։ൃʢoverhaulͯ͠΄΅full scrach͔Βʣ͕ελʔ
    τ
    next
    ϒϥϯν

    View Slide

  25. Plugins
    • vue-touch

    • vue-resource

    • vue-router

    • vue-validator

    • vue-firebase

    • vue-import

    View Slide

  26. ͓ΘΓʹ

    View Slide

  27. ೔ຊਓͷ੠Λฉ͖͍ͨΒ͍͠

    View Slide

  28. Vue.jsͷΠϕϯτ΍ͬͯΔΑ
    • Vue.js΋͘΋͘ձ

    • ઌ೔ʹ̎ճ໨։࠵

    • ຖ݄ୈ1ɾୈ3݄༵
    ೔ʹ։࠵͍ͯ͠Δ
    Έ͍ͨ

    View Slide

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

    View Slide