In the world of software engineering, it’s important to have a firm understanding of the tools at your disposal.

But the landscape of JS tooling is always changing at such a rapid pace.

And 2022 is no different.

So I decided to break down the most important dev tools that you should be aware of in 2022.

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

Compilers

Compilers are responsible for transforming your input code into some target output format. For our purposes, we’re focusing on compilers which support transpiling modern JavaScript and TypeScript into specific versions of ECMAscript that are compatible with browsers and recent versions of Node.js.

Untitled

The most important thing to understand about this space is that it’s in the middle of undergoing a massive shift from compilers like tsc and babel, which are written in higher-level interpreted languages, to compilers like swc and esbuild, which are written in much faster, compiled languages.

This shift results in 10-100x faster compilation times as shown in this esbuild demo.

Source: esbuild

Source: esbuild

If you’re updating your devtools stack or starting a new project in 2022, then you’ll want to consider using one of these next-gen compilers under the hood. They may not be as mature as the official typescript compiler or babel, but the benefits of having 100x faster builds cannot be understated.

Note that neither swc nor esbuild perform type checking. They simply transpile code into the desired output format as quickly and efficiently as possible. For the time being, if you’re working with TypeScript, you’ll almost always need to have the official TypeScript compiler as part of your toolchain to guarantee that you’re getting the most out of TypeScript’s static type checking. It’s also worth mentioning that the author of swc, kdy1dev is working on porting tsc to Go in order to remove the need for tsc in many cases, as it tends to be the bottleneck in most toolchains.

SWC vs esbuild

swc and esbuild are both excellent, blazing fast, open source JS / TS compilers. They have comparable performance and are both used regularly in production by some of the world’s largest companies.

It’s likely that your choice between the two will be dictated more by the higher-level tools built on top of these compilers as opposed to choosing between them directly.

Notable projects using swc:

Notable projects using esbuild: