Recap from VueJS Amsterdam

A couple of weeks ago, and for some unexpected reasons, I had the opportunity to attend the Frontend Developer Love and VueJS Amsterdam 2019 Conference (the largest VueJS Conference in the world).

The main goal of this post is just to make a little recap about the event and highlight the top talks from my humble point of view.

Theater Amsterdam

First of all I would like to emphasize the amazing place where the event was made.

I had seen the place before watching last year edition videos, but even though, everyone was surprised by the huge screen when acceding to the auditorium.

But enough marketing, lets talk about the talks ;)

1. Make your Vue apps Lighter by being lazy

A very interesting talk by Eduardo San Martin Morote showing us how to take advantage of lazy loading in Vue with code splitting, a feature that webpack give to us for free just using the dynamic import strategy.

We can use dynamic imports anywhere by changing the default import

import MyComponent from '@/components/MyComponent'

to:

const MyComponent = () => import ('@/components/MyComponent’)

It is specially interesting to use it on your router.js file to split you app code at least by routes and on all those components that are not necessary on the initial render (a modal component for example). Thus, your app is just loading the code that it needs when it needs.

Check the Slides to get more advanced details about other ways to use dynamic imports wit Vue

Making your Vue apps faster by being lazy

2. Vue CLI — How to write components with it

That was the talk that I found more valuable of the whole event. Build a custom component library is one of those things in my mind from a time ago and Thorsten Linusborg talked about it!

Thorsten showed us the different steps that are necessary to build a library. Starting by the simplest case of just create one component and how to export it to be accessible from other application, dealing with multiple components, turning it into a Vue Plugin, making it customizable and finally providing the auto-install feature when included directly in a browser.

The slides:

https://bit.ly/2Xuch2x

3. How to craft a Vue CLI Plugin

A great surprise for me. Guillaume Chau gave a step by step tutorial about how to write a plugin for Vue… and it didn’t seems really hard!!

If you are thinking about to build a Vue plugin you must follow some naming conventions for your plugin:

• @vue/cli-plugin-xxxxx
• vue-cli-plugin-xxxxx
• @scope/vue-cli-plugin-xxxxx

And the Plugin structure should maintain a file structure as it follows:

package.json (Packages infos)
index.js - Service
generator.js - Generator (optional)
propmpt.js - Install prompts (optional)
ui.js - GUI integrations (optional)

As you could see the only files that are mandatory are the package.json (obviously) and the Service Plugin file, that serves for modify webpack config, creating new vue-cli service commands or changing existing commands.

Generator file will help us if we need to create or modify files, install dependencies for our plugin or modify the configuration.

Prompt file will give us the possibility to ask questions during the installation process and personalize it.

Check the slides and the Vue CLI documentation to go further and create you plugin in a properly way.

Create a Vue CLI plugin!

4. Designing Components in Vue

Damian showed us the problems of the traditional/popular approaches for building components and the common mistakes. I liked the approach that he called “props-based solution” and that we like to call “death for props”, that stands for pass tons of props to a component to consider all the cases.

Great talk showing how simple patterns help us to build better and more reusable components in a sustainable way.

My quick summary about this talk is “Composition over inheritance” and “use more slots and scoped-slots”

But be careful and do not use composition and slots or scoped-slots in every component until now, in many cases a simple props approach is good enough to solve our problem.

The talk went much further so please check the slides to get the full context

https://github.com/shentao/composing-components/blob/master/composing-components.pdf

5. Modern Web Apps Performance Tricks with PWA and Vue.js

This talk by Filip Rakowski was one of the talks I liked the most. Very pragmatic and full of good practices that will help us to develop in a much more sustainable way in terms of performance.

Filip started talking about why performance is important and the impact that it has in a direct way in terms of money and how webpack can help to deal with performance through code splitting and lazy loading.

Here I will summarize the rules that Filip talked about, but check the slides to get the full context.

1. Split your code per route
2. Load off-screen components lazily
3. Load non-critical libraries lazily
4. Avoid bundling all 3r party libs into on file. It’s an anti-pattern
5. Choose your libraries carefully and try to find smaller equivalents if possible
6. Make use of cache for static assets
7. Prefetch lazily loaded resources

Finally, he ends the talk by showing us a quick example of how mesure and analyze our app through the navigator dev tools and the webpack bundle analyzer. Really interesting!

The event was full other interesting talks. This ones are those that I found more valuables for me and for the daily workflow that we have in Calidae using Vue.

Hope to have the opportunity to come back to Amsterdam next year, it is really a great experience for any Vue developer to be there and share time and experiences with lots of people from around the with similar interests and different points of view.