Get More Done with Vue.js Nodevember 2017

Vue.js is a framework for building user interfaces that’s designed to be simple and flexible with a heavy focus on performance. In this session, you’ll learn what Vue.js is and how its simplicity and flexibility combined with its performance and developer experience can help you get more done.

Transcript

1. GET MORE DONE WITH VUE.JS JONATHAN KEMP
3. –Ferris Bueller “Life moves pretty fast.”
4. GET MORE DONE WITH VUE.JS • What is it? • Easy to get started • It’s flexible • Developer Tools
5. GET TO KNOW VUE.JS
6. VUE.JS A FRAMEWORK FOR BUILDING USER INTERFACES
7. DESIGNED TO BE SIMPLE AND 
 FLEXIBLE
8. FOCUSED ON PERFORMANCE
9. VUE CAN BE IMPLEMENTED INCREMENTALLY
10. POWERFUL ENOUGH TO BUILD FULL FEATURED SINGLE-PAGE WEB APPLICATIONS
11. TEMPLATES <div id="app"> Hello {{name}}! </div> var app = new Vue({ el: '#app', data: { name: 'Jonathan' } });
12. TEMPLATES <div id="app"> Hello {{name}}! </div> var app = new Vue({ el: '#app', data: { name: 'Jonathan' } });
13. DIRECTIVES <div id="app"> <ol> <li v-for="item in list"> {{ item }} </li> </ol> </div> var app = new Vue({ el: '#app', data: { list: ['One', 'Two', 'Three', 'Four'] } });
14. DIRECTIVES <div id="app"> <ol> <li v-for="item in list"> {{ item }} </li> </ol> </div> var app = new Vue({ el: '#app', data: { list: ['One', 'Two', 'Three', 'Four'] } });
15. EVENT LISTENERS <div id="app"> <h3>TODO List</h3> <form id="todo-form"> <input id="update" type="text" value="" /> <button type="submit" v-on:click.prevent="addTodo">Add Item</button> </form> <ol> <li v-for="item in list"> {{ item }} </li> </ol> </div>
16. EVENT LISTENERS <div id="app"> <h3>TODO List</h3> <form id="todo-form"> <input id="update" type="text" value="" /> <button type="submit" v-on:click.prevent="addTodo">Add Item</button> </form> <ol> <li v-for="item in list"> {{ item }} </li> </ol> </div>
17. EVENT LISTENERS var app = new Vue({ el: '#app', data: { list: [] }, methods: { addTodo: function () { var input = document.getElementById('update'); this.list = this.list.concat(input.value); } } });
18. EVENT LISTENERS var app = new Vue({ el: '#app', data: { list: [] }, methods: { addTodo: function () { var input = document.getElementById('update'); this.list = this.list.concat(input.value); } } });
19. EXAMPLE
20. COMPONENTS
21. COMPONENTS // Define a new component called todo-item Vue.component('todo-item', { template: '<li>This is a todo</li>' }) <ol> <!-- Create an instance of the todo-item component --> <todo-item></todo-item> </ol>
22. COMPONENTS // Define a new component called todo-item Vue.component('todo-item', { template: '<li>This is a todo</li>' }) <ol> <!-- Create an instance of the todo-item component --> <todo-item></todo-item> </ol>
23. EXAMPLE
24. Get Things Done Faster with Vue.js
25. Simplicity
26. HOW DOES VUE’S SIMPLICITY COMPARE WITH OTHER POPULAR FRONT END FRAMEWORKS?
27. ANGULAR
28. REACT
29. REACT OR ANGULAR • JSX • Probably ES6 or TypeScript • Compiler/Build system
30. VUE • Does not require a compiler • Anyone can start using it with ES5 • Official documentation written in ES5
31. THERE’S SO MUCH YOU CAN DO WITH VUE
32. Flexibility
33. ES2015
34. TYPESCRIPT
35. SINGLE FILE COMPONENTS
36. HELLO.VUE <template> <p>{{ greeting }} World!</p> </template> <script> module.exports = { data: function () { return { greeting: ‘Hello’ } } } </script> <style scoped> p { font-size: 2em; text-align: center; } </style>
37. COMPILERS • Pug • Babel (with ES2015 modules) • Stylus • TypeScript • SCSS • PostCSS
38. SERVER-SIDE RENDERING
39. MOBILE DEVELOPMENT
40. WEEX
41. ANIMATION
42. VUEJS/VUE-ROUTER https://github.com/vuejs/vue-router
43. STATE MANAGEMENT
44. VUEX https://github.com/vuejs/vuex
45. Highly Flexible
46. Vue.js Developer Tools
47. VUEJS/VUE-CLI https://github.com/vuejs/vue-cli
48. WEBPACK
49. WEBPACK LOADERS
50. VUEJS/VUE-LOADER https://github.com/vuejs/vue-loader
51. ASYNC COMPONENTS
52. PRERENDERING
53. PRERENDER-SPA-PLUGIN https://github.com/chrisvfritz/prerender-spa-plugin
54. OTHER TOOLS
55. VUE-DEVTOOLS https://github.com/vuejs/vue-devtools
56. SERVER-SIDE RENDERING
57. NUXT.JS
58. LARAVEL
59. https://github.com/vuejs/awesome-vue
60. JONATHAN KEMP @jonkemp https://github.com/jonkemp
61. RESOURCES CodePen: https://codepen.io/jonkemp/pens/public/ Slides: https://speakerdeck.com/jonkemp