Vue Conf Recap

I had never been to New Orleans, a developer conference, or eaten gumbo, so there were a lot of firsts for me on this trip.

We had six members of our development team attending the conference, including our documentation specialist (and my wife!).

New Orleans

When you think about New Orleans, you probably think about parties, great food, and music and the city certainly delivered. I’m keen on two of those three things, but the trip was an overall success.

Ace Hotel

The Ace Hotel had a great vibe to it. The lounge was cool with lots of great furniture pieces, a bar, plants and a piano scribbled with signatures. There was an old-timey photo booth outside the elevators on the first floor, modernized and fashioned with a credit card reader to encourage usage.

I particularly enjoyed the signage throughout the hotel, often painted directly onto the walls, pointing out key features, directions, and the many restaurants available.

The vibe continued when we entered our hotel room - dimly lit with classic New Orleans Jazz already playing on the radio.

We unpacked our belongings, took a quick nap, and prepared for dinner with the team!

Cochon

A fan-favorite restaurant on our dev team from the previous Vue Conf held in New Orleans is Cochon Restaurant. This was before my time with the team, so I was not quite sure what to expect when I got there, especially since I had no idea what some of the dishes were when looking at their menu online (I’m quite unsophisticated when it comes to food).

That being said, they did have a chicken and andouille sausage gumbo that was incredible, especially paired with their macaroni and cheese casserole. Others on our team enjoyed the rabbit and dumplings, fried alligator, and smoked beef short ribs.

For dessert, I had a banana-spiced cake that contained milk jam, banana cream, and caramelized banana on top. I feel like I will be dreaming of this dessert for a while.

Vue Conf

Vue Conf was held inside the Ace Hotel, so we didn’t have to go too far to attend.

The conference was three days in total, one day for workshops and two for talks. They provided breakfast and lunch, with coffee and snacks available throughout the day.

One of the absolute best things about the conference was that they hired Ken LaFrance to be the master of ceremonies. Ken kept things so entertaining by mixing humor with interesting facts about New Orleans, excellent crowd interactions, and playful introductions to speakers. I wish Ken hosted every event!

Workshops

I participated in Nailing it with Nuxt 3 - Inside and Out workshop hosted by Daniel Roe. Daniel leads the Nuxt core team, so, as expected, was super knowledgeable on the topic.

I did make the mistake of entering the workshop a tad later than others, regrettably sitting in the last row. My eyesight is pretty awful.

In the workshop, Daniel walked us through many of the key features of Nuxt that separate it from similar tools, such as modules, auto-importing components, layers, directory-based routing and tons more. One of the more interesting pieces he dived deep into was the Nitro server engine, which I feel will be very interesting to dig into on my own.

As a more hands-on example, we got some time to play with Nuxt by building a To-Do list application. I managed to get mine to add and delete to-do items, so I consider that a success.

I’m very glad I did some preparation work before the conference by building an application with Nuxt, as this helped me follow along quite well (even though I could barely read the screen).

All-in-all, I’m looking forward to using Nuxt more often in projects I build. I’m hoping we can find a way to utilize it in our workflow at work.

Presentations

The first day of talks began with Evan You presenting the keynote “State of the Vuenion.”

This, of course, provides a lot of detail on the most recent version releases of Vue, including the latest Vue 3.3. This release contains a defineModel feature that will help with creating components that utilize two-way binding.

Evan also talked about the future of Vue involving “Vapor Mode” which he claims will make Vue more performant and use less memory. This an exciting development that I’m looking forward to being released.

Alex Harding from RTI International discussed how helpful it is to understand the data when creating interactive and story-driven visualizations. I reflected on this from the point of view of a user experience developer and how it is helpful to understand the needs of a user to deliver the best possible experience.

Daniel Kelly from Vue School gave an awesome talk on common patterns that will help large-scale applications. A lot of common-sense advice that I’m hoping to bring to my workflow when developing Vue applications.

NuxtLabs CEO, Sébastien Chopin, presented a live coding demonstration of building an application with Nuxt. He utilized many of the features of Nuxt to build a simple “Coffee or Tea” voting application where audience members could log in and vote.

Mark Noonan presented “Testing Vue Components with Cypress” where he walked through finding and correcting errors with Cypress. Testing is something I admit I am not very good at, but Cypress makes it look quite easy. I will be investigating this further for sure.

Cecelia Martinez presented an awesome solution for building mobile applications using Nuxt and Ionic. Using just a single Nuxt codebase, you can compile applications for native iOS and Android applications - this made me feel like I gained a skill.

There were quite a few more talks and all of them were great! I feel like I was able to pull something of value from every presentation!

Favorite Talks

Many of my favorite talks during the conference weren’t necessarily as Vue-centric as the rest. Although what these folks presented certainly pertains to Vue, they can give a broader understanding of the tools and techniques for developing websites and applications.

Phil Hawksworth

Phil Hawksworth’s presentation called “Render when? Render where? Render why? Render what?” broke down the various acronyms (such as SSG, SSR, CSR, and so, so many more…) for building and rendering sites and apps used within our industry, explaining when might be best to use some over others.

Ultimately, as his presentation repeatedly informed us, it depends on what you are trying to accomplish. Phil explained his approach, using the “rule of least power” to figure out the best option for rendering.

I think Phil’s presentation was super entertaining as well, mixing humor into what he was saying and into his slide deck.

Homer Gaines

Homer Gaines’ presentation was mesmerizing. Homer began his talk with photo slides depicting Tenji blocks in the streets of Japan. He gave the history of the Tenji blocks and how they assist folks with sight-related disabilities to navigate cities via sidewalks.

From there he segued into how folks with accessibility needs may navigate applications and websites, such as through keyboard navigation. Keyboard traps are a common accessibility pitfall that developers can face when designing interfaces and should be tested and corrected.

Homer gave a rare live-coding demonstration, displaying how utilizing semantic HTML can correct a lot of these types of issues. He also demonstrated a package called Vue Keyboard Trap that adds a Vue directive that contains keyboard navigation when certain elements such as a modal are active.

Felipe Flor

Felipe Flor, a developer from Brazil who works for Vehikl, presented on developing with Vite.

Felipe seems like a genuinely passionate developer. He expertly described what Vite is and how it is helpful as a build tool. He presented a comparison between Vite and Vue CLI (which utilizes Webpack) and how much faster Vite can launch an application.

Speed is not the only reason to enjoy using Vite though, as it is highly customizable and simple to work with. To show this, Felipe converted an application from Vue ClI to Vite, which involved removing several packages and adding a small config file. Within just a couple of minutes, the application was converted and running in the browser.

This was particularly relevant to our team as we are working through converting applications to Vite.

My Key Takeaways

There were a couple of common threads throughout the conference and one thing that caused the audience to cheer during the presentation.

Nuxt

Nuxt was repeatedly brought up in nearly every talk. I feel like this is similar to the React/Next situation where it is the recommended way to build Vue applications.

Though not nearly as drastic as the create-react-app drama, since Vue and Vite are still a pretty powerful combination, Nuxt just gives you a lot of great functionality out-of-box and provides a thoughtful developer experience.

Typescript

Another thing that pretty much felt like a standard approach is the use of Typescript.

I get this sentiment and I fully intend on making this my next mission when it comes to learning, but I also sort of dread it. I have slight experience with Typescript, but ultimately it just felt like JavaScript that yells at you. For type safety, code suggestions, and tons more, Typescript certainly can be a good thing though.

FormKit

I feel like FormKit might have stolen the show for many folks.

Justin Schroeder from FormKit, presented the thought process used when developing FormKit and explained how they managed to extract the essence of web forms into the tool. Developing forms is generally very hard, especially large forms, but FormKit seemingly makes it way easier.

I had previously heard of FormKit but mostly thought it was another component library to reach for building forms. Though that is part of it, seemingly you can utilize any components you want.

FormKit itself essentially maintains the structure of forms under the hood, making it very easy to build complex forms.

This is one I will definitely be digging into further, expect a blog post on this in the future.