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.

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. Live Demo
   © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 7
   Source:
   https://github.com/ahus1/vue-async-timeout
   DEMO
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide