Marc BackesFrom the 20th to the 22nd of February 2020 I went to the biggest Vue.js conference in the world - Vue.js Amsterdam. The three days have been fantastic, filled with lots of adventure, knowledge and getting to know amazing people. In this post I'll talk about the talks and a little bit about my personal experience.
The experience 🤩
When I signed up for the event, I didn't know much about it, so I didn't expect much. When I entered, it was a pleasant athmosphere. Everyone talking tech, donuts, coffee, and everyone eager to get started. Cool.
But when I entered the seating area, I was in awe at once. The most gigantic screen I have ever seen. Seriously. I don't think even Apple has these to introduce their new products to the public.
Every time someone got on stage, they played a song chosen by the speaker, which was a nice touch.
The speakers 👩💻👨💻
This conference had an amazing lineup. The crème de la crème of the Vue.js world was there. Of course, there was Evan You, the creator of Vue.js himself. But the house was filled with either core team members or otherwise important people of the Vue world. Trust me, it was wild. Just to mention only a few incredible speakers:
- Thorsten Lünborg, Vue.js core team member
- Sarah Drasner, Vue.js core team member, VP of developer experience at Netlify
- Thorsten Lünborg, Vue.js core team member
- Eduardo San Martin Morote, Vue.js core team member, vue-router
- Pooya Parsa, Nuxt.js core team
- Sébastien Chopin, Nuxt.js author
- Gregg Pollack, Vue Mastery. (Fun fact: With his course for Ruby on Rails I started getting into web development in the first place.)
- Jessica Sachs, Vue.js Test Utils maintainer
The talks 🎙
All the talks, without exception was amzing. You can check the complete programme on the website of Vue.js Amsterdam. But here are some takeaways from those talks.
Vue.js 3 is coming soon
Everyone has been waiting for it for a long time. And people are eager to get their hands on it. Evan You explained that they are very close to the beta version. In fact, he said that most definitely it will be out by the end of Q1. He also said that the final version would probably be out by the end of Q2.
The most significant changes in the new version will be:
- Composition API. The Vue-pendant to React hooks. THE feature everyone is waiting for.
- Portals. Render certain content outside the current component.
- Fragments. Allows multiple root nodes.
- Updated
v-model-API. It now accepts multiple models. - Suspense. Mostly for UX stuff. Waits to render multiple components, until all are ready. Shows a fallback-component until ready.
- TypeScript. Vue now has full TypeScript support.
Vue.js is heading towards the next era with Vue 3
Evan You also talked about the current state of development of Vue.js. It's very close to completion. Most of the work that is yet to do are tests, benchmarks, optimizations, and some renaming.
What I really found amazing is that the whole ecosystem is going ALL-IN with Vue 3. There are several projects that made major or entire rewrites of their code to take advantage of the newest features of Vue 3. When the maintainers of Vue, Nuxt, Vuelidate, Vuetify, etc. talked, I really got the perception that they all worked very closely together to really bring the whole Vue ecosystem to a new era. So, brace yourselves, because I really think Vue 3 will be a huge success.
Use more SVG
A talk by Dima Vishnevetsky really sensibilized me for using more SVGs. He for example had some interesting examples of micro interactions with SVG on input fields, showed that cool animations can be done, and reminded everyone that SVG is such a slim format with so much power. He also pointed out that SVGs are great for Vue.js, because they can be built easily with a component.
What I for exmaple didn't know is that SVG has media query support. Which means, you can create one single logo file in SVG, and depending on the size displayed, the logo looks different (squared). Check out the slides of his talk to see some great examples of SVG.
Main takeaway from his talk: Ask youself if it could be done in SVG. If yes... do it in SVG!
Climate change is also the responsability of developers
Callum Macrae had a compelling talk about climate change and how it affects all of us. To be honest, at first it took everyone's mood way down after everyone's excitement about the talks before. Because all the facts he stated from a research made me think "We're doomed. We're all going to die". The situation of our planet is no joke and there are little steps we can do as developers to help reduce CO2 consumption.
Where is a website called Website Carbon which analyzes your site and tells you how much CO2 one request to this websites generates. I was pretty happy with myself that my website is in the top 15% of the tested websites 💪. Callum pointed out that by creating more optimized websites in size and logic performance, we could actually make a difference.
But he also mentioned that the biggest CO2 are the backends. The APIs that dig through a lot of data. Also here, the advice is to make as effective and performant code as possible.
a11y is extremely important
Maria Lamardo, an instructor at vueschool.io showed based on a Memory game some interesting techniques to make like a lot easier for people who need screen readers. There are some neat techniques to optimize a website for screen readers. For example, you can create an invisible element where you write link changes for JS-powered websites that don't actually do a site load, but rather change content on the website with JavaScript instead. Also, aria-label and aria-descriptions go a long way!
Check out her amazing talk and the repository that's going along with it.
JavaScript Proxys are fun
There is this thing called Proxy in JavaScript, which is something I didn't know about and it turns out it's pretty darn interesting. Escpecially, because Vue.js 3 reactivity is built on proxies, as Evan You pointed out.
A proxy is an object that encases another object or function and allows you to intercept it.
That's how Sarah Drasner, VP of Developer Experience at Netlify explained it, and she showed us how proxies work in practical and understandable examples. It's something I will definitely take a look at and play with.
Vue Testing Utils
Sarah Dayan made a really comprehensive and fun live-coding session where she showed us how we can do TDD on Vue components with Vue Test Utils. In her talk she explained the red-green-blue TDD strategy and explained reasons why it's important:
- TDD helps you write robust test. Not too many, not too few!
- TDD encourages refactors which lead to better software design
- Fixing bug is far more costy than preventing them
She also mentioned that it's more important to have tests than have an ultra-clean and maintainable code base. Because having tests in place gives you more confidence to go ahead and refactor some code.
To the same topic, later that day Jessica Sachs gave a talk what VTU is and what's coming next. Among other things, they are preparing to support the Composition API (but will still work with Vue 2) and migrate TypeScript.
After-party 🕺
You might think programmers are all geeks, but Evan You (and some others) showed us that the opposite is true. After all the talks finished, the Master of Ceremonies Divya Sasidharan announced a special surprise, and boy - a surprise it was.
Evan You and Luke Thomas got on stage and started rapping Forgot About Dre. If you haven't seen it, check out the video I took if. They did it so great.
The after-party was nice as well. I There was some more karaoke (featuring Evan You, Debbie O'Brien, Jos Gerards, and others) and drinks. We all had a great time.
I also got a chance to greet Evan You himself. I thanked him for this work in the community and told him a little about what I'm doing with Vue.js and he seemed genuinly happy that his work is improving so many people's lives.
I even got him to pose for a photo with me 👇
Workshop 🤓
The day after the conference there was an optional workshop where Evan You take us to a deep dive with Vue 3.
It was a quite intense workshop, because Evan was typing so fast and the topic at hand was quite complex to grasp in such a short time, but it was absolutely amazing. We built a tiny version of Vue.js (how it currently works in version 2) FROM SCRATCH, which consisted of two parts: A renderer and the reactive part. Unfortunately we didn't get to build to compiler, that would have been fun as well.
The second part of the workshop was to get familiarized with the Composition API, which is fascinating. It was so many use cases where it makes code more readable and better maintainable.
The really cool part was that Evan was practically live coding for 8 hours without errors. That's amazing, because a lot of people fail in even a 5-minute live code. It was really impressive see the thought process that leads to the results Evan showed it.
At the end, I even got him to sign my laptop 😁
Summary ✨
I had such an amazing time at the conference and will for sure be participanting next year. Without exception, all talks were amazing. I met many great people, including my hero Gregg Pollack, and the master himself Evan You.
If Jos, Nick, or someone else from the organization team is reading this: I just want to thank you for creating this insane event. I went in a Vue.js user, and I came out a Vue.js enthusiast!
Photo credit for cover photo: Vue.js Amsterdam
