Vue.js London 2019: Towards Scalable Apps

The Vue.js London conference returned this year albeit at a bigger and grander venue, the O2 Arena. The conference organisers had positioned the theme of this year's edition to herald the long-anticipated release of features and tools in Vue 3.0. The series of talks covered an array of current best-practice topics in the morning sessions, while Vue 3.0 features and updates (in particular the Composition API) were squarely in the spotlight after lunch.

Here are some of the highlights from Vue.js London 2019!

Vue's point of view - opinionated approaches in Vue.js projects

Vue.js London 2019 opened with a series of three talks on topics often associated with "polish and optimisation" in intermediate to advanced Vue.js projects. Vue Mastery's slick presentation work clearly communicated in Adam Jahr's talk on the UX benefits of using animations in a front-end interface to direct users' focus. Vue's built-in transition and transition-group components make creating organic and reusable CSS transitions a breeze when compared to a vanilla CSS implementation.

The contentious topic of CSS-in-JS was the second topic of the day as Maya Shavin led the audience through a Brief History of Front-end development for the web. Developers using Vue.js out-of-the-box are offered the option of encapsulating component styles with Scoped CSS. CSS Modules is another common approach (especially in the React world) to scope CSS classes locally with the added ability to compose classes. The second alternative to Scoped CSS is styled-components, presented by Shavin as the only "true" CSS-in-JS option allowing for encapsulation, extensibility and theming. However, strong caveats against styled-components were added concerning dynamically in-lined classes on runtime (without the possibility of caching), and potential security issues due to string template interpolations if users are allowed to input styles.

Filip Rakowski followed on with a practical live demo of some easy-to-do Webpack optimization drastically reducing initial-load times in production apps with the help of dynamic imports and pre-fetching.

As an interesting side note to these presentations, all the topics had previously been discussed in Factorial's front-end working group meetings.

It's all about the DOM

With data visualisation an ever useful front-end development tool-in-the-box to have, the next talk dived into the world of SVGs, interactive charts, and D3.js. Ramona Biscoveanu highlighted some key considerations to keep in mind when integrating Vue.js in D3.js based data visualisations. Firstly, although both libraries are centred around data driven DOM manipulation, the Vue.js renderer is virtual DOM based while D3.js renders SVGs by selector-based manipulation of the DOM. Vue's virtual DOM and templating layer in turn allow developers to create SVG based charts in a more intuitive and declarative manner. Secondly, Vue.js offers a first-class reactivity layer compared to D3.js (which is intrinsically not reactive). Finally, a key (if not the main) benefit of using D3.js is the rich set of visual and geospatial analytics layouts, projections and helper methods which would be impractical to write from scratch.

Getting to the route of things

As a segue into more Vue 3.0 centred topics after lunch, the morning talks concluded with an update from Eduardo San Martin Morote's update on improvements coming soon to the Vue Router. Rather than brand-new features, updates to the Router focused on addressing current shortcomings and limitations in the current version, and features aligned with Vue 3.0. Vue developers can expect: out-of-the-box TypeScript support, scoped slots for the router-link component, improved navigation failure handling, (finally) path ranking, truly dynamic routing, and support for Vue 3.0's Composition API.

The Path to Vue 3.0

The afternoon sessions kicked off with a couple of talks by Greg Pollack and Thorsten Lünborg about the new Composition API. In a similar vein to Vue Mastery's Vue 3 Cheat Sheet (also released during Vue.js London), Greg outlined the main shortcomings of current code sharing techniques, while highlighting the key benefits and reasons for adopting the new API. Thorsten complemented introduction with more concrete use cases and implications on production scale apps.

As experienced in large projects undertaken at Factorial, Vue components can quickly grow into unwieldy monoliths which are hard to reason about, and harder to maintain or even refactor. Larger apps also tend to feature recurring fragments of business logic as code which is often copy-and-pasted due to Vue's options based syntax.

A typical approach to sharing logic across components is the use of mixins, which in turn introduces the problem of naming conflicts and non-explicit traceability of methods and properties. The new Composition API enables business logic to be abstracted into reusable Composition Functions, which are as easily understood and used as utility functions. Granted that some concepts of the Composition API are completely new and non-trivial (e.g. the difference between reactive and ref and using toRef), it is a learning curve that will be overcome with experience and a worthwhile price for a cleaner codebase. And, if we haven't forgotten it already, the Composition API is 100% non-breaking and does not hinder beginners from picking up the easy-to-grasp options based Vue API we all know and love.

Composing compositions on a keyboard-keyboard

As a light-hearted and thoroughly informative and entertaining dive into the Composition API, Jason Yu's live-coding demo of Keyboard-Keyboard was certainly the highlight of the conference on sheer entertainment value. Jason's humour, confidence and approachability balanced his presentation's role of showcasing the features and benefits of Composition Functions while communicating the pure joy he finds in both creating code and music.

You has the final say

As always, Evan You concluded Vue.js London with updates on the progress of Vue 3.0. Probably in a follow up to the update given the year prior, this year's update centred around Vue's internals, with key compiler optimisations made. In keeping with the spirit of doing things "live" at conference, Evan officially open sourced the Vue 3.0 branch on GitHub in the strongest indication yet of the imminent arrival of Vue's next version.

Conclusion

The underlying theme of creating performant and polished applications with Vue.js is certainly a testament to the progress both core contributors and the wider community has made in recent months and years. As concepts in one ecosystem gain traction and acceptance as "best practices", it is my hope to be still challenged by new approaches and the cross-pollination of ideas between frameworks and communities. Finally, credit must be extended to Vue.js London organiser Blake Newman and his team for another successful edition of the conference.