JavaScript development tools in 2022

Original: https://transitivebullsh.it/javascript-dev-tools-in-2022

A breakdown of the most important development tools every JS/TS developer should know in 2022, including the most relevant trade-offs, and some personal advice.

In the world of software engineering, it is very important to have a clear understanding of the tools used.

But JS tools are always changing fast, and 2022 is no exception.

So I wanted to break down the most important tools you should know in 2022, what their most relevant trade-offs are, and offer some personal advice.

We'll start with the lowest-level tools and work your way up to higher-level tools from there. Let's get started 💪.

development tools

translater

The compiler is responsible for converting the input code into some target output format. For our purposes, we focus on those compilers that support converting modern JavaScript and TypeScript into specific versions of ECMAscript that are compatible with browsers and the latest version of Node.js.

name	describe	number of stars	language	speed	maturity	license
tsc	TS official compiler	79,300	TS	slow slow	very mature	Apache 2.0
esbuild	Fast JS/TS compiler	31,200	Go	fast	Can	MIT
swc	Fast JS/TS compiler	21,300	Rust	fast	Can	Apache 2.0
babel	JS compiler (TS plugin)	40,700	JS	slow slow	very mature	MIT

The most important thing about this field is that it is undergoing a huge transition from compilers tsc and babel written in high level interpreted languages, to compilers swc and esbuild written in faster compiled languages.

This shift resulted in a 10-100x reduction in compilation time, as shown in the following graph:

If you're updating your dev tools tech stack, or starting a new project in 2022, then you'll want to consider using one of these next-generation compilers under the hood. They may not be as mature as the official TypeScript compilers, tsc and babel , but the benefit of building 100x faster cannot be underestimated.

Note that neither swc nor esbuild do type checking. They just convert the code into the desired output format as quickly and efficiently as possible. Currently, if you're using TypeScript , you almost always need to include the official TypeScript compiler as part of your toolchain to ensure you get the most out of TypeScript 's static type checking. It's worth mentioning that kdy1dev , the author of swc , is working on porting tsc to Go to remove the need for tsc in many cases, since tsc compilation speed tends to be the bottleneck in most toolchains.

SWC vs esbuild

Both swc and esbuild are excellent, very fast open source JS/TS compilers. Their performance is comparable ( see performance comparison ) and are regularly used in production environments by some of the world's largest companies.

Choosing between these two compilers is more about the high-level tools built on top of these compilers than choosing between them directly.

Noteworthy items using swc :

• Vercel and Next.js
• Deno's linter, formatter, and docs
• Parcel

Notable projects using esbuild :

• Vite
• Nuxt.js

• tsup

  In software engineering, simple statements such as "technology A is better than technology B" rarely have much value. Instead, which tool to use should be decided on a project-by-project basis. In many cases you are better off using the official TypeScript compiler or babel.

Becoming a better software engineer often requires a thorough understanding of the trade-offs involved in these types of decisions and balancing them against the specific constraints of the project, team, and business needs.

Bundlers

The packager is responsible for packaging all input source files into an easy-to-use output format. The two most common use cases for packagers are packaging resources for web applications and packaging into libraries.

name	describe	number of stars	improved	license
Webpack	Industry Standard Packer	60,100	web application, library	MIT
Rollup	For library packers	21,400	library	MIT
Parcel	Zero configuration web build tool	41,000	web application, library	MIT

Bundlers like webpack and rollup are the "Swiss Army Knife" of modern JS toolchains. They are both extremely extensible with well-maintained plugins covering most major use cases. For example, transpiling TS code via webpack or rollup is relatively straightforward using any of the popular compilers listed above.

Parcel , on the other hand, provides an approach to packaging with almost zero configuration. It focuses on simplicity rather than extensibility, and uses esbuild as the compiler under the hood.

Note that both swc and esbuild also provide basic packaging functionality, compared to these packagers, they are not fully featured enough to be included in this list.

For a more detailed comparison of these bundlers, check out tooling.report .

development library

These tools are designed to help library authors package and distribute modern NPM packages.

name	describe	number of stars	translater	packer	license
tsup	Fast TS library packer powered by esbuild	1,800	esbuild	rollup	MIT
tsdx	Zero-configuration CLI for TS package development	9,500	babel	rollup	MIT
microbundle	Zero-configuration packager for tiny modules	6,800	babel	rollup	MIT
Vite	Next-generation front-end tools ( library mode )	40,000	esbuild	rollup	MIT
preconstruct	Develop and build code easily in monorepos	720	babel	rollup	MIT
unbuild	Unified javascript build system	440	esbuild	rollup	MIT

If you develop a new library in 2022, you may want to use these more advanced tools to simplify your workflow.

• If you have a TS package and want to take advantage of the blazing fast build speeds that esbuild offers, then tsupp is a great option.
• If you have a TS package and need some extra functionality, then tsdx is a great option.
• If you have a TS or JS bundle, then microbundle is also a good choice.
• Vite is primarily a tool for building front-end web applications, but it's also a solid all-around option that also includes support for output libraries.

I personally tend to use tsup for all new TS packages, mainly because once you experience 100x faster builds, it's hard to think about switching back to other versions.

More information

Most of these tools currently do not provide good support for TS monorepos that utilize composite project references . Currently, my recommendation for this situation is to use tsc for type checking and generating .d.ts types (with emitDeclarationOnly: true ) and tsup to compile the code in each subpackage. Check out the react-notion-x monorepo project (one of my OSS projects) for an example of this approach.

Publishing modern NPM packages is a delicate topic, well beyond the scope of this article. For more information on ESM, commonjs, exports, and more, see:

• What is required to support Node.js ESM?
• Publish and use ESM packages

Web app development

These advanced tools and frameworks are designed to help developers build modern web applications without worrying about all the details.

name	describe	number of stars	translater	packer	frame
Next.js	React framework for production	84,000	swc	webpack	react
Nuxt.js	Intuitive Vue framework	39,000	esbuild	rollup	vue
Parcel	Zero configuration web build tool	41,000	swc	custom	react vue
Vite	Next-generation front-end tools	40,000	esbuild	rollup	react vue svelte
Snowpack	ESM-driven front-end build tool	20,000	esbuild	custom	react vue svelte
Create React App	Set up a modern web application with commands	94,000	babel	webpack	react
SvelteKit	The fastest way to build Svelte applications	7,700	esbuild	rollup	svelte

The number of projects built with swc and esbuild is about the same. The same is the case with webpack and rollup .

If you plan to develop a new web application with React in 2022, then I highly recommend Next.js. It has the best support, the most active community, and is tightly integrated with Vercel , the world's leading modern web application deployment platform.

If you are developing a new web application with Vue , both nuxt.js and Vite are great options.

If you want something lighter, try Parcel . 🤗

Summarize

Modern web development has grown significantly over the past 10 years. Developers today are lucky to have such a wide range of amazing, well-maintained tools to choose from.

Hopefully this article has helped you analyze the most important aspects of the current JS/TS development tools landscape and help you make more informed decisions.