Welcome to the 6th edition of the JavaScript Rising Stars, our annual round-up of the JavaScript landscape.

If you took a break to escape the JavaScript fatigue in 2021, you are in the right place!

We'll be talking about meta frameworks, the need for speed and all-stars are joining forces at tech companies.

But first, we have a new "champion" this year, that no one expected, and it's a command line tool!


The following graphs compare the number of stars added on GitHub over the last 12 months. We analyzed projects coming from Best of JS, a curated list of the best projects related to the web platform. Note that you can click on a project to get more info.

Table of Contents

  1. Most Popular Projects Overall
    zxViteNext.jsReactTauriTailwind CSSVS CodeSlidevNocoDBVue.js
  2. Front-end Frameworks
    ReactVue.jsSvelteAngularSolid
  3. Node.js Frameworks
    Next.jsNestStrapiRemixNuxt
  4. Build Tools
    ViteesbuildswcTurborepoNx
  5. Vue Ecosystem
    SlidevVue Element AdminHeadless UINaive UIvue-next
  6. React Ecosystem
    Next.jsAnt DesignMaterial UIRemixreact-use
  7. CSS in JavaScript
    vanilla-extractStyled ComponentsStitchesTwinEmotion
  8. Testing
    PlaywrightStorybookCypressPuppeteerJest
  9. Mobile
    React NativeIonicExpoQuasarFlipper
  10. Desktop
    TauriElectronSvelte NodeGUINodeGUINeutralino
  11. Static Sites
    Next.jsAstroDocusaurusNuxtNuxt 3
  12. State Management
    ZustandXStateJotaiRecoilPinia
  13. GraphQL
    PrismaHasura GraphQL EngineRedwoodGatsbyGraphQL Code Generator
  14. Conclusion

Most Popular Projects Overall

1
zx

zx

A tool for writing better scripts
+24.3k☆

Trends in 2021

N/A
N/A
N/A
N/A
11.6k
1.1k
934
3.5k
1.2k
299
374
519
J
F
M
A
M
J
J
A
S
O
N
D

GitHub data

Created
2021-05
Total stars
25.0k☆

Links

2
Vite

Vite

Next generation frontend tooling. It's fast!
+21.4k☆
3
Next.js

Next.js

The React Framework
+19.7k☆
4
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+18.5k☆
5
Tauri

Tauri

Build smaller, faster, and more secure desktop applications with a web frontend.
+18.0k☆
6
Tailwind CSS

Tailwind CSS

A utility-first CSS framework for rapid UI development.
+18.0k☆
7
VS Code

VS Code

Visual Studio Code
+17.2k☆
8
Slidev

Slidev

Presentation Slides for Developers (Beta)
+16.9k☆
9
NocoDB

NocoDB

Open Source Airtable Alternative
+15.6k☆
10
Vue.js

Vue.js

A progressive, incrementally-adoptable framework for building UI on the web
+14.3k☆

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

Front-end Frameworks

1
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+18.5k☆
2
Vue.js

Vue.js

A progressive, incrementally-adoptable framework for building UI on the web
+14.3k☆
3
Svelte

Svelte

Cybernetically enhanced web apps
+13.6k☆
4
Angular

Angular

The modern web developer’s platform
+9.3k☆
5
Solid

Solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+8.5k☆

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

Node.js Frameworks

1
Next.js

Next.js

The React Framework
+19.7k☆
2
Nest

Nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8)
+10.1k☆
3
Strapi

Strapi

Open source Node.js Headless CMS to easily build customisable APIs
+9.6k☆
4
Remix

Remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
+9.4k☆
5
Nuxt

Nuxt

The Intuitive Vue(2) Framework
+6.2k☆

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.

Build Tools

1
Vite

Vite

Next generation frontend tooling. It's fast!
+21.4k☆
2
esbuild

esbuild

An extremely fast JavaScript and CSS bundler and minifier
+12.9k☆
3
swc

swc

A super-fast compiler written in rust
+8.8k☆
4
Turborepo

Turborepo

The High-performance Build System for JavaScript & TypeScript Codebases
+4.5k☆
5
Nx

Nx

Smart, Fast and Extensible Build System
+4.3k☆

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

Guest Writer slorber

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.

Vue Ecosystem

1
Slidev

Slidev

Presentation Slides for Developers (Beta)
+16.9k☆
2
Vue Element Admin

Vue Element Admin

A magical vue admin
+9.7k☆
3
Headless UI

Headless UI

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
+8.6k☆
4
Naive UI

Naive UI

A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.
+7.3k☆
5
vue-next

vue-next

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+6.7k☆

Guest Writer: Anthony Fu

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

Guest Writer antfu

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 Ecosystem

1
Next.js

Next.js

The React Framework
+19.7k☆
2
Ant Design

Ant Design

An enterprise-class UI design language and React UI library
+10.9k☆
3
Material UI

Material UI

A robust, customizable, and accessible library of foundational and advanced components, enabling you to build your own design system and develop React applications faster
+10.0k☆
4
Remix

Remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
+9.4k☆
5
react-use

react-use

Collection of essential React Hooks
+9.3k☆

Guest Writer: Manuel Vila

Manuel is an independent JS/TS engineer and open source contributor. He created Layr and CodebaseShow.

Guest Writer mvila

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.

CSS in JavaScript

1
vanilla-extract

vanilla-extract

Zero-runtime Stylesheets-in-TypeScript
+4.4k☆
2
Styled Components

Styled Components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
+3.5k☆
3
Stitches

Stitches

CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
+2.8k☆
4
Twin

Twin

Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
+2.3k☆
5
Emotion

Emotion

CSS-in-JS library designed for high performance style composition
+2.0k☆
Loading
Loading
Loading
Loading
Loading
Loading

Conclusion

To build modern sites and applications, it seems we have entered the era of the meta frameworks: Next.js, Nuxt, SvelteKit... and the promising newcomer Remix.

Famous members of the JavaScript community joined tech companies to work on these solutions:

  • Kent C. Dodds joined the Remix team and speaks highly about how it enables him to "build amazing user experiences and still be happy with the code".
  • It seems Vercel hired everyone else: Rich Harris, the creator of Svelte, Sebastian Markbåge from the React core team and Jared Palmer and its now open source solution to manage monorepos (Turborepo)... it looks like a Dream Team!

About the tooling, the need for speed led to a shift towards languages like Rust and Go instead of JavaScript.

Lee Robinson made a strong statement: Rust Is The Future of JavaScript Infrastructure and we mentioned the rise of Rust language several times:

SWC is also used by Deno, the server-side runtime that was the winner in 2020. And we can tell that Deno is still a thing! It keeps receiving enhancements and Deno Deploy was made public: it's a solution to build and deploy serverless functions that run at the "edge", close to the users.

Speaking of serverless functions, edge computing was also an important theme in 2021. We have solutions like Vercel Edge Functions, CloudFlare Workers or Netlify Edge to run backend code close to the users. Meta frameworks like Next.js or Remix take advantage of edge computing, making the integration of backend code in React applications a breeze.

Are we going to enter the Golden Age of JavaScript full-stack applications in 2022?

Authors

Available Translations

日本語

Español

한국어

中文