Abstract
Vue offers developers a way to build ambitious front-end applications with powerful reactive programming patterns and an intuitive HTML-based templating language.
This workshop will give you a jumping-off point for large front-end applications using Vue with blazing-fast dev tools like esbuild, rollup, and vite. You’ll learn the latest tools and patterns Vue offers for building reusable and testable UI code. You’ll get hands-on practice scaling an app to multiple pages using routing and state management libraries. At the end of this workshop, you’ll be ready to build complex and responsive front-end applications.
Background
We recently took on a client that needs an ambitious upgrade from a custom internal jQuery-based framework to Vue. I got to dig deep into Vue while designing a strategy to refactor and modernize the app incrementally.
I have some deep experience with angular and react, but this was my first professional foray into Vue. I was impressed! The new composable concepts in Vue 3 felt very familiar to me: they’re like React hooks with fewer foot-guns. The templating language in Vue felt a lot more approachable than JSX. A lot of concepts I knew from other frameworks had equivalent patterns. It was easy and fun to work with.
I was also really impressed with the recommended build tools. We couldn’t use the vue-cli tooling due to integrating with a legacy framework, but the underlying tools (vite, esbuild, rollup) proved excellent. Hot reload was instant, the builds were fast, and we could iterate quickly.
I had to onboard multiple engineers from our team to be efficient in Vue. We had previous experience in angular and react, and everyone I onboarded could translate their existing skills quickly. I learned a lot going deep on Vue, and I wanted to share that with conference attendees.
Agenda
This is a four-hour workshop session, and I look forward to spending time with attendees digging into some introductory concepts. I’ll have an example app we’ll build together that includes demonstrations and exercises to reinforce the concepts I’m teaching.
I intend to cover:
- Creating a new app
- Creating components and using the templating language
- Using composables to share logic and state between components
- Routing and navigation
- Loading data
- Managing shared state
You can still get tickets at https://codemash.org — I hope to see you there!