2021 JavaScript Rising Stars

The TOP 3

The trendiest project of the year is zx, a brand new tool by Google to write simple Command Line scripts in JavaScript or TypeScript.

Basically it lets you embed any bash expression (ls, cat, git... anything!) in your code and await for the result using JavaScript template literals.

It includes utilities provided by several popular packages:

• node-fetch to make HTTP requests using the same API as fetch in the browser
• fs-extra to handle file system operations
• globby to match file names given user-friendly patterns

In second, Vite is a building tool that uses esbuild compiler to provide great performance. At the beginning it was linked to the Vue.js community but now it has setups for the main UI frameworks: React, Svelte, Lit.

Coming in third, Next.js keeps its position of leading "meta framework" for the React world.

Tauri

For fifth place, Tauri is a solution to build desktop applications using web technologies.

Compared to Electron it's written in Rust and it doesn't ship the Node.js runtime with every application. Version 1.0 was released in beta in May.

Special pick

It's not in the TOP 10 but Astro is one of the most notable projects of the year. Astro is a tool to build web sites that load faster because they ship less JavaScript.

The concept is close to static site generation (SSG) but the key difference is that Astro lets you include dynamic pieces of interactivity in your pages called "islands".

Different strategies can be applied to render dynamic components on the client-side:

• when the page loads
• when the page is idle if it's a low priority component (think tracking.)
• when the component is visible using the browser Intersection Observer API

One of best parts is that Astro pages can be built with a combination of HTML and components written with any framework: React, Vue.js or Svelte...

For the first time since we've ran JavaScript Rising Stars, React is the number one UI framework, but if we take into account the fact that Vue.js is split into two repositories (for the versions 2 and 3), Vue.js is effectively the leader.

The big change is the rise of Svelte that takes third, before Angular.

More and more tools or components include Svelte among the target frameworks (we mentioned Vite for example).

One of the major headlines of the year is that Rich Harris, the creator of Svelte is joining Vercel the team behind Next.js.

Like Next.js, Svelte has its own meta framework to build performant applications: SvelteKit.

In fifth, Solid is an interesting alternative to React. Components are written using JSX but it does not rely on the Virtual DOM like React does.

It has inspired mitosis, a tool to write and compile components targeting any framework: React, Vue.js, Angular, Svelte...

The main UI frameworks have their own "meta framework" to build modern and scalable applications, providing features like routing, server-side rendering, static generation of pages ahead of time, optimized builds for production...

• React has Next.js, the winner of the category, that can be considered as a pioneer in this space
• Vue.js has Nuxt, now split between versions for Vue.js v2 and v3
• Svelte has SvelteKit

Remix, a full stack framework to build React applications, is the newcomer of the category. It's one of the biggest stories of the year. It was created by the authors of React Router and it was only available to paying supporters until October.

The project got a lot of traction (and $3M in seed funding, which helps too!) since it was made public. Its motto is clear: "Web Fundamentals, Modern UX" as its APIs follow as much as possible the web standards (HTTP responses, form submissions...).

Here are two examples that blew my mind:

To handle form submission, you can just do... normal form submission. It seems obvious but developers are so used to writing event.preventDefault() to avoid the form submission. The best part is that it allows the form to work even if JavaScript is disabled! It's really interesting how Remix challenges behaviors we take for granted, "remixing" old principles with a new approach that focuses on both user and developer experience.

Also it handles nested routes in a very smart way, being able to load data needed by all the components on a given page in an efficient way, instead of generating a waterfall of HTTP calls that often leads to a lot of spinner indicators on the screen.

Besides these meta frameworks, in second, Nest is the leader of the more conventional server-side Node.js frameworks, not tied to any UI library.

Finally in third, Strapi is the leader of the "headless CMS", those applications that provide a rich dashboard to let users manage data and a modern API to let developers build anything from data. The latest version (4) provides a design system built on top of a React component library.

In 2021, the already existing trends have strengthened.

Native ES modules adoption continues. Vite has been widely adopted (faster than snowpack), leading to a new ecosystem of tools (like Vitest, a modern ES-based test framework) ES modules are also adopted in the Node.js ecosystem, but it's not always easy. TypeScript even delayed ES modules support in Node.js.

More frontend tools than ever are being built in other languages (see awesome-js-tooling-not-in-js), mostly for performance reasons.

Lee Robinson wrote that Rust Is The Future of JavaScript Infrastructure. Rust is particularly interesting because of its great performances and interoperability with JavaScript. NAPI-RS allows JavaScript and Rust to communicate with each other without any serialization cost. Next.js is betting on SWC, an extensible Rust compiler that allows them to port the most popular Babel plugins to Rust.

Parcel 2 has been released with a new Rust compiler. The Rome toolchain is also being rewritten in Rust, but one of its founders Jamie Kyle just left the company without much information.

Rust is clearly the leading non-JS language, but it's not the only one offering great performance: Bun is written in Zig. Turborepo and esbuild are written in Go. Note that Evan Wallace left Figma: it may give him more time to work on esbuild.

In the monorepo space, Lerna remains widely used but is not very well maintained. Nx, a monorepo tool that helps reduce build time significantly, has been growing fast. Its newer competitor Turborepo has benefited from great marketing after being acquired by Vercel.

One year of Vue 3's official release, we see the ecosystem is growing rapidly with a lot of great innovations.

New syntaxes like <script setup> in Vue 3 core takes the component authoring experience into a new level. The new VS Code extension Volar brings the first-class TypeScript support to Vue; a new state manager Pinia, which is built ground up with the new Composition API, becoming the successors of Vuex.

With Vite becoming the new default tooling of Vue, meta-frameworks like Nuxt 3, Quasar and VitePress are now using Vite as their default engine. Providing tremendous developer experience improvements and opening up many new gates for innovations.

The community also put many efforts on aligning Vue 2's DX to Vue 3 and making the migration process smoother. It was a great year for Vue devs to get huge improvements for both DX and performance of their apps. Excited to see what is upcoming in 2022!

React 18 should be released very soon but it's already possible to play with the RC version and benefit from some out-of-the-box improvements such as Automatic batching for fewer renders or SSR support for Suspense.

React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Some concurrent features such as startTransition will be available in the 18.0 initial release, but we'll have to wait a bit more to get the Server Components mentioned in the previous edition of JavaScript Rising Stars.

React continues to progress both in the browser and the server, and with React Native's many-platform vision, it is becoming more and more ubiquitous.