Why use tooling?

Once upon a time, ages upon ages ago, you could write JavaScript by adding it right to your web page.

<script>
  alert("This is a wonderful world");
</script>

It was nice and simple, but nice and simple things just don’t last.

Not all browsers support the same things.

In that same “once upon a time,” some stuff worked with Internet Explorer, some stuff worked with Chrome, some stuff worked with Firefox, but not everything worked everywhere. Sometimes this was malicious and sometimes it just needed some research.

If you were lucky and the feature just had some sort of different name, you ended up writing code like this:

var http;

if (window.XMLHttpRequest) {
     // code for IE7+, Firefox, Chrome, Opera, Safari
     http = new XMLHttpRequest();
}
else {
     // code for IE6, IE5
     http = new ActiveXObject("Microsoft.XMLHTTP");
}
http.open("GET", "/lobsters", true);

If you were less lucky, the browser might not support something at all, and you’d need to use a polyfill, which is external code that adds that functionality in.

With modern JavaScript tooling, you don’t have to worry about that any more! You just write it in the “normal” way, the tools look at your code and fix it up so it should work in all browsers.

Formatting your code takes too much effort. We’re lazy/efficient!

Writing code in a well-formatted, standardized way is a great thing. A few benefits:

1. You can find bugs more easily
2. Teammates will feel relaxed and enlighted when reading your code
3. Please refer to the first two, again and again

It’s difficult to force yourself to use a style, but because we live in the Future there are tools to help you with that! These tools are called linters, and they help streamline your code to make it less buggy and more readable.

We want all of our code to be small and/or secret!

When you’re writing code, it’s nice to use descriptive names so your functions and variables are easy to understand. If you combine this with those special formatting rules - which probably adds extra spaces and newlines - your code ends up a beautiful, readable piece of art.

Unfortunately, that makes your code bigger, and it lets everyone else read your code, so maybe when you publish it you’d like to make it totally small and unreadable by renaming your variables and removing all those extra spaces and newlines.

This is called minification, and I’m just going to steal an example from Wikipedia to illustrate. This is long:

var numbersArray = [];
for (var i = 0; i < 20; i++) {
  numbersArray[i] = i;
}

And this is short:

for(var a=[i=0];++i<20;a[i]=i);

Guess what can do that for you? Yes, tools!

Combining all of your files

If that’s not fancy, enough, maybe you wrote a website that has like six different JavaScript files. That’s six different times your browser has to call up the server to ask for a file, and six different times the server has to send a file to your browser.

Want to combine them into one file? Yes! How do we do it? Tools!

And everything else

Sigh, this goes on and on. Like, forever. Let’s just get moving.