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

At position number 2, 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.

At position number 3, Next.js keeps its position of leading "meta framework" for the React world.

Tauri

At position 5, Tauri is a solution to build desktop applications using web technologies.

Compared to Electron it's written in Rust and it does not ship Node.js runtime with every application. The version 1.0 was released in beta in May.

Special pick

It's not in the TOP 10 but Astro is one of the 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 big 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 in 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

The best 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 run the JavaScript Rising Stars, React is the UI framework number one 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 still the virtual leader.

The big change is the rise of Svelte that takes the spot number 3, before Angular.

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

One of the big news of the year is that Rich Harris, the creator of Svelte is joining the tech company Vercel whose most successful project is next.js.

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

At the position number 5, 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, number 1 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, it can help 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...).

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 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, at the position number 2, Nest is the leader of the more conventional server-side Node.js frameworks, not tight to any UI library.

At the position number 3, 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 components library.

Guest Writer: Sébastien Lorber

Sébastien is a React early adopter, working with Facebook Open-Source on Docusaurus.

He runs a weekly newsletter about React and React Native: This Week in React

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 even 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 not the only one offering great performances: 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.

Guest Writer: Anthony Fu

Core team member of Vue.js, Vite and Nuxt. Creator of VueUse and Slidev.

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 makes 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!