Vue[.js] from the six
A brief summary of VueConf Toronto.
Toronto wasn’t as cold as I was expecting. Although that may be since the only place on the east coast where I have spent a significant amount of time is Montreal. The food was delectable, the basketball was intense, and there was also a conference. Shout out to CHITO’s pizza.
As far as confs go, this one was one of the better ones I’ve been to. It wasn’t as big as ng-conf, but I think the organizers did an impressive job for their first time. Part of the reason I enjoyed it so much may have been the number of performance focussed talks. Although all of the videos aren’t up yet, I strongly urge you to check them out when they are. I will briefly go over a few of my favourites.
One of which was Reactivity & Rendering Revealed where Gregg Pollack took us deep into the Vue source code to show us how it all worked. The goal of this talk was educate everybody on how to checkout the source code and take the intimidation factor out of contributing to the vue core, and he did a phenomenal job.
Another talk I enjoyed was A Token Walks Into a SPA by Ignacio Anaya. This is something a colleague and I had previously discussed as we need to implement this into our Cordova app soon. Ignacio went over how to securely get JWTs from the client and only store them as server HTTP cookies from the oAuth server.
In Advanced Component Design, Adam Wathan did some wild things with scoped slots. Essentially using scoped for logic and built sometime complex components solely using templates and scoped slots.
The (Media) Content Optimization & Perf for Vue Apps talk by Colin Bendell took content optimization a step further. Instead of simply doing responsive images based on screen size or internet speed, he was using the available device memory to decide which images to display.
Then there was Light, lazy asynchronous patterns for Vue Apps where Eduardo San Martin Morote goes over code splitting! A quick rule of thumb would be to asynchronously load all of the routes. Then proceed to asynchronously load if the component is not part of the initial load of that page, ie shows up on a user action later on.
Sebastien Chopin was also present to give his talk on Nuxt.js 2. This is probably the tech that I want to try most from the conf that I haven’t really messed around with yet. Nuxt is Vue.js’ equivalent of React’s Next.js — and some say it has surpassed its namesake — a server side rendering framework. Currently at Hockey Community we have a custom server side rendering setup based on the Vue SSR template from a few years ago. It was very finicky and painful to set up (especially with typescript) a few years ago, but is running fine now. Nuxt.js gets rid of all these pains including webpack config and works out of the box. Optimizations such as code splitting, resource hints, critical css will just work. The only reservation I have is losing some level of customization from using a framework, hopefully the middleware and plugins will be able to handle that. I would strongly recommend checking out Nuxt.js for any SSR needs as I will be really soon!
The talk I was probably most looking forward to was Vuetify 2 by its creator, John Leider. Vuetify is a material design based component library for Vue. If you haven’t used it yet, I would highly recommend taking a look at it. It has over 80+ unique components, more than the actual material design spec itself. In my opinion, it is better than Angular Material; more performant, better customizability, and ease of use. As far as Vuetify 2, looks like there will be more performance improvements a la “tree shaking”.
As a side note, I would recommend looking at vuetify-loader now. It will make your life much easier by automatically importing all vuetify components, you can take it a step further by having it automatically import all of your own components too. With vuetify-loader installed, this code will automatically import any component that exists in the components folder.
And finally the Conference Keynote Address by the creator of Vue.js, Evan You. Evan was showing us what is upcoming in Vue 3.0. The main ambitions of Vue 3.0 is to be faster, smaller, more maintainable, make it easier to target native, and to make your life easier!
How is it getting faster? Vue 3.0 will also feature static tree hoisting, which means it will only re-render what needs to be re-rendered, such as skipping static content and only re-render dynamic content. It will also feature optimized slot generation, meaning that when a parent component gets re-rendered, its children are only re-rendered if needed. With a completely rewritten Virtual DOM implementation, with up to 100% faster mounting and patching. Vue is also switching over to proxy based observation (from Object.defineProperty). This means twice the performance with half the memory usage!
Vue 3.0 is also getting smaller, by becoming more tree shaking friendly, the core runtime gzipped will be only 10kb.
In terms of maintainability, the core will now be written in Typescript! Also they are decoupling the packages, meaning libraries such as observer have been pulled out of the Vue core.
They are also introducing a new Custom Renderer API, this is something that sounds intriguing. This will make it much easier to target native, but is also something I want to play around with to see what other cool things we can build.
And finally, Vue 3.0 will make your life easier due things such as templates will be keeping the same syntax. That will make the upgrade process much easier. It will also come with much better typescript support. Although it has become easier lately — especially compared to the pain it was before — it is still not perfect. In Vue 3.0 they hope to correct that. There will also be things such as better warning traces, making it easier to identify why a component is re-rendering, and IE 11 support!
Overall VueConf and the snowy city of Toronto was an informational success and I cannot wait to go to the next one. In the meantime, maybe we can get one on the west coast? Hit me up in the comments if you have any questions, or better yet any ideas on what you would like to see from any of these technologies in the future, especially Vue 3.0. Thanks for reading, and don’t forget to clap and share!
About Hockey Community and Decathlon
Hockey Community is always looking for talented front-end and back-end developers, you can check out the jobs page here. Currently we are migrating our legacy angularjs 1.x code over to Vue.js.
Decathlon has been in the sporting for over half a century now, they have recently decided to jump into the sport tech space as well. As they say, “It’s now time to unleash the power of sport technology empowered by our intelligence in the market. Get started with APIs, smart recommendation algorithms, authentication systems and start build something that matters. Let’s make sport more accessible through coding.” If you would like to pursue a career in the sport tech industry, check out Decathlon’s current job openings here.
About the author
Amrit Kahlon has been in the front-end game for the better part of a decade now. He’s been through frameworks such as jQuery Mobile, Intel App Framework, AngularJS, and has also created his own Vanilla JS based framework. Currently he is a Vue.js evangelist, and co-organizer of the Vancity Vue.js meetup in Vancouver.
