Teaching myself frontend development: Tools

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.

To my surprise, the debugger did not seem to work, but it turns out that I had first start the regular run-configuration and then choose the special “JavaScript Debug Appliaction” run-configuration in debug-mode, which will open the app in Chrome in debug mode. There is probably a reason why this is so complicated or maybe I am doing something wrong. At least the IDE debugger integration is working and I don’t have to rely on the Chrome debugger.

Build tools for frontend developers

This is where the fun starts. And by fun I mean this is where you start to see the origins of JavaScript, a scripting language that was thrown together in a couple of weeks without the goal of creating maintainable software. Have I mentioned that I don’t like JavaScript?

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: babel, SWC)
  • 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: webpack, browserify, SystemJS)
  • 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 grunt and gulp.

And then, of course, there is package management. Node comes with npm, but 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.

See also