← Blog

React vs the world

#JavaScript #Reactjs #web

The world

The world of JavaScript UI frameworks is going through major convergence. There are two main themes in this trend: Signals for reactivity and Vite for tooling.

First, Signals. Just a few days ago, almost out of nowhere, Svelte revealed “runes”, a new API for reactivity primitives coming in Svelte 5. In “Introducing runes” blog post, the Svelte team openly and proudly acknowledges that the new reactivity system that makes the new runes API possible is based on Signals:

Svelte 5’s reactivity is powered by signals, which are essentially what Knockout was doing in 2010. More recently, signals have been popularised by Solid and adopted by a multitude of other frameworks.

With runes, Svelte is finally joining the Signals family, which at this point includes basically every major modern framework:

  • Solid is the framework known for Signals. To my knowledge, it is Ryan Carniato, the creator of Solid, who first introduced and popularized the terms such as Signals and fine-grained reactivity since the late 2010s.1
  • Vue has had its version of Signals—long before the JavaScript community in general really heard of the term. It was initially buried under Options API as implementation details but later exposed via Composition API—ref(), computed(), watch(), etc.
  • Preact’s introduction of its version of Signals in September 2022 was a big news in the JavaScript community and likely what really started the spread of Signals.
  • Though Qwik is best known for innovations in areas other than reactivity, it has adopted Signals as early as in October 2022 and long before its 1.0 release in May 2023.
  • Angular—yes, even Angular has Signals. Angualr Signals was first introduced with the v16 release in early 2023 and is currently available for developer preview.

Almost contemporaneously, Vite has seen a huge growth in adoption and popularity, perhaps even moreso than Signals. As the speakers list of this year’s ViteConf shows, it has become a major cornerstone of today’s JavaScript ecosystem. Created by Evan You who also created Vue, Vite of course has long been powering the Vue and Nuxt ecosystem, but now it also serves as a foundation for many other frameworks and their ecosystems:

  • When it comes to adopting Vite, Svelte is no stranger—we might even consider it an early adoptor. In March 2021, Svelte switched to Vite 2 from Snowpack, which was still a serious contender at the moment, for developing SvelteKit.
  • Another early adoptor of Vite, Solid started the development of its official starter package and web framework SolidStart based on Vite in April 2021. Solid also offers a variety of Vite-based templates to get started with building Solid apps.
  • Qwik’s official starter CLI create-qwik creates a Vite-bsed app and Qwik City, the official Qwik meta-framework, comes as a Vite plugin—just like SvelteKit and SolidStart.
  • Angular 16 has added Vite support for development while Analog, an Angular web framework, is powered by Vite and its ecosystem.
  • Preact doesn’t have Vite-based web framework, but it’s official starter CLI create-preact is based on Vite.
  • Astro, a new bring-your-own-JS-framework web framework that has seen an astronomical success, is built on Vite. Notably, the same team behind Astro also built Snowpack and Astro originally used Snowpack, but it later switched to Vite.

React

What’s glaringly missing in this trend is the current heavyweight champion: React. While all other frameworks are, crudely speaking, slowly morphing into the same framework with different APIs, React continues charting its own path. And it does so despite no shortage of demands to do otherwise. Indeed, people have asked React to add both Signals and Vite. And, as anyone can guess, the answer to these requests has been a resounding no.

React’s apparent stubbornness is nothing new, however. Since the beginning, React has been doing React—following a vision it has set for itself and creating the world in its image.

The React documentary by Honeypot, released in February 2023, as well as the recorded live Q&A discussion, offers a good illustration of this. This retelling of history reminds us that React started by challenging many best practices of the time. Building UI with components that defy the “separation of concerns” between model and view (or by technology HTML-CSS-JS) and re-rendering the UI code as a whole rather than attempting to optimally target and update specific elements are good examples here.

Even after React won, it continued fighting the world—and this time, the world it helped shaped. It did so not because of any direct external pressure, but because its own vision has evolved. No one really asked for Hooks in 2018, just as no one really demanded concurrent rendering, <StrictMode>, and React Server Components in 2020 and onward.

This is not to say that the React team simply ignores user feedback. They do their best to respond, sometimes to the point of exhaustion and burnout. It’s just that their preferred response to such feedback takes the form of relentless education and persuasion, so that you too can see the light and think in React. No wonder why the new React docs site, launched in March 2023, is so good.

What’s next?

React vs the world will likely continue on. React will keep building on its vision of React Architecture. On the other hand, both Signals and Vite have garnered their respective critical masses and thus are here to stay—at least for a while. So the other players will keep their search for the optimal solution built on this common foundations.

That said, between the aforementioned two points of contention, I think Vite has a better chance of getting React’s seal of approval—if not directly, then via a new “fully React” framework built on top of it. As for Signals, the reactivity model it implements appears diametically opposed to the React model. In fact, as Dan Abramov of the React team states, React was the “fix” to the problem that was Signals. However, not everyone in the React team is as strongly opposed to the idea of embracing Signals—if not directly, then as “an implementation detail of an optimizing compiler”.2

Footnotes

  1. Ryan Carniato wrote a nice overview of how Signals came about. While he openly acknowledges that he didn’t invent neither the concept nor the terminology for Signals and fine-grained reactivity, his role in making them a thing in today’s JavaScript ecosystem and developer mind share cannot be overstated. ↩

  2. Actually, this blog post is several months too late to touch this topic, which had received a great deal of attention in earlier this year. Ryan Carniato’s “React vs Signals” is a great piece on that debate. ↩