Tweet
Tweet

Slide 1

Slide 1 text

vuejs-australia.org Routing and Preloading with Vue 2.x @VueJsAustralia soon

Slide 2

Slide 2 text

@maoosi @_maoosi Sylvain Simao Senior Full-Stack Developer @ Clemenger BBDO

Slide 3

Slide 3 text

Vue 2.x (re)introduction

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

Vue.js - Today ● ~33.6K stars on GitHub ● ~190k downloads/month (NPM only) ● $9,000+ monthly support from the community (patreon.com/evanyou)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

● 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

Slide 8

Slide 8 text

Vue.js offers a rich ecosystem VueX (State management) Vue-Resource (HTTP requests) Vue-Router (Routing) Vue-CLI (Command line scaffolding)

Slide 9

Slide 9 text

Official Chrome DevTools Extension

Slide 10

Slide 10 text

TODO list example

Slide 11

Slide 11 text

TODO list example

Slide 12

Slide 12 text

TODO list example

Slide 13

Slide 13 text

TODO list example

Slide 14

Slide 14 text

TODO list example

Slide 15

Slide 15 text

TODO list example

Slide 16

Slide 16 text

Vue.js in one GIF?

Slide 17

Slide 17 text

Routing in SPA’s

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Dynamic page-level component

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Vue-Router Library

Slide 23

Slide 23 text

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 ...)

Slide 24

Slide 24 text

/yo/john App Yo with { name: john } / App Home Component-based client-side routing

Slide 25

Slide 25 text

> npm install -g vue-cli > vue init webpack-simple yo-app > cd yo-app > npm install > npm run dev

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

> npm install vue-router --save

Slide 28

Slide 28 text

render current route template here caches the inactive component instances without destroying them ./src/App.vue

Slide 29

Slide 29 text

./src/main.js

Slide 30

Slide 30 text

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; }

Slide 31

Slide 31 text

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:

Slide 32

Slide 32 text

./src/main.js

Slide 33

Slide 33 text

./src/views/Home.vue

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

./src/views/Yo.vue

Slide 36

Slide 36 text

./src/partials/Navigation.vue

Slide 37

Slide 37 text

Router Link Home About User foo
  • foo

    • Slide 38

    Slide 38 text

    ./src/App.vue

    Slide 39

    Slide 39 text

    Simple routes example * Dynamic route matching / HTML5 history API / Lazy-loading / 404 errors

    Slide 40

    Slide 40 text

    Preloading with Vue-Router

    Slide 41

    Slide 41 text

    Why Preloading? ● Avoid broken UI ● Decrease noticeable time-lags ● Increase responsiveness ● Improve user experience

    Slide 42

    Slide 42 text

    > npm i vuex --save > npm i vuex-router-sync@next --save

    Slide 43

    Slide 43 text

    vuejs/vuex vuejs/vuex-router-sync ./src/store.js

    Slide 44

    Slide 44 text

    ./src/partials/Preloader.vue

    Slide 45

    Slide 45 text

    ./src/App.vue

    Slide 46

    Slide 46 text

    ./src/main.js

    Slide 47

    Slide 47 text

    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.

    Slide 48

    Slide 48 text

    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()! } })

    Slide 49

    Slide 49 text

    ./src/main.js

    Slide 50

    Slide 50 text

    ./src/views/Yo.vue this.$nextTick wait until Vue.js has finished updating the DOM

    Slide 51

    Slide 51 text

    Preloader example

    Slide 52

    Slide 52 text

    https://mms.myer.com.au

    Slide 53

    Slide 53 text

    Vue.js News

    Slide 54

    Slide 54 text

    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

    Slide 55

    Slide 55 text

    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

    Slide 56

    Slide 56 text

    Modern invoicing and subscription billing

    Slide 57

    Slide 57 text

    Melbourne’s – and Australia’s - most awarded agency. https://careers.cle.ms

    Slide 58

    Slide 58 text

    Thanks! vuejs-australia.org @VueJsAustralia soon Want to give a talk? Please contact us on @VueJsAustralia