February in Netherland rhymes with cold weather and carnival. While lots of crazy parties takes place in the southern part of the country, Amsterdam gets ready to welcome one of the most important events of this beginning of the year: the VueJS Amsterdam.
Well, OK, it’s been only three years, but undoubtedly it is a must-go for whoever wants to learn more about Vue and its community.
Like previous year, Back Market decided to sponsor the conference and send 7 members of the frontend developers team.
Let’s go back on these two hectic days.
Brace yourself, Vue 3.0 is coming ⚔️
Hell yeah! Vue 3.0 is just behind the corner! No surprise that twelve talks were mainly focused on the future of VueJS and related libraries (such as Vuetify, Nuxt, …). Awesomeness !!
The conference started with one of the most exciting talk of all: State of the Vuenion by Evan You himself.
The most highlighted feature was, of course, its shiny Composition API, that will lead applications to be more modulable and improve code shareability by decoupling the logic and the templates.
You liked ReactJS hooks? You will love Composition API!
But what is even better is that backward compatibility was at the heart of the development of this new API which, despite all its advantages, will be completely optional. You will still be able to use the Option API to write your components. The migration will be flawless and you will be able to take all the time needed to make your application evolve.
Composition API will particularly shine in these cases:
- pretty large components (with the need of a better feature organization)
- multiple components that need to share the same code
- independent modules
Despite a tiny bit of learning required to fully comprehend it (and the `refs` concept), it’s clear that it will greatly improve your workflow and your applications.
So forget about mixins (and the namespace collision nightmare) and fully embrace the Composition API.
Of course, the Composition API is not the only new feature of this version.
Vue 3.0 promises to be faster (SSR is up to 3 times faster than in Vue 2.x and you can expect up to 130% performance improvement) and also offer tons of cool things:
- Multiple root nodes: who never complained to have to add wrapping node in every component? Say no more, this is from the past. You can now enjoy a cleaner DOM structure.
- Integrated portals: you will not need to add external libraries anymore to enjoy the decoupling and freedom offered by the portals (GLaDOS likes this one). Make the tooltip and modals rain!
- Multiple v-models: from now on, you can bind the same component to multiple reactive model by simply adding… moar `v-model:<name>`.
- Smooth reactivity: forget about `Vue.set()` and weird reactivity behavior. Thanks to the usage of `Proxy`s and reflectivity to track object properties and array elements, enjoy a more pleasant journey through reactive components (here is a great article if you want to learn more).
- Drop of filters: filters are no more. That’s it. Get used to it. This is not Angular here!
- Suspense: breeze through loading state handling thanks to this great new addition. Suspense will allow you to… (see the suspense here)… easily render fallback in place of the actual component until whatever condition you decide to use is met.
Last but not least, Vue 3.0 has been fully written in TypeScript and with TS developers in mind. So from now on, writing a VueJS application using TypeScript will be a piece of cake and this will offer an even greater Developer eXperience (autocomplete, yay!!).
What’s Nuxt… heu… next? 🌟
The other big star of this event was quite evidently Nuxt. We were pretty pumped by the announcements to come on this subject as we are heavily using it in our day to day work at Back Market. And we weren’t disappointed.
First new, and a big one: Nuxt just raised 2M€! That’s something!
And it’s a great news for the community. From now on, the Nuxt Core Team will be more focused on working on the framework. This also means that Nuxt definitely becomes a durable solution to be used in production!
The other big thing is the brand new `fetch` hook. This function allowing to fetch data for the component (and that works both server and client side) will now have access to `this` and thus to the whole component instance! This will bring a lot more simplicity and clarity in the components which need to use `fetch` and will increase even further code reusability (you won’t need to reimplement a method of the component just for the `fetch` function!).
⚠ Note that this new function will deprecate the previous one.
Also coming with this new `fetch` implementation, the `$fetchState` allowing to tell what is the loading state of a component. Associate this with the new Suspense API of Vue 3.0 and you will be able to write great loading states for your apps.
Finally, lots of improvements (particularly performance-wise) to the SSR and the Static rendering have been made.
A new CLI will give you the ability to fully exploit the static generation and data hydration of Nuxt.
And the developer experience has been greatly improved.
What else? ☕
Of course, there were tons of other cool talks. Some pretty technical, others more global (and nonetheless really interesting). Here is a quick selection and recap:
- Testing: we enjoyed the presentation of the future of Vue Test Utils by Jessica Sachs (new maintainer team member) where we were happy to hear that Vue 3, Composition API and TypeScript support is coming. They are also working on a new and improved documentation (with real life examples, migration guides, best practices, …).
Can’t wait for this final 1.0 release to come!
- More testing: because we never have enough tests, we also had a great talk from Sarah Dayan about Test Driven Development.
If you are not familiar with TDD, we highly encourage you to have a look at her talk that was really well made.
- Climate change: have you ever thought about the environmental impact of your day to day work? Callum Macrae did and wanted to share this with us. This talk will definitely make you think about the way you code to try to produce greener websites and applications.
If you want to have an idea of your work carbon footprint, don’t miss websitecarbon.com.
- Accessibility: another subject we should all be more aware of is making our application accessible to more people. That’s what Maria Lamardo advocates through her brilliant presentation on how to make a web interface accessible.
A definite must see.
- Management: Tim Benniks offered us a great presentation of the “Team first” principles to help developers and managers work better and more efficiently.
If you must keep one thing from this talk: “Don’t let room for interpretation, assumption is the mother of all fucks-up”
Beside Nuxt and Vue Test Utils, other community-driven libraries used this opportunity to show us upcoming novelties:
- Vuelidate version 2.0 has been fully rewritten to address most of the problems encountered by the users and is built for Vue 3.0 (while staying fully backward compatible with the 1.x version of the library). Some great stuffs are coming so keep an eye on it.
- Vuetify also gave us a glance at their 2.0 version. Composition API, TypeScript, A11Y, Observer API, performance and size improvements (and a lot more) are coming in this new version.
- BootstrapVue is also releasing a version 2.0 with Portal usage and Typescript.
Rock’n’roll baby? 🤘
Definitely! As said earlier, VueJS Amsterdam has established as a must-attend event for whoever is a bit interested in the VueJS ecosystem.
With its outstanding venue (the almost 180° screen, the surprise backstage place, …), a great selection of speakers, a perfect mistress of ceremony in the person of Divya Sasidharan (she handled technical issues like a boss), an organization at the top of the game and finally some really great food, you won’t regret going over there!
Keep in touch with VueJS Amsterdam to know when the slides and recording of the talks will be available.
See you next year! ;)
If you want to join our Bureau of Technology or any other Back Market department, take a look here, we’re hiring! 🦄