The JavaScript ecosystem is moving incredibly fast these days. It seems like there’s a new framework or library every other day. For developers trying to jump in, it can be daunting to figure out what tools to choose for your project. It can also be difficult to tell whether or not the newest thing is ready for production.

So, to help you navigate the maze of choices, I’ve compiled a list of the basic things you need to get started with a modern JavaScript project. This collection isn’t exhaustive, but represents tech that is both current and stable (not ancient, but not so new that it’ll break prod). Also, when applicable, I’ll include upcoming tech that is promising, but maybe not quite ready for primetime.

CAVEAT: This article is assuming you want to start a project with a “modern” front-end JavaScript tech stack. There is absolutely nothing wrong with writing a web page with just vanilla HTML, CSS, and JavaScript (and in fact, many times it’s probably the easiest way to go). But as web pages and apps get more complicated, modern tools can help lighten the burden of managing that complexity.

Runtimes

So, you’ve decided to branch out beyond the browser. Since JavaScript is interpreted (as opposed to compiled), the first thing you’ll need is an environment that can run it. The current, de facto standard for this need is Node.js opens a new window – a runtime that uses Google’s V8 JavaScript engine opens a new window . It’s stable, actively maintained, and has a regular release and LTS (long term support) schedule.

In all likelihood, you’re already using it in projects that include JavaScript in some way. If you’re just getting started (or jumping back in after a long break), this is probably the only one you’ll need to know.

However, there are 2 newer JS runtimes that have been gathering attention recently:

The first one is deno opens a new window . According to its site, it is “a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust opens a new window ”. Deno’s documentation section on “Stability” opens a new window explains that, while their namespace APIs are stable, there are unstable features and its standard modules are not yet stable either.

And an even newer runtime popped up over the summer of 2022 – bun opens a new window (so new that I actually had to update this blog post right before publishing – JavaScript, amirite?). Bun claims to be significantly faster than both Node and Deno (though there has been some debate in the forums as to exactly how much faster). It’s written in zig opens a new window , which is a language I actually haven’t even heard of until now. Instead of V8, it uses WebKit’s JavaScriptCore opens a new window engine. Bun also comes with some extra features (from their website): “JSX/TypeScript transpiler, npm client, bundler, SQLite client, HTTP client, WebSocket client and more”. All in all, it seems pretty promising. But remember – it is new new (official announcement was on July 5, 2022), so you should probably use it with caution.

Package Managers

Now that you have a runtime, you’re going to want some way to import external packages that you might want to include in your project. There are basically two main choices when it comes to JS package managers – npm opens a new window or yarn opens a new window . Either one is a great choice, and it largely comes down to personal preference.

If you’re looking for a suggestion, I’d probably say go with npm, since it’s the original and has all the features you need to get started. Although, yarn is typically faster and has a few features that npm lacks (although, npm is adding new things inspired by yarn all the time – such as the ability to pin the dependencies of dependencies to specific versions opens a new window ).

The newest package manager to grab the attention of the community is pnpm opens a new window . It’s faster than both npm and yarn and uses hard links so you don’t have to install packages more than once to include them in multiple projects.

Linters/Formatters

One of JavaScript’s most contentious features is how forgiving it can be when it comes to formatting – it literally would not even care if you used tabs and spaces to indent. Managing these issues yourself can become tedious, so there are tools available to do it for you. They typically fall into two categories – linters and formatters (although, their jobs tend to overlap a lot).

A linter will analyze your code and find errors in syntax or language constructs – eg, things that can cause bugs. The most popular right now is eslint opens a new window . It is highly customizable and there are many open source configurations you can install – like airbnb’s eslint config opens a new window .

Formatters, on the other hand, are tools used solely to help you keep a consistent code style. prettier opens a new window is probably the one I see mentioned most often, and the only one I use. It is opinionated and does not have a lot of configuration options. Their whole philosophy is to cut down on time spent debating over style issues.

As far as when to use which tool, prettier offers some advice on their site opens a new window .

Bundlers

If your project contains exactly one (1) JavaScript file, you should be good to go with the tools listed above. But if you’re separating your concerns into multiple files and folders, you’re going to need a tool to package them all up into one.

Why? Because, while Node.js supports importing code from other files, browser support opens a new window for it is pretty new and it’s only just becoming available on mobile this year (2022). While we wait for the future to be now, you’re going to need a bundler. There seems to be more choices for bundlers than many of the other categories here – and they all offer different benefits and drawbacks.

For a while now, webpack opens a new window has been the leader in terms of downloads. But complicated configuration and plugin files (not to mention slower build times) have led to alternatives gaining some ground. rollup opens a new window was its main competitor for some time, but recently esbuild opens a new window has emerged with extremely fast build times.

In addition to those, we also have what I would call “meta-bundlers”, such as vite opens a new window (built on rollup and esbuild) and snowpack opens a new window (allows you to plugin a bundler of your choice). These don’t only bundle your files – they also include other tools, like pre-configured development servers. If you want a low configuration, “batteries included” setup – vite has a wonderful development experience.

Transpilers

Not only does the JavaScript ecosystem move fast, the language itself is evolving all the time. It currently uses a sort of “rolling” release schedule where new features are announced almost annually, and it’s up to browsers to implement them according to the spec. This can lead to situations where you aren’t sure if the new feature you’re using will be supported in all the environments where your project might run. To solve this problem, you can use a transpiler.

The standard in JS transpilers is babel opens a new window . It lets you write your project using the newest JavaScript (ES2015 and beyond) and then converts it to syntax that is more widely supported. It is highly configurable and integrates well with the bundlers listed above by using plugins.

On the newer side of things, we have swc opens a new window , which is a transpiler written in Rust that offers faster output times (and also happens to be able to bundle your files). According to their site, it’s currently being used by “tools like Next.js, Parcel, and Deno, as well as companies like Vercel, ByteDance, Tencent, Shopify, and more.”

(I should also note here that esbuild can be used to transpile your JS files as well, but they seem to advertise themselves as a bundler first)

Language Extensions

Now that your project spans multiple files and modules, you may start to notice a common pain point – there’s really no type safety in JavaScript.

For example – if you write a function that’s expecting a number and someone else uses it in another file by passing it a string, there isn’t a built-in way to alert them that this could lead to bugs. JavaScript will try its “best” to do what you want, but may just end up swallowing any errors, which could lead to unexpected behavior.

This complaint was common enough that developers began creating ways to extend the JavaScript language. The clear front-runner in this race is TypeScript opens a new window . It extends JavaScript’s syntax to use “strong typing”. This means that my example above would lead to an error, and you’d be alerted in your console before you even tried to save the file. It’s essentially a different language unto itself, but when you’re ready, I highly recommend it. Once you get used to it, it makes managing large, complex projects a lot easier.

There are also options for type checking that don’t extend the language – they use special comments to annotate types, such as jsdoc opens a new window .

UI Libraries/Frameworks

And now we’ve finally arrived at the section everyone was probably waiting for – UI libraries (or, as many of us call them, frameworks). If you’re building a web page or app, there often comes a point where managing everything UI-related becomes more work than it’s worth. In the past we may have used JQuery, but much of that library might not be needed opens a new window .

Since you’re reading a tech blog on a tech website, you might already know that the biggest JS UI library is still react opens a new window . Its CLI tool lets you get started quickly – with most of the tools mentioned in this blog post already included. There are other frameworks gaining more support every day, but react seems like it’s here to stay for a while.

The main competition for react right now is probably vue opens a new window (written by Evan Yu, also the author of the aforementioned vite). There is also angular opens a new window , which, while declining in usage, is still very popular. And finally there’s relative newcomer, svelte opens a new window (written by Rich Harris, an original maintainer of rollup), which has been topping developer polls for the last few years – including “Most Loved Framework” in StackOverflow’s 2021 Developer Survey opens a new window .

Wrap Up

Like I mentioned earlier, this is not a comprehensive list of all the things you’ll need. Many of these tools will have their own dependencies that you’ll have to install and learn how to use (thankfully, many of them are pretty opinionated when it comes to these choices). If you want to dive into setting up your own configurations from scratch, this list should be a good starting point.

If you just want someone to make the choice for you, the major JavaScript frameworks all have quick-start tools to do just that (create-react-app, create-vue, create-svelte, etc). At the very least, you can learn any pain points from their choices and make new ones in future projects. As with all tech, there are trade-offs to any decisions you make, and they usually depend on the specific project you’re working on.