CYCLING THROUGH THE VUE JS CANALS

Beltrán García Balbuena
Mar 5 · 4 min read

This past February, we had the incredible opportunity to visit Amsterdam, world capital of bicycles, in order to attend Vue.js’s largest European event: 29 talks in two days!

Canals in Amsterdam with a bunch of bikes.

During that time, we had the chance to experience live-coding by the hand of great programmers — such as Sarah Dayan applying test-driven development. But many of the talks focused on Vue3. Sarah Drasner, a member of the core team from Vue.js, and Alex Kyriakidis, co-founder of VueSchool, both offered insight into Vue3 itself, while Gregg Pollack, founder of VueMastery, introduced us to the Vue3 Composition API. Non-technical talks such as that of author Callum Macrae reminded us that our industry also affects and is responsible for climate change.

Of all these talks, we have selected those that we liked the most and that we believe will contribute the most to our teams and company in the future.


3. Scalable Vue graphics for the modern web

by Dima Vishnevetsky

Dima explored the infinite possibilities of scalable vector graphics and how they are still little used today due to the great ignorance of their potential among most developers. With SVGs we can achieve things like 3D, text effects and even reactions to events depending on shapes, with the aim of evoking emotions in the user. All these benefits enjoy support in all browsers, improving SEO accessibility while reducing file size.

Here’s an example about kirby in 3D done by SVGs.

2. Vue announcer - Content loading that isn’t broken

by Maria Lamardo

In this type of conference, most talks are merely informative, but in the case of Maria’s, it was one of those that opens your eyes. Through her presentation, she made us aware of how a user with a visual impairment experiences a website that is not accessible — and how, with small improvements when developing our code, we can create a unique experience by involving the rest of the user’s senses.

A representation of different senses interacting with a computer.
Slides of Maria Lamardo talk

1. Vue3: reactivity, internals and what you’ll love about it

by Sarah Drasner and Alex Kyriakidis

Due to the large number of lectures that tackled the improvements that Vue3 will bring, we have summarized in this section our two favorites.

On the one hand, we have the greatest change that Vue3 will offer, the Composition API. Thanks to this feature, our code can be organized around functionalities instead of options and, with that, the readability and reusability of the code will be upgraded. Also note that, thanks to the improvement in the reactivity system and a new compiler, updating projects to Vue3 will offer performance improvement without modifying any of the current code. All this was explained by Sarah Drasner through different animated examples.

Reactivity explained visually

On the other hand, we have lots of other novelties that will be included in Vue 3: portals, fragments, new reactivity caveats, suspense… and many other things.

Among them, the portals will be the biggest highlight. These will allow us to render our components anywhere in the DOM, even outside the scope of our application and the news reactivity caveats, which will implement improvements when generating reactivity when modifying complex structures.


Vue.js 3 Deep Dive — Workshop

by Evan You

And last but not least, the icing on the cake, we had the great opportunity to attend a workshop by the creator of Vue.js, Evan You.

We know, it is not the best photo with Evan You.

During the eight hours of this workshop, we learned hand in hand with Evan how to create a reactive system from scratch (using only JavaScript), in order to understand the logic that exists behind Vue — and understand that the most difficult things sometimes may be simpler than you think.

But behind all this knowledge and innovation, sometimes, there are surprises:

Evan You rapping

Written by Beltrán García and Angel Méndez

More From Medium

Also tagged Front End Development

Also tagged Front End Development

Dependency Injection Containers in JavaScript

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade