Async Vue.js Components with loading indicator

Async Vue.js Components with loading indicator

Vue.js has asynchronous components. You can use them to show a loading indicator while the real component is prepared.

This talk guides you through the benefits and caveats.

5f528a3f6814d28b583f31842e3e8d9e?s=128

Alexander Schwartz

May 06, 2019
Tweet

Transcript

  1. 1.

    .consulting .solutions .partnership Async Vue.js Components with loading indicator and

    error handler Alexander Schwartz, Principal IT Consultant Vue.js Frankfurt Meetup, 2019-05-06
  2. 2.

    Async Vue.js Components with loading indicator and error handler ©

    msg | May 2019 | Async Vue.js Components | Alexander Schwartz 2 Idea and Concept 1 Live Demo 2 Benefits and Caveats 3
  3. 3.

    Idea and Concept Idea and Concept © msg | May

    2019 | Async Vue.js Components | Alexander Schwartz 3 Problem 1: Your application is big and starts slow in the browser Solution 1: Use Webpack code splitting to load components only when needed Problem 2: When the user visits the part of the application for the first time, there is a delay, and loading might fail Solution 2: Show a placeholder while loading, and an error message if loading fails
  4. 4.

    Vue.component( 'async-webpack-example', // The `import` function // returns a Promise.

    () => import('./MyComponent.vue') ) Idea and Concept 1. https://vuejs.org/v2/guide/components-dynamic-async.html Async Components Step 1 © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 4 • Webpack will split the code, and load the chunk from the server as needed • Vue.js will create the component when it is first used Still missing: Error handling, load indicator
  5. 5.

    const AsyncComponent = () => ({ component: import('./MyComponent.vue'), loading: LoadingComponent,

    error: ErrorComponent, // for loading component. Default 200ms delay: 100, // for error component. Default Infinity timeout: 3000 }) Vue.component( 'async-webpack-example', AsyncComponent ) Idea and Concept 1. https://vuejs.org/v2/guide/components-dynamic-async.html Async Components Step 2 © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 5 • Vue.js will set timeouts for the alternative components
  6. 6.

    Async Vue.js Components with loading indicator and error handler ©

    msg | May 2019 | Async Vue.js Components | Alexander Schwartz 6 Idea and Concept 1 Live Demo 2 Benefits and Caveats 3
  7. 7.

    Live Demo © msg | May 2019 | Async Vue.js

    Components | Alexander Schwartz 7 Source: https://github.com/ahus1/vue-async-timeout DEMO
  8. 8.

    Async Vue.js Components with loading indicator and error handler ©

    msg | May 2019 | Async Vue.js Components | Alexander Schwartz 8 Idea and Concept 1 Live Demo 2 Benefits and Caveats 3
  9. 9.

    Benefits and Caveats Benefits and Caveats © msg | May

    2019 | Async Vue.js Components | Alexander Schwartz 9 Situation Behaviour Remedy Component loads fast or already loaded, delay set to 0 Flickering Increase delay
  10. 10.

    Benefits and Caveats Benefits and Caveats © msg | May

    2019 | Async Vue.js Components | Alexander Schwartz 10 Situation Behaviour Remedy Component loads fast or already loaded, delay set to 0 Flickering Increase delay Component loads slowly Loading screen appears after delay, then the component (works as designed)
  11. 11.

    Benefits and Caveats Benefits and Caveats © msg | May

    2019 | Async Vue.js Components | Alexander Schwartz 11 Situation Behaviour Remedy Component loads fast or already loaded, delay set to 0 Flickering Increase delay Component loads slowly Loading screen appears after delay, then the component (works as designed) Component fails to load after for example network error Error component shows; no retry will be issued on next rendering Provide link to user to reload application OR re-register component Vue.component("comp", c)
  12. 12.

    Benefits and Caveats Benefits and Caveats © msg | May

    2019 | Async Vue.js Components | Alexander Schwartz 12 Situation Behaviour Remedy Component loads fast or already loaded, delay set to 0 Flickering Increase delay Component loads slowly Loading screen appears after delay, then the component (works as designed) Component fails to load after for example network error Error component shows; no retry will be issued on next rendering Provide link to user to reload application OR re-register component Vue.component("comp", c) Timeout exceeded loading component Error component shows; late response will be ignored; no retry will be issued Don’t specify timeout OR re- register component as above
  13. 13.

    Benefits and Caveats Benefits and Caveats © msg | May

    2019 | Async Vue.js Components | Alexander Schwartz 13 Situation Behaviour Remedy Component loads fast or already loaded, delay set to 0 Flickering Increase delay Component loads slowly Loading screen appears after delay, then the component (works as designed) Component fails to load after for example network error Error component shows; no retry will be issued on next rendering Provide link to user to reload application OR re-register component Vue.component("comp", c) Timeout exceeded loading component Error component shows; late response will be ignored; no retry will be issued Don’t specify timeout OR re- register component as above
  14. 14.

    Benefits and Caveats Further Reading © msg | May 2019

    | Async Vue.js Components | Alexander Schwartz 14 Vue.js dynamic and async components https://vuejs.org/v2/guide/components-dynamic-async.html Lazy Loading with Vue Router https://router.vuejs.org/guide/advanced/lazy-loading.html Example by @chrisfritz – see lazyLoadView() at end of file https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/router/routes.js @ahus1de
  15. 15.

    .consulting .solutions .partnership Alexander Schwartz Principal IT Consultant +49 171

    5625767 alexander.schwartz@msg.group msg systems ag Mergenthalerallee 73-75, 65760 Eschborn Deutschland www.msg.group