Interview with Evan You - Insights on Vue 3 and Developer Experience

We spoke with Evan You, creator of Vue.js, ahead of the Vue Amsterdam 2022, the largest conference on the framework, that took place in June.

During this fruitful conversation, Evan took us through the origins of Vue in 2014 and some highlights of Vue 3.0.

The initial version of Vue was really designed to lower the barrier to entry. We made it easy to adopt, integrate into existing systems - we still stick to this approach and value it a lot. Over time, we slowly add pieces to support more advanced projects like Single Page Applications routing, state management, and TypeScript support.

Evan You Creator of Vue.js

Evan also covered technical ground, discussing the influence of TypeScript on Vue, and gave his take on the future of development at large.

And yes, we ask him: “Looking back, would you change anything?”

The interview is part of the free Vue Report Amsterdam 2022, where experts join us to cover the state of Vue, update highlights, technical case studies, and more.

State of Vuenion 2022 - Interview With Evan You

What has changed in Vue 3 since the last update?

We’ve just shipped our brand new documentation in February 2022 which essentially marked the completion of the soft launch process.

When Vue 3 was released it was really just the core, but Vue as a whole has grown into the full ecosystem over time.

The framework consists of a library like a router, state management, build tooling, dev tools, extension, IDE support. All of these things took a lot of effort to bring up to date.

So now we have a new version of basically everything. We shipped brand new docs, replaced Vuex with Pinia, the latest recommendation for state management, our build tools are now powered by Vite. Our new IDE extension is Volar which provides much better TypeScript support and experience. We also shipped important DX improvements like <script setup>, and have more down the line.

Source: Vue Documentation Page

How has TypeScript influenced the development experience with Vue? 

TypeScript is obviously on the rise so any modern framework has to be designed with it in mind. Even if you don’t use TypeScript Volar is able to leverage Vue typing and give you hints, removing this mental burden of remembering what type of variable it is. All the type inference and checks also work in the template. These simple mistakes happen when you don’t have type checking. Using TypeScript also makes you confident when refactoring a large codebase because you can easily see changes - the tools will immediately show the errors for you to fix. 

Especially in a team environment working on a large project, using TypeScript with Vue will greatly improve the robustness of the code that you write every day.

It’s been 1,5 years since a stable version of Vue 3 made it the default. How did the process look? 

For the initial release of Vue 3, we rewrote everything with TypeScript but it is only now complete as Volar became the official extension. The documentation was completely revamped. All of the sections were either revised or rewritten and they work with Options API and Composition API and allow you to toggle between them. So the learning experience and day-to-day experience got upgraded. Each piece was a project on its own which is why the whole process took so long to finally get everything in place. Now we can say that Vue 3 is ready. 

Is such a deep transition process necessary?

It’s not always necessary but when we think of upgrading, there’s always a tradeoff between building upon the existing codebase with incremental improvements (and building more technical debt along the way) or doing a big-bang rewrite. 

Basing on Vue 2 codebase and making sure everything’s 100% compatible, we would carry along the baggage of a lot of libraries that relied on internal behavior that’s specific to Vue 2. If we carried with it forever, it would seriously limit the amount of innovation we could implement in the long run. 

So we felt like a big-bang rewrite is a right direction for us.

The situation with Vue 3 was sacrificing some things in the short-term and breaking some libraries but it was the cost we were willing to pay in order to get rid of the past baggage. Now we have a clean state and it will pay dividends down the road.

Although React or Ember almost seamlessly introduce new versions, it causes a lot of maintenance overhead on their side. They have a good system of slowly adding new features, phasing out the old ones, which we can learn from. But at the end of the day, there’s no absolutely correct answer in engineering. When it comes to upgrading, it’s about the trade-offs that you are willing to make. 

Looking back, would you change anything?

We probably could have done a better job but I’m not sure we would have achieved the same level of improvement. That’s the tradeoff here. I would probably focus more on reducing the breakage of some small edge cases, small behavior mismatches that we only discovered after we started rolling out Vue 3. We would have tried to cover it a little bit better. But it’s all in hindsight - you can’t foresee some things until they happen.

How will Vue 3 affect businesses and why should they make a shift? 

I would suggest evaluating the situation on a case-by-case basis. If you have a greenfield project, it’s Vue 3 all the way. It doesn’t make sense to stick to Vue 2 anymore with everything new in place. Nuxt 3 will go stable in a few months which is another reason for transition. 

With an existing project in Vue 2 however, businesses still need to weigh the pros and cons of the upgrading. If Vue 2 works and it works well, making a change might not be a cost-effective solution. It really depends on how much you want to leverage the new features. Vue 2 with Options API is still completely viable, and we plan to make it easier to use Composition API / <script setup> easier in Vue 2 with 2.7. But if you feel like switching to Composition API now will objectively improve productivity, don’t hesitate to change.

Source: Vue 3 Migration Guide

Vue is used for all types of applications and company sizes which shows it answers real-life cases. How did you work on making the framework so universal? 

The initial version of Vue was really designed to lower the barrier to entry. We made it easy to adopt, integrate into existing systems - we still stick to this approach and value it a lot.

Over time, we slowly add pieces to support more advanced projects like Single Page Applications routing, state management, TypeScript support. 

It’s been a long journey since 2014, with lots of challenges but every time we added something, we tried to sustain the core experience of using Vue. At first, we had more users with simple use cases and smaller applications. Along with more features and tooling, the pool of Vue users grew but initial users stayed and can still use it the way they like.

So I guess that's our secret sauce - to cover the full spectrum. 

How do you feel five years after the first State of Vue? Back then, you defended that Vue is no longer a “one-man army project”. What is Vue accused of in 2022? 

I don’t really think people “accuse” us of anything anymore. If we are talking about complaints, there are still areas in TypeScript support that can be improved. We’ve done a pretty good job supporting template expressions. The only part we’re still working on is scoped slots and generic components which are generally rare use cases, relevant to really advanced developers. We’re trying to cover it but it won’t be a deal-breaker for most users.

Currently, the world of frontend frameworks looks quite stable and differences are rather little. Do you think that there is still room for something new in this world which will change the way we think about the front-end?

There are a few new things worth mentioning like Svelte and Solid, especially the way they leverage the compile time optimization. I think frameworks moving more into a compiler is a general trend. What I take away here is the “be a smart compiler” approach. Vue has already done a lot in this direction, but also still has a lot of further potential to be unlocked.

Another aspect is the new wave of innovation, experimentation happening in full-stack frameworks about reducing the overhead of server-rendering and hydration.

When we’re in a full-stack environment, there are lots of questions about how to leverage both server and client to make the initial load more efficient, ship less out and do less hydration work. We’re exploring it as next in line.

Let’s look broader than Vue, what major challenges are waiting for the frontend world or even web development?

When we look at the web development world, there are various apps there - simple landing pages, fully interactive apps, backend dashboards which are very complicated so you don’t even expect it to load fast. There’s also this performance-sensitive case like e-commerce. In general, the challenge is to balance developers’ efficiency and the end performance. In most of these areas, we’ve reached a pretty good place, except for content-intensive e-commerce. 

We’ll need more vertical solutions that could handle both the backend and frontend. That’s where you can start doing interesting things.

We need to stop thinking from a pure client-side perspective or a pure backend. 

We already see some new things here like Remix or Qwik. A lot of these require controlling from a compiler to the server to the client. And all of them have to play together to give you a fully integrated solution that’s optimized end-to-end. You still write relatively easy code and get optimal performance at the end. This is going to be the biggest challenge - which solution can best integrate all three parts together? I think this is a direction where we can work closely with the Nuxt team and other members in the Vue ecosystem to explore.

Let’s look 5 years into the future. How do you see Vue? 

I tend to think of Vue as an ever-evolving platform.

We probably won’t do a “Vue 2 to 3” type of upgrade in the next five years because Vue 3 is a solid enough foundation to build upon for quite a while. We’ll continue experimenting with the compilation strategy as the advantage of Vue is a really flexible reactivity system. 

We have a compiled single-file component and it can be compiled into different outputs. You can change the output and the source code stays the same. We hope for users’ experience to be stable throughout this time. From the development experience perspective, we want it to stay stable, but the compiled approach allows us to potentially ship big improvements under the hood. That’s our goal.