What to Expect from Vue in 2023 and How it Differs from React
Evan You’s State of the Vuenion
It’s in this context that I was curious to see what Vue creator Evan You said in his annual “State of the Vuenion” presentation at this month’s JSworld Conference in Amsterdam, held both in person and virtually.
You began his keynote by noting that the last time he was physically at JSworld was three years ago, due to the pandemic. So he listed off the things that either didn’t exist or weren’t stable yet in the Vue ecosystem three years ago: Vue 3 “was not stable” and Vite (a build tool), Volar (a “framework for building embedded programming language tools”) and Pinia (“state management library for the Vue ecosystem”) didn’t exist.
“We essentially created a whole new ecosystem around Vite,” he remarked, “and along with that, we have all these new exciting things built on top of it — not just within the Vue ecosystem, but even connecting all the other frameworks as well.”
He praised the current Vue tool ecosystem, headlined by Nuxt, the primary framework for building Vue.js applications. But the main focus for 2023, he said, will continue to be making Vue 3 stable. Even though Vue 3 became the new default last February, one year ago, Vue 2 is still being used by what You termed “legacy projects.” He noted that much of the adoption of Vue 3 has been by “new projects.”
“We’re still in this period of transitioning from v2 to v3,” said You, pointing out that a lot of big projects are still on Vue 2 or making plans to move to Vue 3.
Vue 3 and its New Approach to Virtual DOM
After discussing the various administrative changes planned for Vue 3 this year, You took some time to explain the differences in how Vue 3 “renders stuff” compared to Vue 2. “The rendering strategy has been changing over time,” he noted, particularly in regard to the way it deals with the virtual DOM (VDOM).
Before I get to that, a quick primer on VDOMs that I found useful when trying to wrap my head around Vue 3. Later in the day at JSworld, Marc Backes did a session entitled “Let’s Build A Virtual DOM.” The following three slides sum up beautifully what a VDOM is and its purpose within a framework like Vue. (VDOMs were popularized by React, but the concept was adopted by many other frameworks too, including Vue.)
Backes also showed the following visual representation of the rendering pipeline used by Vue (it’s a more colorful version of the same diagram in Vue’s documentation):
Back to Evan You’s presentation now. In Vue 2, he said, “We were using a pure virtual DOM, which means it’s […] similar to what React uses, and it doesn’t really do any compile-time optimizations — well, a little bit, but really not much.”
“So at the component tree or the app level,” he continued, regarding Vue 2, “we achieve fine-grained updates, by having each component track its own dependencies.”
The downside of this is the virtual DOM overhead, which he described as “the cost of recreating virtual DOM nodes and then walking through that tree for diffing.” He added that “Vue 2 is constantly paying that overhead.”
To solve this problem, they took a different approach with Vue 3. You described it as a “compiler-informed virtual DOM,” meaning it does “a lot more optimization at compile time.”
VDOM intricacies aside, a big part of Vue’s growing popularity is its “single-file component” (SFC) approach. Vue defines a SFC as “a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.” Elsewhere, Vue calls the SFC “an HTML-like file format.”
In a 2017 interview we did with Damian Dulisz, a member of the Vue.js core team, he said that the SFC format “makes the code so much easier to understand and reason about.”
The New Stack’s own Director of Engineering, Aaron Ban, is a fan of Vue primarily because of the SFC approach. He likes the “clean organization” it offers and thinks it’s a great example of modularity. “It’s actually a difficult discipline to force yourself to draw the tight cutlines necessary to do SFCs correctly,” he told me. But he thinks it’s an antidote to the damaging “move fast and break things” mentality that many developers have learned over the past decade or so. That mentality has encouraged bad habits, he says, such as when developers “not bother to draw proper cutlines and ‘just get things working’ with the idea that ‘we’ll fix it later.’”
Ban also likes the look of Svelte and Lit, two other frameworks that offer single-file components.
SFCs are not universally loved by developers. Even the Vue.js documentation acknowledges this: “Some users coming from a traditional web development background may have the concern that SFCs are mixing different concerns in the same place — which HTML/CSS/JS were supposed to separate!”
In response to this objection, Vue argues that the SFC approach “actually makes the component more cohesive and maintainable.”
If Evan You’s JSworld keynote is anything to go by, 2023 won’t hold any surprises for Vue developers. It’ll continue to be about getting developers to upgrade from Vue 2 to Vue 3, along with further iteration on its ever-growing ecosystem.