Some learnings from VueConf 2017
Code splitting
A few years ago, the general idea in website optimization was to put all code in a single file, to minimize roundtrips and HTTP connections. But, with growing web applications, especially single page web applications, file sizes increase. In the same time, HTTP/2 made it from concept to being actively used. HTTP/2 makes roundtrips cheaper by utilizing a single connection for multiple requests at once, minimizing overhead. This makes the concept of bundling all code into big files obsolete.
With Webpack, it’s possible to split code: serve the client only the code the client needs at the moment. Using link prefetching, we allow the browser to prefetch (download and cache) the files needed for other parts of the site. This will decrease the load time for the first page a new visitor is hitting.
Further reading: https://youtu.be/rn97hCNQsKI and https://webpack.js.org/guides/code-splitting/
Vue and Firebase
Firebase is a realtime database, making it very easy to distribute data to a variety of clients, both mobile and web. It has certain drawbacks as well: no relational data, lookups are expensive and it’s third-party hosted (Google).
Because of these drawbacks, you got to be careful what you load into firebase and you probably won’t make it your primary database, but a copy of your data structured for presentational purposes. By doing so, you essentially only use Firebase as a transport system for data.
We already use Firebase at Nu.nl: Our liveblog is based on Firebase, as is the NUsport app. It’s very easy to connect firebase to web applications using Vue and VueFire and this combination takes care of all data-changes along the way. The only thing you’ll have to write are components to display your data.
Further reading: https://vuejs.org/v2/examples/firebase.html and https://firebase.google.com/
Server side rendering & prerendering
The downside of client-side rendering is the lack of support for SEO and outdated or slow clients. To mitigate this, we can render the JS components on the server. This is also interesting to prevent large chunks of data downloaded again and again from a costly resource, for example Firebase (see previous point): the server side rendered pages will be cached and served to multiple clients at once.
Difference between server-side rendering and prerendering: Server side rendering is the rendering of JS components (in our case, Vue) on the server side, at runtime. This does generate additional load per client request.
Pre-rendering is rendering the JS components during building your application. This generates HTML files at build time, which could result in a quite long build time for the application. Also, pre-rendering is nice for content that hardly ever differs (say a contact page, terms & conditions etc.) but unsuitable for content that differs often or differs per user (e.g. a profile page).
Further reading: https://youtu.be/Dkf3AwxrSjE (focus on PWA) and https://ssr.vuejs.org/en/
See also:
Some links for more information about VueJS and VueConf 2017:
https://vuejs.org/
https://conf.vuejs.org/summary/
https://www.youtube.com/channel/UC9dJjbYeXjirDYYVfUD3bSw
