TNS
VOXPOP
You’re most productive when…
A recent TNS post discussed the factors that make developers productive. You code best when:
The work is interesting to me.
0%
I get lots of uninterrupted work time.
0%
I am well-supported by a good toolset.
0%
I understand the entire code base.
0%
All of the above.
0%
I am equally productive all the time.
0%
Frontend Development

What to Expect from Vue in 2023 and How It Differs from React

Vue.js creator Evan You explains how Vue 3 is different from Vue 2, and in particular how its use of the Virtual DOM has evolved.
Feb 16th, 2023 6:18am by
Featued image for: What to Expect from Vue in 2023 and How It Differs from React

In a documentary two years ago about the JavaScript framework Vue.js, it was described as a kind of indie alternative in the JavaScript ecosystem, compared to the two leading frameworks — Facebook’s React and Google’s Angular. “It just feels less corporate […] more grassroots,” is how one of the talking heads described it.

In comparison to the trendiest JavaScript framework, React, the most noticeable difference is that Vue is supported by web standards advocates. A clue as to why is in Vue’s own documentation, which states that “in React, everything is just JavaScript. Not only are HTML structures expressed via JSX, the recent trends also tend to put CSS management inside JavaScript as well.” Vue, on the other hand, says it “embraces classic web technologies and builds on top of them.” (Note: Those quotes were taken from the Vue 2 documentation; I couldn’t find this comparison in its latest v3 documentation.)

There’s been a lot of kickback in recent years against the JavaScript-heavy approach of React and the frameworks that use it — for example, Next.js — and a movement toward what more modern frameworks like Vue, Svelte and Lit offer: building on top of “classic web technologies,” as Vue put it.

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.”

Vue ecosystem

Vue ecosystem

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.)

Virtual DOM

What is a Virtual DOM

Why use a Virtual DOM

Why use a Virtual DOM

Building a Virtual DOM

Building a Virtual DOM

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):

Vue Rendering Pipeline

Vue Rendering Pipeline

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.”

Vue 2 rendering

Vue 2 rendering

“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.”

Vue 3 rendering

Vue 3 rendering

Single-File Component

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.”

Conclusion

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.

Vue may not be very newsworthy for tech publications such as ours, but it’s worth touching base with a web standards-compliant JavaScript framework like this every year or so. We’re certainly enjoying its continued evolution.

Group Created with Sketch.
TNS DAILY NEWSLETTER Receive a free roundup of the most recent TNS articles in your inbox each day.