Vue.js @ Routing and Preloading with Vue 2.x

Quick intro to Vue.js, followed by a presentation about Vue-Router.
---
Melbourne Vue.js Meetup: http://www.meetup.com/vuejs-melbourne/
Google Slides: http://bit.ly/2fzk9wl­;­
Presentation by: http://sylvainsimao.fr

Transcript

1. vuejs-australia.org Routing and Preloading with Vue 2.x @VueJsAustralia soon
2. @maoosi @_maoosi Sylvain Simao Senior Full-Stack Developer @ Clemenger BBDO
3. Vue 2.x (re)introduction
4. So what’s Vue.js ? • Open-source progressive Framework • First release in Feb. 2014 • 2.0 release (stable) in Oct. 2016 • Created by Evan You (Meteor / Google Creative Lab)
5. Vue.js - Today • ~33.6K stars on GitHub • ~190k downloads/month (NPM only) • $9,000+ monthly support from the community (patreon.com/evanyou)
6. Why choosing Vue.js ? • Small learning curve and semantic • Pre-processor agnostic (Jade/Pug, Sass, Stylus...) • Server-side rendering (SEO / Javascript disabled) • Stable, maintained, and tested • Vue.js 2.x is (almost) retro-compatible
7. • Imported as a ES6 module (easily testable) • Collocation of Template, Logic & Style • Just use what you already know: HTML, CSS & JavaScript • Embedded preprocessor support: Sass, Less, Pug, Stylus • Component-scoped CSS with a single attribute (no conflicts) Single File Vue Components
8. Vue.js offers a rich ecosystem VueX (State management) Vue-Resource (HTTP requests) Vue-Router (Routing) Vue-CLI (Command line scaffolding)
9. Official Chrome DevTools Extension
10. TODO list example
11. TODO list example
12. TODO list example
13. TODO list example
14. TODO list example
15. TODO list example
16. Vue.js in one GIF?
17. Routing in SPA’s
18. Single Page Application (SPA) 1. Entire app loaded on a single page 2. No page reload on UI navigation 3. Dynamically update UI with ajax-fetched data
19. Dynamic page-level component
20. Routing challenges • Displaying semantic URLs without reloading the page • Dynamically render correct UI based on URL navigations • Deep-linking and browser history • SEO friendly • ... • Avoiding that
21. 3rd-Party Routers • Director flatiron/director • Page.js visionmedia/page.js • Vue Lanes bpierre/vue-lanes • Voie.js inca/voie • Vue-Router (official) vuejs/vue-router
22. Vue-Router Library
23. Main advantages of Vue-Router • Dynamic route matching (patterns) • HTML5 history API (states) • Lazy-loading (async components) • Nested routes (multi-level) • Navigation guards (authentication, preloading ...)
24. /yo/john App Yo with { name: john } / App Home Component-based client-side routing
25. > npm install -g vue-cli > vue init webpack-simple yo-app > cd yo-app > npm install > npm run dev
27. > npm install vue-router --save
28. <router-view> render current route template here <keep-alive> caches the inactive component instances without destroying them ./src/App.vue
29. ./src/main.js
30. Router mode • Hash - uses the URL hash for routing (hashbang urls /#!/) • History - uses HTML5 History API (semantic urls) • Abstract - server-side with Node.js (all javascript environments) Server config - nginx location / { try_files $uri $uri/ /index.html; }
31. Lazy Loading Routes Async components to only load them when the route is visited: const Foo = resolve => require(['./Foo.vue'], resolve) const Foo = () => System.import('./Foo.vue') Built-In Component Caches inactive components without destroyed them: <keep-alive></keep-alive>
32. ./src/main.js
33. ./src/views/Home.vue
34. The Route Object A route object represents the state of the current active route: this.$route / vm.$route / $route / router Properties: $route.path / $route.params / $route.query / $route.hash / $route.fullPath / $route.matched / $route.name
35. ./src/views/Yo.vue
36. ./src/partials/Navigation.vue
37. Router Link <!-- literal string --> <router-link to="home">Home</router-link> <!-- active class when router is active--> <router-link to="/yo" active-class="active">About</router-link> <!-- named route with params --> <router-link :to="{ name: yo, params: { name: John }}">User</router-link> <!-- custom html tag --> <router-link to="/foo" tag="li">foo</router-link> <!-- renders as --> <li>foo</li>
38. ./src/App.vue
39. Simple routes example * Dynamic route matching / HTML5 history API / Lazy-loading / 404 errors
40. Preloading with Vue-Router
41. Why Preloading? • Avoid broken UI • Decrease noticeable time-lags • Increase responsiveness • Improve user experience
42. > npm i vuex --save > npm i vuex-router-sync@next --save
43. vuejs/vuex vuejs/vuex-router-sync ./src/store.js
44. ./src/partials/Preloader.vue
45. ./src/App.vue
46. ./src/main.js
47. Navigation Guards Guard navigations either by redirecting it or canceling it: globally / per-route / in-component router.beforeEach((to, from, next) => { }) router.afterEach((to, from, next) => { }) • to: Route : the target Route Object being navigated to. • from: Route : the current route being navigated away from. • next: Function : this function must be called to resolve the hook.
48. Route Meta Fields Attach abstract information to each route: - Authentication - Preloading - Authorized Referrer meta: { requiresAuth: true } router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, redirect to login page. if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // make sure to always call next()! } })
49. ./src/main.js
50. ./src/views/Yo.vue this.$nextTick wait until Vue.js has finished updating the DOM
51. Preloader example
52. https://mms.myer.com.au
53. Vue.js News
54. Vue-migration-helper - Now stable! CLI tool to aid in migration from Vue 1.x to 2.0 vuejs/vue-migration-helper VuejsJobs and VueJobs merging! The brand is undergoing a design change and will be launched as “The Job Board for Vue Developers” very soon. VueJobs.com
55. Vue-resource retired from “official recommendation” Alternative suggested by Evan You: Axios - Promise based HTTP client for the browser and node.js Source: https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.87gflwp4d Vue 2.0.5 release Performance improvements and bug fixes! vuejs/vue
56. Modern invoicing and subscription billing
57. Melbourne’s – and Australia’s - most awarded agency. https://careers.cle.ms
58. Thanks! vuejs-australia.org @VueJsAustralia soon Want to give a talk? Please contact us on @VueJsAustralia