Let's not beat around the bush here, modern front-end web development is bloody intimidating. Where it used to be enough just to learn HTML, CSS and JavaScript and construct a website using your own fair hands, the landscape has become vastly more complicated.

While the introduction of package managers (npm, Bower), module bundlers (Webpack, Require.js, Browserify), code transpilers (Babel, TypeScript) and task runners (npm scripts, Grunt, Gulp) is definitely beneficial to the development process, it also presents a huge barrier to entry for some. I found myself constantly putting off learning these tools and furthering my development knowledge because the task seemed insurmountable and it was difficult to know where to start. In this post I will provide you with the resources that I found most helpful, and try to explain things as simply as possible in my own words.

I think it's also important to understand that while all these tools do add complexity to the development process and present a learning hurdle initially, ultimately they do add value and reduce your workload considerably once you're familiar with them.

Command Line / Terminal

First things first, in order to use the tools explained in this post, you need some basic knowledge of the terminal. I know, I know... but it's really not as complicated as you think.

By default when you open the terminal it will start in the root directory of your filesystem. You probably don't want to create things there, and have a nicely organised "Projects" folder somewhere. You can change the current directory to that one by using the "cd" command, for example:

cd /Users/luketwomey/Documents/projects

Once the terminal has changed to this directory, you can run other commands from there.

Package Managers (npm)

You know how you like to use libraries (things like React or jQuery) in your project? Package managers automate the downloading and upgrading of those libraries. The most popular package manager is "npm".

Right at the start of a project, you would run:

npm init

Which guides you through prompts to set up a new project and create a file called package.json. This file basically holds all the information about your project.

If you want to use a library (E.G. React), you would run:

npm install react --save

And just like that, npm will download React, install it in your project (in a node _ modules folder) and add it to your package.json file. Now npm has the ability to examine the package.json file and install any missing packages or upgrade them if necessary. This in itself is a huge timesaver, because it takes all the legwork out of going to the library's website, downloading a package, unzipping it, copying and pasting it into your project directory, adding the line to your code to link to the file... And that's just for one library. Imagine if you had hundreds... you can already see the benefit this automation provides.

Module Bundlers (webpack)

At the simplest level - module bundlers like webpack will take multiple JavaScript files and combine them into one, take multiple CSS files and combine them into one and so on. This is obviously a big benefit to the performance and loading time of your website.

In slightly more detail, it will automatically check through your code for elements which would not be understood by the browser and amend it as necessary so it will run without error. For example, one way of including JavaScript from one file into another JavaScript file is by using the following line of code:

var jquery = require('jquery');

The problem is, the browser has no idea what "require" is. So webpack will automatically search for all occurrences of require and replace them with the contents of the file being pointed to.

Code Transpilers (babel)

A code transpiler will run through all of your code and if it finds new features that are not currently supported by web browsers (E.G. ES6's new import statement for modules), it will convert that code to an older version which is more compatible.

This is fantastic news as a developer, because it means you get to work with the latest cutting edge code, with no worry that what you are producing will be incompatible with browsers. A code transpiler will guarantee compatibility.

Task Runners (npm scripts)

Task runners like npm scripts allow us to pull everything together and run multiple tasks automatically to build our final project.

For example, you could create a custom command "build" (but this can be named whatever you like) which executes many different tasks of your choosing to produce your production files. By running:

npm run build

You could automatically run Babel to transpile your code. Then you could use a different tool to convert Sass to CSS. Then you could run webpack to bundle all your files together, then obscure them and minify them. Then you could start a web server and open your project in your favourite web browser, or automatically upload the files to an ftp server. All of these things are done simply by running one command. The possibilities are endless, and completely customisable, which is hugely powerful and a massive time saver.

Hopefully this gives you a general idea of what each of the various tools can do, and just how much they can benefit you by using them. There is certainly a learning curve and a shift in the way you would normally build your projects, but once you understand how everything fits together you are handsomely rewarded.

One of the resources I found hugely helpful in coming to terms with all of this is the 'Building a JavaScript Development Environment' course on Pluralsight. If you don't already have a Pluralsight subscription, I highly recommend it. The material is of a very high standard, and it really helps to see an expert walking through the subject you're trying to learn. They offer a free trial period, so you can try before you buy.

Another resource I found which very clearly explained things for me, coming from a position of knowing just the 'basics' was the 'Modern JavaScript Explained For Dinosaurs' blog post on Medium. It gives a very good explanation of the problems each tool aims to address, and how they combine together.

As ever, any questions surrounding any of what I've covered in this post, please feel free to comment below.