Since I spontaneously decided to teach myself frontend development, I thought I would start by making myself familiar with common tools used in frontend development. Up until now I have been tangentially aware of what it takes to create a frontend, but I have never taken the time to read up on any specific topic. I will divide the tools into four categories: development tools, build tools, deployment tools, and, of course, other tools.
Development tools for frontend developers
No surprises here: We need an editor or an IDE, a runtime (the browser, I use Chrome), and a debugger. I am a Jetbrains user, so I will be using their WebStorm IDE, which comes with debugging support.
Build tools for frontend developers
Anyway, as for every other programming language, you need some way to build your release artifacts. For frontend projects, there a some common tasks that you will want to do as part of your build. Because your frontend code will be downloaded over a network and executed by the user’s browser, it is important to minimize the size of your app and reduce the number of networks request (by reducing the number of files). In addition, since different runtimes (ie. browsers) support different language features, you will also want to make sure that your code targets the widest range of runtimes by using a transpiler.
Here are the frontend specific build tasks that I have been able to identify:
- Transpile your code for maximum browser runtime compatibility (tools:
- Bundle your html, css, scripts, images and whatever other assets you have to minimize the number of files that the client has to fetch. (tools:
- Minify your html, css, and scripts to reduce the size of each file
There are also a bunch of tools that primarily seem to be task runners, like
And then, of course, there is package management. Node comes with
yarn seems to be popular as well.
That’s quite enough for today
This was the shortest version of a tools-writeup that I could do. I am feeling quite overwhelmed by the number of tools that are out there. I have only mentioned tiny, tiny, tiny fraction of the tools that I have come across during this short research. The tools I have mentioned seem to be mentioned more often than others, that is the only reason why I included them. I have no experience with any of these.