Table of Contents
Most Popular Projects Overall
The TOP 3
Basically it lets you embed any bash expression (
git... anything!) in your code and
It includes utilities provided by several popular packages:
- node-fetch to make HTTP requests using the same API as
fetchin 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.
For fifth place, Tauri is a solution to build desktop applications using web technologies.
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...
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
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.
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 ever are being built in other languages (see awesome-js-tooling-not-in-js), mostly for performance reasons.
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 Element Admin
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!
Guest Writer: Manuel Vila
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 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.
Hasura GraphQL Engine
GraphQL Code Generator
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.
- 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!
- Tauri is built in Rust
- Next.js latest version (12) includes swc compiler, written in Rust
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.