However, there are 2 newer JS runtimes that have been gathering attention recently:
The first one is
Rust". Deno's documentation section on "Stability" 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 --
zig, which is a language I actually haven't even heard of until now. Instead of
V8, it uses WebKit's
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 --
yarn. 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).
The newest package manager to grab the attention of the community is
pnpm. It's faster than both
yarn and uses hard links so you don't have to install packages more than once to include them in multiple projects.
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. It is highly customizable and there are many open source configurations you can install -- like airbnb's eslint config.
Formatters, on the other hand, are tools used solely to help you keep a consistent code style.
prettier 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.
Why? Because, while
Node.js supports importing code from other files, browser support 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 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 was its main competitor for some time, but recently
esbuild has emerged with extremely fast build times.
In addition to those, we also have what I would call "meta-bundlers", such as
vite (built on
snowpack (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.
The standard in JS transpilers is
On the newer side of things, we have
swc, 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)
For example -- if you write a function that's expecting a
number and someone else uses it in another file by passing it a
There are also options for type checking that don't extend the language -- they use special comments to annotate types, such as
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.
Since you're reading a tech blog on a tech website, you might already know that the biggest JS UI library is still
react. 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 (written by Evan Yu, also the author of the aforementioned
vite). There is also
angular, which, while declining in usage, is still very popular. And finally there's relative newcomer,
svelte (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.
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.
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.