Get More Done with Vue.js 2019

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 to use it to build a real world application. We’ll also look at its simplicity, flexibility, performance and developer tools and see how they compare with other modern JavaScript frameworks, like React and Angular. By the end of the session, you’ll see how Vue's simplicity and flexibility combined with its performance and developer experience can help you get more done faster.

Transcript

1. GET MORE DONE WITH VUE.JS JONATHAN KEMP
2. GET MORE DONE WITH VUE.JS • What is it? • Get started with Vue • It’s flexible • Performance: Getting the most out of Vue • Community/Resources
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. PROGRESSIVELY ENHANCE YOUR SITE USE AS MUCH OR AS LITTLE AS YOU WANT
11. EASY TO PICK UP AND INTEGRATE WITH EXISTING PROJECTS
12. POWERFUL ENOUGH TO BUILD FULL FEATURED SINGLE-PAGE WEB APPLICATIONS
13. Getting Started
14. CREATE AN HTML TEMPLATE AND BIND DATA IN A VUE INSTANCE
15. TEMPLATES <div id="app"> Hello {{name}}! </div> var app = new Vue({ el: '#app', data: { name: 'Jonathan' } });
16. TEMPLATES <div id="app"> Hello {{name}}! </div> var app = new Vue({ el: '#app', data: { name: 'Jonathan' } });
17. THE DATA AND THE DOM ARE LINKED AND THE TEMPLATE IS REACTIVE
18. VUE TEMPLATES CAN BE MADE EVEN MORE POWERFUL WITH DIRECTIVES
19. 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'] } });
20. 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'] } });
21. DIRECTIVES APPLY SPECIAL REACTIVE BEHAVIOR
22. DIRECTIVES v-show • v-if • v-else • v-for • v-on • v-bind https://vuejs.org/v2/api/#Directives
23. BENEFITS OF VUE’S DATA BINDING WITH DIRECTIVES IN TEMPLATES
24. DIRECTIVES MAKE IT EASY TO ADD INTERACTIVITY TO YOUR APPLICATIONS
25. 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>
26. 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>
27. 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); } } });
28. 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); } } });
29. EXAMPLE
30. COMPONENTS
31. COMPONENTS • Use Vue’s component system to build larger applications. • Components are small, reusable and composable • Makes building powerful web applications simple. (Similar to React)
32. 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>
33. 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>
34. EXAMPLE
35. VUE IS DESIGNED TO BE SIMPLE AND FLEXIBLE WITH A HEAVY FOCUS ON PERFORMANCE.
36. GETTING THINGS DONE QUICKLY IS CENTRAL TO VUE’S PURPOSE
37. HOW DOES VUE HELP YOU TO GET MORE DONE?
38. LOW BARRIER TO ENTRY
39. JSX (not required)
40. ES6 (not required)
41. BABEL
42. WEBPACK
43. TYPESCRIPT (not required)
44. VUE • Does not require a compiler • Anyone can start using it with ES5 • Official documentation written in ES5 • Get started with a single script tag
45. REPLACING JQUERY WITH VUE.JS: NO BUILD STEP NECESSARY Sarah Drasner https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/
46. REPLACING JQUERY WITH VUE • Capturing User Inputs • Toggling Classes • Hiding And Showing • Submitting A Form
47. VUE-CLI https://cli.vuejs.org/
48. VUE-CLI • A simple CLI for scaffolding Vue.js projects with pre-configured build setups. • Pulls down templates from the vuejs-templates organization on GitHub that provide development tooling setups. • Get started building apps as fast as possible.
49. CODESANDBOX https://codesandbox.io/s/vue
50. CODESANDBOX • CodeSandbox is an online editor that helps you create web applications, from initial prototype to deployment. • Start a project with Vue, preview it in the browser, all without touching command line tools or dealing with any config files. • Afterwards, you can download your project, export it to GitHub, share it or even deploy it.
51. THERE’S SO MUCH YOU CAN DO WITH VUE
52. Flexibility
53. ES2015 Vue has an official Webpack loader that enables support for ES2015
54. VUEJS/VUE-LOADER official Webpack loader for Vue components
55. VUE-LOADER • Author Vue components in a format called Single-File Components • Allows using webpack loaders for each part of a Vue component (ES2015) • Converts any encountered asset URLs into webpack module requests. • Simulate scoped CSS for each component • Hot reloading
56. OFFICIAL TYPE DECLARATIONS FOR TYPESCRIPT
57. RENDER FUNCTIONS https://vuejs.org/v2/guide/render-function.html
58. RENDER FUNCTIONS • For those cases where you need the full programmatic power of JavaScript, Vue allows you to create HTML components using JavaScript via a render function. • You can use JSX via a Babel plugin. • With JSX, you can get back to a syntax that’s much closer to templates.
59. VUE HTML TEMPLATE <div id=“my-id"> {{msg}} </div>
60. VUE RENDER FUNCTION render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); }
61. VUE RENDER FUNCTION WITH JSX render (h) { return ( <div id='my-id'>, { this.msg } </div> ); }
62. CSS-IN-JS Scoping CSS in React is often done via CSS-in-JS solutions
63. CSS-IN-JS AND VUE • Many of the popular CSS-in-JS libraries support Vue • Styling in Vue is through more familiar style tags in single-file components. • Optional scoped attribute automatically scopes this CSS to your component
64. SINGLE FILE COMPONENTS
65. SINGLE FILE COMPONENTS • If your project is more complex, like a Single Page Application, you can create single-file components with Vue. • Single file components are components contained in a single file with a .vue extension • Compiled with a build tool like Webpack or Browserify.
66. 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>
67. COMPILERS • Pug • Babel (with ES2015 modules) • Stylus • TypeScript • SCSS • PostCSS
68. SERVER-SIDE RENDERING
69. SERVER-SIDE RENDERING • Not exactly trivial but it is possible to do server-side rendering with Vue. • The Vue guide has excellent documentation that walks you through this step-by-step. • https://ssr.vuejs.org/
70. NUXT.JS
71. NUXT.JS • Aims to simplify server-side rendering in your Vue projects. • You can even use it as a static site generator • Available on CodeSandbox
72. MOBILE DEVELOPMENT
73. WEEX
74. WEEX • A project similar to React Native that uses Vue to build native applications for iOS and Android. • With Weex, you can create native mobile UI using components written in Vue.js.
75. NATIVESCRIPT-VUE • A NativeScript plugin for building truly native applications using Vue.js.
76. ANIMATION
77. ANIMATION • Vue provides different ways to apply transition effects when items are inserted, updated, or removed from the DOM. • Integrate third party CSS animation libraries or JS animation libraries or use JavaScript directly. • Automatically apply classes for CSS transitions and animations.
78. EXTEND VUE • Register your own custom directives for accessing the DOM on your HTML elements. • Distribute reusable functionalities for Vue components with mixins. • Plugins are available to add global-level functionality.
79. VUEJS/VUE-ROUTER official supported routing library
80. STATE MANAGEMENT
81. VUEX State Management
82. VUEX • Designed primarily use with for large and complex applications with many components. • Inspired by the functional, compile-to-JavaScript library elm. • Often compared to Redux, another state management library that is also inspired by elm.
83. GRIDSOME Vue.js framework for Static Websites
84. GRIDSOME • Fast - Code splitting, asset optimization, progressive images, and link prefetching out of the box. • Modern build tools - Babel, PostCSS, Webpack, and friends • Vue.js for frontend
85. VUEPRESS Vue-powered Static Site Generator
86. VUEPRESS • Minimalistic static site generator with a Vue-powered theming system • Officially supported • Powered by Vue, Vue Router and webpack • Still a work in progress
87. VUETIFY Vue.js Material Design Component Framework
88. VUETIFY • Material design based Vue CLI packages to get your project started in no time • Supports SSR, SPA, PWA and standard HTML pages.
89. QUASAR Quickly create responsive++ websites/apps in many flavours
90. QUASAR • SPAs (Single Page App) • SSR (Server-side Rendered App) • PWAs (Progressive Web App) • Mobile Apps (Android, iOS, …) through Apache Cordova • Multi-platform Desktop Apps (using Electron)
91. QUASAR • Material Design 2.0 • Fast Web Components • Best practices integrated by default • Progressively migrate your existing project
92. Performance
93. WHAT FEATURES DOES VUE HAVE THAT WE CAN USE TO IMPROVE PERFORMANCE?
94. PERFORMANCE • Performance usually means two things, how fast our app loads and how fast it responds to our interactions. • Vue actually does well in both categories of performance, and it compares favorably with other popular frameworks, like React.
95. SIZE Vue 2.0 only weighs 20kb when minified and gzipped
96. OPTIMIZE FOR PERFORMANCE • Vue is in development mode by default. • If you are directly including Vue via a script tag, make sure to use the minified version (vue.min.js) for production. • When using a build tool, enable Vue’s production mode so that warnings are stripped out during the build.
97. PRE-COMPILING TEMPLATES
98. PRE-COMPILING TEMPLATES • Pre-compiling Vue templates will help them render faster than using in-DOM templates or in-JavaScript template strings. • The easiest way to pre-compile templates is to use Single-File Components. • The build setup automatically performs pre-compilation for you.
99. ASYNC COMPONENTS
100. ASYNC COMPONENTS • Load a component from the server when it’s actually needed. • Use async components together with Webpack’s code-splitting feature. • Vue will cache the result for future re-renders.
101. SERVER-SIDE RENDERING
102. SERVER-SIDE RENDERING • Downloading a single, pre-rendered HTML file is more performant than code splitting and async components. • We can achieve this in a Vue.js app with server-side rendering.
103. PRERENDERING
104. PRERENDERING • Generates static HTML files from a single page application for specific routes at build time. • Prerendering can improve SEO just as well as SSR, with significantly less setup. • Prerendering can be more performant than SSR.
105. PRERENDER-SPA-PLUGIN https://github.com/chrisvfritz/prerender-spa-plugin
106. 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' ] ) ] }
107. PRERENDERING • Run your app before deploying it, capture the page output and replace your HTML files with this captured output. • It’s pretty much the same concept as SSR except it’s done pre- deployment in your development environment, not a live server. • Pre-rendering is typically performed by running your app in a headless browser.
108. STATIC SITES • Gridsome • Nuxt.js
109. COMMUNITY Resources
110. RESOURCES • Official Vue.js forum • Github • awesome-vue • Vue Mastery
111. https://github.com/vuejs/awesome-vue
112. VUE MASTERY The Ultimate Learning Resource for Vue Developers
113. JONATHAN KEMP @jonkemp https://github.com/jonkemp
114. RESOURCES CodePen: https://codepen.io/jonkemp/pens/public/ Slides: https://speakerdeck.com/jonkemp