These are the frontend web development tools that you should be using right now

If you like to be on top of the latest frontend technologies, then this is the right post for you. Let us go through the most widely used frontend tools that will help you boost your productivity by leaving the hard work into their hands. All these tools are console based, so make sure you have at least Windows PowerShell installed if you are not on Linux or MacOS.

NodeJS

We wont be using Node itself to write code for frontend development, but we need Node installed to use any of the tools mentioned below. NodeJS is a runtime environment based on the V8 JavaScript engine. This platform is so flexible that most of the newest frontend tools available today are based on NodeJS.

There is nothing special to be done here. Just head over to the NodeJS website and install the appropriate application for your operative system.

npm or Bower

They are both package managers that handle dependencies for plugins/libraries used on your site. By plugins/libraries I mean stuff like jQuery, Bootstrap and even some of the tools like Grunt and SASS. If you have ever used Linux, you have probably come across yum, rpm or apt-get. In Linux these commands allow you to install Linux packages into your system. Well, npm and Bower do practically the same, but the packages are installed inside your web app folder instead of your OS. So, what’s the difference between Bower and npm?

npm (Node Package Manager) comes already integrated into NodeJS. If you have NodeJS installed, you already have npm. npm is required for pretty much everything we will cover in this guide and it uses a file called package.json to keep track of the packages required by your application. The package.json file can be created/initialised by running the following command in your project path:

npm init

It will ask a bunch of questions and then a plain package.json will be created. Packages that you install using npm install with the –save and –save-dev flag will be logged into this file and kept inside the npm_modules folder. This makes it portable, so other developers can install the same packages you are using by only having a copy of your package.json. That’s why you should always commit your package.json to your project repository.

Bower on the other hand is a frontend package manager which can only be installed using npm. It uses a bower.json file to keep track of the packages you have installed. It is more basic than npm and doesn’t support nested dependencies. Bower can help you install jQuery, Bootstrap, Foundation, Angular, Modernizr and many other widely used libraries, all within the reach of a single line, for example:

bower install jquery

This will install a copy of jQuery inside the bower_components folder which then you can refer to from within your HTML file.

Some people prefer npm over Bower. It all depends on the complexity of your application. For total newbies, I would point you towards Bower, which is easier to use:

npm install -g bower

For example, stuff like jQuery, Angular or even Bootstrap are all compatible with npm and Bower. You can install most of the libraries used nowadays with something of the sort of:

bower install bootstrap-sass --save

or…

npm install boostrap-sass --save

This will take a copy of the package directly from Github and install it in the directory you are in. Working this way will allow you to let the package manager handle the dependencies and you will never have to manually download any other plugin from the internet. How cool is that? Those old days of downloading a zip file with all the code and moving it manually into your application are now gone!

Grunt / Gulp

Grunt and Gulp are both task runners that basically perform routinary operations while developing your app. For example, your CSS needs to be compressed, maybe your JavaScript code needs to be concatenated, even linted in some cases. What if you need to put together your code for production in a certain way before uploading it to your server? All this can be done by Grunt or Gulp. It all comes down to a matter of taste if you want to pick one or the other. In fact, they are both so similar that you can flip a coin to make the choice.

Once the coin is flipped, the installation commands for each one are:

Grunt

npm install -g grunt-cli

Gulp

npm install -g gulp

This will give you the grunt or gulp command to be run from your console from any directory.

Gulp requires of a gulpfile.js in which you will define all the tasks that have to be performed within your application. Grunt uses a Gruntfile.js. These files are basically JavaScript files with methods and settings that tell the task runner what to do. For example, a common SASS compilation task for Grunt would look like this:

    sass: {
      server: {
        files: [{
          expand: true,
          cwd: 'assets/scss',
          src: ['*.{scss,sass}'],
          dest: 'assets/css',
          ext: '.css'
        }],
        options: {
          outputStyle: 'nested',
          sourceComments: true
        }
      }
    }

Which means: take all the SASS or SCSS files in the assets/scss directory and compile them into the assets/css folder by keeping the code nested and displaying all the source comments (handy for development). There is definitely more to this and way more settings available, but it should give you an idea of how Grunt and Gulp works.

Both Grunt and Gulp have a massive array of libraries available for you to use. Head over to the npm directory to learn more.

SASS

If you are still writing plain CSS into a single or separate files, then you are still stuck in 1999. SASS has taken over the web development world by storm by allowing you to nest code, use variables, functions, perform calculations and use partials. All this is later compiled into a single (or multiple) CSS files that are then used in your site.

To get started with SASS you have several options but the most widely used are: Ruby SASS or Node SASS. Ruby SASS is based on Ruby, which is quite slow if you ask me. Node SASS on the other end is based on NodeJS and Libsass, which compiles way faster and you should use it in conjunction with Grunt/Gulp. Have a look at the appropriate Libsass package for Grunt or Gulp.

For this guide lets assume you are using Grunt. If so, locate the Grunt SASS package and install it this way:

npm install grunt-sass --save-dev

After the package is installed, make sure to setup your Grunt task inside the Gruntfile.js in order to get it running. Details about SASS and its settings are always available in the documentation for the package.

Autoprefixer

Once SASS is running you need to take care of those nasty vendor prefixes for the different browsers. Writing stuff like -moz-border-radius or -webkit-transform for special CSS features is a thing of the past. With Autoprefixer, you can automatically specify the browser support you want and it will add the prefixes automatically to your CSS. From now on you only have to write the standard CSS property in your SASS file and Autoprefixer will handle the rest. Lets assume you are using Grunt:

npm install grunt-autoprefixer --save-dev

And you can setup a task like so:

    // Add vendor prefixed styles
    autoprefixer: {
      options: {
        cascade: false,
        browsers: ['> 1%', 'last 3 versions', 'Firefox ESR', 'Opera 12.1', 'ie >= 9'] // if you only care for IE9+ support
      },
      server: {
        files: [{
          expand: true,
          cwd: 'assets/css/',
          src: '{,*/}*.css',
          dest: 'assets/css/'
        }]
      }
    }

This will parse your CSS files and add the prefixes to any property that is not standardised yet in those browsers.

BrowserSync

So all the tools I mentioned above are already running but every time your SASS or JS files are compiled, or your images or HTML is changed, you have to manually refresh the browser window to view the changes. This is not necessary with BrowserSync.

First of all, BrowserSync will refresh the window for you automatically after every file change, which can be tailored to your needs in the Gruntfile (or gulpfile). Also, BrowserSync will literally sync all the browsers and devices that have that page opened and will mimic the behaviour on each device. If you scroll on your desktop, it will scroll on your mobile too. This is extremely handy for multi device testing during development.

To get started with BrowserSync, get the package installed via:

npm install grunt-browser-sync --save-dev

or

npm install browser-sync gulp --save-dev

Then visit the BrowserSync docs for more information on how to set it up for your preferred task manager.

This is just a handful of the almost mandatory tools you should be using right now. If you are adventurous and like to play with other toys, you may also want to take a look at stuff like Assemble – an HTML template engine – or Grunt PHP if you are a PHP developer.

There are hundreds of tools available for Grunt and Gulp. The npm directory is a very good place to start if you are looking for libraries for your favourite task runner.