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. .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. 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. 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. 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. 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. 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. Live Demo © msg | May 2019 | Async Vue.js

    Components | Alexander Schwartz 7 Source: https://github.com/ahus1/vue-async-timeout DEMO
  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. 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. 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. 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. 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. 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. 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. .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