Vue.js techtalk: Introduction

Transcript

1. Vue.js Core concepts and introduction
2. This is not the talk for the meetup
4. Progressive?
5. Progressive enhancement [Progressive enhancement] is not a technique, it's not a technology. It's a way of viewing how you build, it's an engineering approach. — Jeremy Keith Progressive enhancement focus on content, progressive framework focus on developer experience. In "JavaScript framework" terms it means that it supports even basic scenarios.
7. Features • Live preview of embed • Realtime code preview generator • Rules that some options can't be enabled at the same time • Preview your real projects if you are logged in • Configurable with a single .JSON file
8. "Features" • No babel • No webpack • No data stores, routers… • Only JS minificator • Controller is 99 LOC • App about the same size as jQuery (~30kb)
9. Integration gateway • uses official Vue-webpack template • solid build config • hot reloading • ES6 • linting, testing… • uses official vue-router
10. GitHub Sync UI
11. GitHub Sync UI • Started with the same webpack template I knew from earlier • and the same router setup I knew from earlier • after a while, I realised I could use a data store, because app was bigger than the previous ones • so I went for an official data store Vuex (~flux)
12. Why is "Progressive" so important • Vue have the best onboarding I ever saw • You write production-grade code since 1st minute • You can write demo (or a bug repro!) only with JSBin • Progressive nature slowly pushes you into the right direction • If you show someone the simplest Vue example, you can imagine how it will look with ES6. In a single file component. With a data store. And with a router…
13. <script src="vue.js"></script> <script> new Vue({ // ... }) </script> ^If you can read this, you can write Vue
14. Back to the beginning vuejs.org/v2/guide
15. <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) Hello Vue! > app.message > 'Hello Vue!'
16. <div id="app"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" /> </ol> </div> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { text: 'Vegetables' }, { text: 'Cheese' }, { text: 'Whatever else humans are supposed to eat' } ] } })
17. 1. Vegetables 2. Cheese 3. Whatever else humans are supposed to eat
18. <div id="app"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" /> </ol> </div> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { text: 'Vegetables' }, { text: 'Cheese' }, { text: 'Whatever else humans are supposed to eat' } ] } })
19. <!-- single file todo.vue --> <template> <ol> <todo-item v-for="item in groceryList" :todo="item" /> </ol> </template> <script> import todoItem from './todoItem' export default { name: 'groceryListApp', components: [ todoItem ], data: { groceryList: [ { text: 'Vegetables' }, { text: 'Cheese' }, { text: 'Whatever else humans are supposed to eat' } ] } } </script>
20. "Push into the right direction"
21. That component is good code • easy to test • easy to predict (next session will show you more) • we went from basic jQuery-like code to a component code without raising complexity and overhead
22. Next time we'll talk about • hands-on examples • methods - so we can do stuff with the view • vuex store (because it's awesome and will make your day)
23. <template> <img class="avatar" :style="style" :src="sizedSrc" alt="Avatar" aria-hidden="true" /> </template> <script> export default { name: 'avatar', props: { src: { default: 'https://avatars.githubusercontent.com/u/0?v=3', type: String, }, size: { default: 20, type: Number, }, }, computed: { style() { return `width: ${this.size}px; height: ${this.size}px;`; }, sizedSrc() { return `${this.src}&s=${this.size * 2}`; }, }, }; </script> <style lang="stylus" scoped> .avatar border-radius 50% overflow hidden margin-right 9px </style>
24. import avatar from './avatar' export default { name: 'usingAvatar', // ... components: { avatar, // ES6 shorthand } } In template <avatar :src="userAvatar" :size="32" />
25. import Vue from 'vue' import avatar from '../src/components/util/avatar' describe('avatar.vue', () => { describe('default settings', () => { let vm = {} before(() => { vm = new Vue({ el: document.createElement('div'), components: { avatar }, render: h => h(avatar, { props: { src: 'test.jpg', }, }), }) }) it('should render default width of 20px', () => { expect(vm.$el.style.width).to.equal('20px') }) it('should render default height of 20px', () => { expect(vm.$el.style.height).to.equal('20px') }) }) })