Vue.js

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

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