VueConf was finally back in person this year, so Max Bogue and I were excited to travel to Fort Lauderdale and meet a bunch of interesting leaders in the Vue space. We are both Software Engineers at PathAI, a startup working to transform the field of pathology using machine learning. Specifically, we work on the web-based slide viewer that powers our products and allows pathologists to read digitized microscopic tissue biopsies. Our teams are always eager to learn about the latest advancements in the Open Source community. With that, here are some of our favorite talks that took place during the conference.
Talks
State of Vuenion by Evan You
At both VueConf US and VueConf Amsterdam (which was a couple days prior) Evan You the creator of VueJS gave the opening keynote describing the state of Vue. Vue 2.7, which will be the last version of Vue 2, brings a refactor of the Vue 2 codebase to Typescript and more backports from Vue 3, which you can read about it on the VueJS blog.
The future of Vue will incorporate more compiler based optimizations, to greatly improve code performance. Vue already takes advantage of a compiler to transpile and bundle single file components. However the next versions of Vue will contain direct DOM updates similar to Svelte and Solid.js, and remove the Virtual DOM diffing approach that Vue currently uses. You will be able to enable this system either for a whole project, or piecemeal component by component.
Migrating to Vue 3 by Alex Van Lieu
Alex walked us through Productiv's journey migrating their Vue 2 app to Vue 3. Productiv is heavily invested in Vue for their complex frontend interfaces. Their codebase has 300 pages, 1000 components, and almost 250 thousand lines of code. The most important part of Alex's talk is the value of breaking down the work for a transition this big at scale. At Productiv they broke down his process into three steps: Preparation, Upgrade and Deploy. Productiv's process was useful for a big transition or version upgrade, and it was very insightful to see the planning and methodology required to make this transition successful.
As Part of the Preparation stage, Alex set up lint rules to ban patterns that break in Vue 3. This included writing and open sourcing ESLint rules for @vue/test-utils called eslint-plugin-vue-test-utils. This allows the Vue transition to occur asynchronously and progressively, as well as ensure that new code was written properly to work in Vue 3. He also audited all of their libraries to see which could run under a compatibility layer, had an upgrade but also contained breaking changes, or would have to be replaced all together.
Accessible Components by Homer Gaines
Accessibility is an unfortunately often overlooked part of designing and architecting frontend applications. Homer dove first into the importance of accessibility, specifically that designing with accessibility in mind can help all users and create a better product. An example is designing persistent labels on inputs is an accessibility enhancement helping users who could lose track of the purpose of an input. However, just like how Curb Cuts help both wheelchair users and parents with strollers use a sidewalk, this inclusive design can be a benefit for all of your users. Allowing everyone to use your website accurately and effectively.
After highlighting the importance of accessibility, he moved to common pitfalls when creating components with accessibility in mind. A specific example is that ARIA labels convey less meaning than using the correct HTML tags and browser features. For example Homer walked through some challenges with creating a disabled button. If you use an ARIA label, that will supersede the content written in the button. Removing the context of the functionality that was being disabled. There are also issues with internationalization as this is an additional string that needs to be translated. "The First rule of ARIA is don't use ARIA"
Dissecting the Pinia Source Code by Dan Kelly
This talk was interesting and very different from the other talks at VueConf. In this talk, Dan did a code walkthrough of the Pinia codebase, the de facto next version of Vuex (a flux implementation for Vue). Specifically, you could see a battle tested and high quality use of the Composition API. Pinia also highlights a method to layout your codebase, specifically a monorepo using pnpm to compose the library into subpackages. While I would have liked to see more on how the internals of Pinia works, it was a great jumping off point for dissecting and better understanding how to read open source codebases so you can use them more effectively.
Closing
There were a lot of great talks at VueConf, but we hope you enjoyed the ones we highlighted in this post. It was really great to get exposure to industry experts talking about overcoming challenges, and discussing the future of the ecosystem. You can check out all of the videos from VueConf on the Vue Mastery site: https://www.vuemastery.com/conferences/vueconf-us-2022
