Highlights from Vue.js Nation Day 1

Vue.js Nation has officially started with Day 1 coming to a close and I can say that it has been super exciting and educative. A packed lineup of awesome speakers and in this article I’ll share some key highlights of the day.

Vue: What to Expect in 2023 - Evan You

Evan You, the creator of Vue.js started the day with an awesome presentation on the status of Vue.js. Evan shared some insight on some major events. Plus he overviewed the major and minor changes and improvements that happened last year as well as what the team is currently working on.

Key Takeaways

• focused on stability
• Smaller and minor releases for the upcoming year.
• Reactivity transforms ($ref) will be scrapped
• Volar extracted to be a framework-agnostic
• Introduction of Vapor mode (Solid.js inspired) which will improve performance in certain use cases. Plus you’ll be able to mix it in alongside normal Vue components in the same app!
• Reactive props destructure will now be a separate feature

Evan’s talk leaves so much excitement as to what we can achieve with this stellar framework this year. Thumbs up to you Evan and the Vue.js Team.

State of Vue School 2023 - Alex Kyriakidis

Next up was Alex Kyriakidis, co-founder and CEO of Vue School. Alex delivered a talk on the State of Vue School. He started with some key information on the growth of Vue School and its massive impact on the Vue.js Developer Community. 1.5 million developers have benefited from Vue School and I think that’s amazing. If you are not one of them then you’re missing out. Alex then continued with a sneak peak of the Vue School events for this year. I’m definitely not going to miss any of them.

Then there was a BIG ANNOUNCEMENT! Vue School has partnered with Vuejs.org to bring a Vue.js certification program with the aim of setting standards for competent developers on the platform. This will be huge for improving confidence in Vue.js developers and for employers looking to hire qualified Vue developers. I am totally stoked about this! 🔥 🔥

Let's build a collaborative Emoji Panel with Vue Fire - Eduardo San Martin Morote

Up next was Eduardo, Vue.js core team member and creator of Pinia with an insightful and practical presentation of VueFire. Eduardo started with an introduction to VueFire and jumped straight into live coding session where he built an interactive emoji panel with Vue.js and Firebase using the Vuefire plugin.

This session is worth rewatching if you need a practical resource on how to use VueFire. I am definitely going to consider using VueFire now. Such a handy plugin maintained by an awesome team.

You can see the source code for the emoji app here.

Building a Polite Popup with Nuxt 3 - Michael Hoffman

After a short break, Michael, a freelance senior developer shared a talk on Building a Polite Popup with Nuxt 3. Michael began with some key features of a polite and impolite popup. Michael then mentioned some VueUse functions like useWindowScroll, useWindowSize, useLocalStorage we can leverage to create very interactive and effective popups.

Key Takeaways

• useTimeoutFn composable can trigger an event after a specified amount of time has elapsed
• Track the window size with useWindowSize composable.
• Save data to local storage with useLocalStorage composable.

An eye opening presentation from Michael and i totally enjoyed it. Gain access to his presentation slides here.

Making Next Gen Vue Machine Learning Applications using TensorFlow.JS - Shivay Lamba

Next up was Shivay, Developer Relations Engineer at Meilisearch with a presentation on Making Next Generation Vue.js Machine Learning Applications with Tensorflow.js. Shivay introduced us to Machine Learning with Tensorflow.js and how we can use it in our Vue.js application. He then followed with a code example of a Tensorflow.js with Vue.js Application.

Key Takeaways

• Tensorflow.js is a Machine learning Framework from google to build Machine Learning applications with Javascript.
• Tensoflow.js can run directly on the client side of your application without requiring a server-side
• Use Browser APIs like WebGL and others together with Tensorflow.js to improve performance.

Such an educative talk. Tensorflow.js is definitely worth trying.

v3 - The Next Generation of Vuetify - John Leider

Up next was John Leider, the creator of Vuetify with an awesome presentation on Vuetify 3. John began with highlighting some of the new features like Global Application default, layout systems, theme system, a revamped documentation site, and more in the recently released Vuetify 3.

John ended his talk with a Q and A where he answered numerous questions ranging from using Vuetify, to new components and features, to open-source contributions

Key takeaways

• Unlimited default options
• Create Virtual components from core vuetify
• Vuetify 3 is built on top of Vite
• Checkout the Vuetify playground tryvuetify.com

So much information to take away from John presentation. Vuetify is definitely awesome and worth it. Thank you John and the Vuetify team.

You’re probably using Lighthouse wrong: How we misuse most common tool to measure web performance? - Filip Rakowski

Filip, the Co-founder and CTO of VueStorefront took to the stage to talk about Google Lighthouse. He started with brief introduction of Vue Storefront and proceeded to talk about performance. Filip introduced us to google Lighthouse and some pros and cons of using this tool to measure performance and user experience of our web apps. Filip also introduced some good alternatives to Google lighthouse like PageSpeed Insights to get much more realistic metrics.

Key Takeaways

• Run google lighthouse in incognito mode to gain more realistic results
• If testing in a team, test in the same environment
• Use Lighthouse CI (Github action) that runs whenever you send a PR
• Use PageSpeed Insights which runs on Google’s data center
• Use google Lighthouse to get a perception of how new releases will affect your performance

Such an educative presentation from Filip. Always blowing our minds with new information.

Scalable Front End Architecture with the Composition API and Composable Functions - Will Marple

After a short break, Will, a full-stack developer at Black Airplane, took the stage with a talk on the composition API and composable functions. He began his talk with an overview of what the composition API is all about while looking at some strengths, especially with composable functions.

Followed was a live coding session to demonstrate how to first refactor your Options API code into the Composition API and subsequently transforming reusable functions into composables.

This session was very clear and educative especially with looking at how to create reusable components from a real world perspective.

Let's get visual - Visual testing in your Vue application - Ramona Schwering

Closing the curtain on the day’s event was Ramona. She delivered an exciting talk on Visual Testing. She mentioned some key concepts with respect to Visual testing and why it is important to add visual testing to your testing flow. Ramona continued with some tools to assist with Visual testing with some associated code snippets to test based on different scenarios.

Key Takeaways

• Users may find it difficult to trust applications with UI bugs
• Unit tests, component tests, E2E tests and other related tests may not detect all bugs
• Sometimes use screenshots to compare UIs
• You can install Visual Regression Tracker with Cypress with to test screenshots of your UI

Conclusion

So much to learn from day 1 and there is more coming in day 2. I can’t wait. Still haven’t tuned in? Then hurry and join us today for Day 2 of Vue.js Nation at Vuejsnation.com and I’m certain you will learn a ton. Don’t miss out!