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