Brunch, Grunt, Yeoman, Gulp, NPM, Broccoli, LiveReload, Bower, jspm, Normalize, Bootstrap, Sass, Less, Stylus, Autoprefixer, PostCSS, TracisCI, Browserify, Webpack, Require, Selenium, Mocha, Jasmine, Chai, Istanbul, JSLint, JSHint, ESLint, HTML5Boilerplate, UglifyJS, CoffeeScript, TypeScript, Jade, Haml, Babel …
What I love about working in tech is that you are always learning new things. This is even more true if you are a software developer and goes into its paroxysm if you work on the web, and particularly on the front-end!
Too many tools?
In the past few years, front-end development has just gone insane! Do people still remember that time when Backbone was the new hot thing? That was just 5 years ago, and since them we have seen a plethora of JavaScript frameworks. And the same holds true for tools!
After a few years living in a cave, I decided to take a look at the state of front-end tooling … and I came up with the list at the top of this article. That list is far from being exhaustive, and only includes the tools I have used or heard of (if you want a more exhaustive list, you can look here, here and here).
It is quite evident to see how this situation can lead to choice paralysis, Dunning-Kruger effect and other conditions for new comers, relatively junior developers like me, or even people with a lot more of expertise on the field. So, where to start?
Why are tools important?
As front-end web development has become more and more complex, so has increased the needs for adequate tools.
It is true that, on the modern web, you need a way to ensure code quality and performance by running linters and automated tests and by bundling all the dependencies and minifying the code. You may also need to enhance the capabilities of native technology by using pre-processors. These needs have led to complex workflows and so the use of task runners is also almost a given on any project.
Not knowing how to use those tools might put you at a disadvantage as the majority of front-end developers possess those skills. Going naked today might not be the wisest thing to do, unless you are working on your own on a relatively small project! But jumping on the next hot thing can be a mistake too!
On the art of choosing the tools that are right for you!
This is not an article about why Webpack is better than Grunt and Gulp, or about why you should just dump them all and only use NPM. This is more about making sense of the massive amount of tooling available to us!
As with JavaScript frameworks, it is important to focus on the core of the web and to understand the added value of the available tools before investing in them. There are undeniable benefits to pre-processors, linters, testing frameworks, task runners and package managers, but each of those should answer a well-defined need.
