2020 JavaScript Rising Stars

2020 is a very special year for many reasons. The most important one: for the first time in 5 years the overall winner of the Rising Stars is not called Vue.js but Deno... what a surprise!

Deno is a JavaScript runtime from the creator of Node.js, Ryan Dahl.

It’s often considered as the sequel of Node.js as it fixes or improves a lot of points, taking advantage of 10 years of experience and iterations with Node.js.

Among the main features:

• TypeScript compiler is included by default (but you can write code in regular JavaScript)
• No centralized package manager, any JavaScript dependency can be loaded from any URL
• The “standard library” provides solutions for common needs that usually require the installation of packages in Node.js
• Deno uses as much as possible standards from the web (Example: the Fetch API)
• Files imported using the ECMAScript modules
• Built-in test runner and debugger

The ecosystem around Deno is quite young but expect things to change a lot, given the buzz around Deno.

The success of Deno confirms 2 heavy trends:

• The rise of TypeScript language, in both frontend and client sides
• The rise of ES6 modules imported on the fly by solutions like Snowpack, check the new faces of the "Building Tools" section

Vue.js and React keep fighting hard at the top of the Front-end Frameworks category.

Behind them, Angular regains the third position, switching its 2019 position with Svelte.

The new face in the TOP 5 is Alpine.js, a minimalist reactive framework for the browser, from the creator of Laravel LiveWire.

It borrows ideas from both Vue.js and Angular: custom HTML directives, two-way binding...

It's very easy to check it using with a good old <script> tag added to an HTML page, no building process is needed, everything can be done right from the HTML mark-up so it may be the perfect solution to enhance quickly an existing web page without having to include a full-blown framework.

Being a very lightweight solution to bring interactivity to a web page, it plays well with modern frameworks like Elixir Phoenix. There is even a stack called PETAL that includes both Alpine.js and Tailwind CSS, more on that later...

We have 2 types of projects that dominate the Node.js Frameworks category.

On one hand, full-stack frameworks like Next.js and Nuxt are both opinionated about how to build your application as they bring React and Vue.js to the server-side.

On the other hand, we have more classic options that run only in the server like Nest (the leader last year) or Fastify.

Like in 2018, the category is led by Next.js. In the beginning, it was made famous as a solution to render React applications on the server. Now it's the leading solution to build full-stack web applications with React.

The latest version provides features such as Incremental Static Regeneration that brings the best of the dynamic and static worlds, making it a great fit for a lot of use cases.

About the full-stack frameworks, Blitz and Redwood are the 2 new contenders that aim to provide the best developer experience to build complete web applications.

It's interesting to see that Express, born 11 years ago is still relevant in the JavaScript landscape.

Guest Writer: Lee Robinson

Lee Robinson is a developer, writer, and creator who works at Vercel as a Solutions Architect.

The theme of the React ecosystem in 2020 was stability. While React 17 introduced no breaking changes, it laid the groundwork for the future: React Server Components.

React Server Components will change how we build React applications by reducing client bundle sizes and improving boot time. Further, they will simplify data fetching and access to data sources like databases and file systems.

Next.js has grown into the most popular solution for building React applications. Its hybrid approach will be the first application of React Server Components.

Supporting libraries like React Query, Recoil, and React Hook Form have matured and evolved around hooks. Each simplifies a piece of React development. When combined with polished component libraries, React developers have more tools than ever.

The biggest news in the Vue.js community is the release of version 3.

It comes with the new Composition API that addresses several limitations of Vue.js 2:

• it was hard to organize code by logical concern inside components
• it makes easier to reuse code across components (with Vue 2, mixins, mixing factory and scoped slots were not optimal)
• it has a better TypeScript support

Check the migration guide for more details about the changes introduced by version 3.

Also a new web building tool Vite was created in 2020. Powered by ES modules, it's the fastest way to get started with a Vue.js application from the command line.

The top 5 Angular projects remain mostly the same as last year, apart from a new contender at number 3.

Scully is a static site generator which brings Angular to the Jamstack. The project was launched in December 2019 and has great documentation to help you get started.

Angular had three major releases in 2020.

Version 9 was released in February. The main change was moving to the Ivy compiler which brought smaller bundle sizes and many other build improvements. Version 10 and 11 came out later in the year.

A significant focus for the Angular team in the second half of the year was to listen to the community. The team made a big effort to triage issues and PRs to understand and address the needs of the community. They also released a roadmap to share what the team is working on and what they have planned for the future.

Guest Writer: Sébastien Lorber

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

2020 was a great year for build tools, we have seen many new trends.

Snowpack and Vite bet on the future with an ES modules first approach: they do not bundle your code in dev, have extremely fast feedback loops, and fallback to bundling only for production (until browser support increase).

swc and esbuild leverage Rust and Go to have incredible performances, both supporting TypeScript.

Webpack is often described as too complex, and simpler alternatives like Parcel and Rollup have matured. Webpack remains the de-facto build tool and its new caching layer could significantly improve your build performance.

Monorepos are becoming mainstream: Yarn and Lerna are widely used, and npm 7 joined the party.

Personal picks to watch in 2021: Rome, Toast, Turborepo

Compared to last year, we added this section to put emphasize on the success of Tailwind CSS and its "utility first" approach.

Compared to more traditional CSS frameworks like Bootstrap or Bulma, it provides naming conventions to let developers style pages and components by composing class names.

According to the State of CSS beautiful report, it's the CSS framework that has the highest ratio of satisfaction.

Version 2 was released recently and it brings a lot of new features including the support of the beloved "dark mode".