What does Vue 3 mean?

Vue 3 stable release is here, at last! This release for me was one of the most ancitipated events in 2020—that is, before all the madness that is the year of 2020 really began. 😵 But, hey, Vue 3 is here, and I’d love to talk about it. Instead of simply enumerating its new features and improvement over Vue 2 (and there are many!), however, I’d like to use this opportunity to reflect on the current state of frontend web development and speculate on its future.

Let me start with where I am as of this writing. Since switching jobs earlier this year, I’ve been primarily writing React at my job and, although far from being an expert, I now feel very much at home doing so. Defining the UI structure using JSX/TSX has grown on me, and Hooks API feels like a natural way of organizing component state and logic.

In the meantime, I also continued exploring alternative approaches to building web UI. For instance, I recently got started with Svelte and built a simple Linktree-like web application to support my partner’s podcast adventure. While this app does not take full advantage of what Svelte offers, I’m beginning to understand its charm. In addition, I’ve been keeping an eye out for and reading about other projects exploring new and different ways to build web UI, including Solid, Apline, Moon and Crank.

To be honest, I have no plan to try out all of these projects. But I do enjoy reading their docs and related articles presenting visions and tradeoffs that are distinct from those of the mainstream solutions.¹ And yes, such presentations often make direct references and draw comparisons to the mainstream solutions, which in turn helps me to better understand the mainstream solutions I use on a daily basis, both their features and their limitations.

Back to Vue 3. I think it would be interesting to put this release in the context of the upcoming release of React 17, especially since its first release candidate is just made available. More specifically, Vue 3 seems a lot like playing catch-up with respect to React. For instance, it is openly stated that Vue Composition API took major inspiration from React Hooks API. The same can be said for <Suspense> for handling async components,² “fragment” support for allowing multiple root nodes in a component, and <teleport> for rendering UI elements at an arbitary location in the DOM tree. While it may not be the case that React was first to introduce all such features, they have been available in React for quite a while.³ Oh, and people were writing React code in TypeScript since 2015.⁴

This is not to say that Vue 3 is only about catching up with React: Vue 3 brings other features and optimizations specific to Vue, making it a genuienly better framework for users, maintainers, and library authors. Nonetheless, it is difficult to argue that Vue 3 is bringing something radically new and revolutionary to the table. Of course, this has never been the goal for Vue, which is more concerned with striking the right balance across multiple axes. While this focus on balance compels Vue to take a reletively conservative (even passive!) stance with respect to making innovative changes, such conservatism is not an inherently negative thing especially for a project that now has well over a million users.

In fact, the Vue team has shown that they are very careful and intentional with selecting new features to implement. For instance, React’s “Concurrent Mode” has been a hotly debated topic in the frontend web development world since 2018. While Concurrent Mode is still—two years later!—flagged as experimental with “more work to do”, this didn’t stop other communities from discussing or sometimes even demanding its adoption into their respective frameworks. In case of Vue, the decision was made not to adopt React-like concurrent mode in Vue 3. You can see this GitHub Issue comment by Evan You for details, but TL;DR: “The trade-offs simply don’t seem worthwhile for Vue 3.”⁵ ⁶

So, what does Vue 3 mean? Let me first note that the highlight of the upcoming React 17 release is “no new features”. While this can mean a lot of different things, I see it as a sign that the modern web UI development, which React pioneered and led ever since, has reached a point of maturity. The general convergence of their core features between React and Vue now achieved by the release of Vue 3 further substantiates this point. In other words, in my view, Vue 3 marks no Next Big Thing in sight and a shift of focus to incremental improvement: smaller bundle size, performance optimization, more intuitive API, better tooling, etc.

And I welcome this. Stability is a virtue especially for a core piece of technology, and should not be mistaken as stagnation. On the contrary, stable core technology can open up even more room for innovation in the derived work, e.g. projects like Next.js, Gatsby, Nuxt.js, Gridsome, Blitz.js, Redwood and many more that build on top of React, Vue, etc. Therefore, I expect that the frontend web development space will remain just as dynamic and exciting if not more. Let a thousand metaframeworks bloom!

In particular, I find the writings of Ryan Carniato, the author of Solid, highly informative. Many of his articles go well beyond mere advertisement for his work, which is typical for the writings of library authors, and provide in-depth discussion on the modern client-side UI programming with a focus on reactivity. My current favorites include “What Every JavaScript Framework Could Learn from React” and “Exploring the state of reactivity patterns in 2020”. ↩
Official documentation on <Suspense> is currently not available as of this writing. ↩
For instance, both portals and fragments were first introduced in React 16.0, released in September 2017. Improved <React.Fragment> was then made available two months later. And <React.Suspense> was introduced in React 16.6 in October 2018. ↩
For example, this StackOverflow page. ↩
This may appear as somewhat of a contrast with how the React team often almost heroically push forward with introducing changes they consider necessary—such as Hooks API and more recently, Concurrent Mode. But then, we all remember that not everyone in the Vue community was happy when the Composition API, then called function API, was first introduced as an RFC. ↩
In fact, unlike many other innovations led by React, Concurrent Mode doesn’t seem to be catching on in general. Even a seasoned React user like Jared Palmer (author of Formik) has expressed concerns about how Concurrent Mode would “make React even more difficult to reason about.” In case of Svelte, its author Rich Harris’s stance is that of “improving raw performance is the most reliable way to improve user experience across the board.” See this related Twitter thread which includes the quote as well as an exchange between Rich and Dan Abromov of the React core team on ths topic. ↩

Footnotes