Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Async Vue.js Components with loading indicator

190

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.

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

    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
    [email protected]
    msg systems ag
    Mergenthalerallee 73-75, 65760 Eschborn
    Deutschland
    www.msg.group

    View Slide