Get More Done with Vue.js 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
2. GET MORE DONE WITH VUE.JS • What is it? • Easy to get started • It’s flexible • It’s fast • Developer Tools
3. GET TO KNOW VUE.JS
4. VUE.JS A FRAMEWORK FOR BUILDING USER INTERFACES
5. WHICH IS THE BEST FRAMEWORK?
6. Use the right tool for the job
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. Getting Started
12. TEMPLATES <div id="app"> Hello {{name}}! </div> var app = new Vue({ el: '#app', data: { name: 'Jonathan' } });
13. TEMPLATES <div id="app"> Hello {{name}}! </div> var app = new Vue({ el: '#app', data: { name: 'Jonathan' } });
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. 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'] } });
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 <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>
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. 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); } } });
20. EXAMPLE
21. COMPONENTS
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. 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>
24. EXAMPLE
25. Get Things Done Faster with Vue.js
26. Simplicity
27. HOW DOES VUE’S SIMPLICITY COMPARE WITH OTHER POPULAR FRONT END FRAMEWORKS?
28. ANGULAR 2
29. TYPESCRIPT (not required)
30. REACT
31. JSX (not required)
32. REACT WITHOUT JSX Each JSX element is just syntactic sugar for calling 
 
 React.createElement(component, props, ...children).
33. EXAMPLES
34. REACT COMPONENTS class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="John" />, mountNode);
35. REACT COMPONENTS class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="John" />, mountNode);
36. REACT COMPONENTS class HelloMessage extends React.Component { render() { return React.createElement( "div", null, "Hello ", this.props.name ); } } ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
37. REACT COMPONENTS class HelloMessage extends React.Component { render() { return React.createElement( "div", null, "Hello ", this.props.name ); } } ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
38. ES6 (not required)
39. BABEL
40. REACT OR ANGULAR 2 • JSX • Probably ES6 or TypeScript • Compiler/Build system
41. VUE • Does not require a compiler • Anyone can start using it with ES5 • Official documentation written in ES5
42. VUE’S INSPIRATION Familiarity is an advantage
43. HOW ELSE DOES VUE COMPARE TO REACT AND ANGULAR?
44. SIMILARITIES WITH REACT • They both use virtual DOM. • They both create view components that are reactive and composable. • They both focus on the core library, leaving the development of features like routing and state management to external libraries.
45. DIFFERENCES WITH REACT • Vue’s virtual DOM implementation is a fork of snabbdom. • Vue libraries for state management and routing are all officially supported while React leaves this to the community.
46. ANGULAR V1 SIMILARITIES • Syntax
47. ANGULAR V1 DIFFERENCES • Vue is simpler than Angular 1 though, in terms of API and design. • Angular 1 is also more opinionated about how you structure your applications. • Performance-wise Vue is faster than Angular 1.
48. ANGULAR 2
49. THERE’S SO MUCH YOU CAN DO WITH VUE
50. Flexibility
51. ES2015
52. VUEJS/VUE-LOADER official Webpack loader for Vue components
53. TYPESCRIPT
54. RENDER FUNCTIONS https://vuejs.org/v2/guide/render-function.html
55. JSX
56. VUE RENDER FUNCTION WITHOUT JSX render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); }
57. VUE RENDER FUNCTION WITH JSX render (h) { return ( <div id='my-id'>, { this.msg } </div> ); }
58. SINGLE FILE COMPONENTS
59. 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>
60. COMPILERS • Pug • Babel (with ES2015 modules) • Stylus • TypeScript • SCSS • PostCSS
61. SERVER-SIDE RENDERING
62. NUXT.JS
63. MOBILE DEVELOPMENT
64. WEEX
65. ANIMATION
66. EXTEND VUE • Custom directives • Mixins • Plugins
67. VUEJS/VUE-ROUTER official supported routing library
68. STATE MANAGEMENT
69. VUEX
70. Limitations
71. CANNOT DETECT PROPERTY ADDITION OR DELETION
72. NO ONE SIZE FITS ALL SOLUTION
73. Performance
74. PERFORMANCE • How fast our app loads • How fast it responds to our interactions
75. SIZE
76. OPTIMIZE FOR PERFORMANCE
77. PRE-COMPILING TEMPLATES
78. ASYNC COMPONENTS
79. SERVER-SIDE RENDERING
80. PRERENDERING
81. VUE VS. REACT • Vue’s Virtual DOM implementation (a fork of snabbdom) is lighter-weight • When stateless components are used in performance-critical situations, Vue is once again faster
82. IMPROVED RENDER PERFORMANCE IN VUE
83. VUE IS FAST
84. Vue.js Developer Tools
85. VUEJS/VUE-CLI
86. WEBPACK
87. WEBPACK LOADERS
88. WEBPACK LOADERS • vue-loader • webpack-simple • vue-template-loader
89. PRERENDERING
90. PRERENDER-SPA-PLUGIN https://github.com/chrisvfritz/prerender-spa-plugin
91. WEBPACK (SIMPLE) // webpack.conf.js var Path = require('path') var PrerenderSpaPlugin = require('prerender-spa-plugin') module.exports = { // ... plugins: [ new PrerenderSpaPlugin( // Absolute path to compiled SPA Path.join(__dirname, '../dist'), // List of routes to prerender [ '/', '/about', '/contact' ] ) ] }
92. OTHER BUILD TOOLS
93. VUEIFY
94. ROLLUP
95. OTHER TOOLS
96. VUE-DEVTOOLS
97. SERVER-SIDE RENDERING
98. NUXT.JS
99. COMMUNITY
100. COMMUNITY • Official Vue.js forum • Github • awesome-vue
101. https://github.com/vuejs/awesome-vue
102. LARAVEL
103. JONATHAN KEMP @jonkemp https://github.com/jonkemp
104. THE STATE OF STATE MANAGEMENT IN REACT @ 2:20 PM in Room 105
105. RESOURCES CodePen: https://codepen.io/jonkemp/pens/public/ Slides: https://speakerdeck.com/jonkemp