Today I spoke with a frontend developer at my work and he showed me some really nice tools frontend developers use nowadays for creating websites. As a backend developer I never looked further then Twitter Bootstrap and jQuerybut frontend development is so much more I discovered today!

NodeJS npm Package Manager

First of all start with installing NodeJS on your system. A frontend developer uses NodeJS because it ships with an excellent package manager called npm. npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you’re sharing. After you installed NodeJS make sure you regularly check for updates of npm because it gets more frequently updated then NodeJS.

Update npm

Now your are ready to start installing packages. If you need for example the sass package you could just run npm install sass. But its better to create a package.json file first. If you have a package.json file in your directory and you run npm install, then npm will look at the dependencies that are listed in that file and download all of those. This is nice because it makes your build reproducible, which means that you can share it with other developers. A very basic example of a package.json file could look like this:

You can create a basic package.json file by running npm init

Now run from your terminal npm install in the same directory as where your package.json file is. npm will install nothing but it will check your package file.

To get rid of the readme error you have to create a README.md file and put some text in it. Here is a list of all things you can put in this package.json file. Now let’s install sass again using the package.json file:

The addition of –save is very important because it tells npm to put this dependency also in the package.json file. If you don’t put this dependency in the package file then other developers cannot simply install all dependencies by running npm install. They have to know that they need to add sass manually. That is not what you want! Now we have npm configured and running let’s add some nice frontend tools.

An overview of all possible settings in your package.json can be found here:
https://docs.npmjs.com/files/package.json

Grunt

The first tool I am going to install is GruntJS. Frontend developers use a tool like GruntJS as a taskrunner. It automates repetitive tasks like minification, compilation, unit testing etc. So everytime your change your sass file or a javascript file you run Grunt and it will autmatically create a CSS file for you and minify your javascript file. To make Grunt do all this stuff you need to install Grunt Plugins. For example the grunt-contrib-sass can automate the task of compiling yourstyle.scss into yourstyle.css simply by running a task.

This command will install grunt globally. You can also choose again to add the flag –save so that it will be added to your package.json file. But in this case I recommend to install it globally so that you can run grunt from any subfolder in your project. Otherwise run this command to add it to your devDependencies:

tion used by npm has an additional property for separately listing dependencies which are only required for development purposes. These are defined in devDependencies.

Grunt needs two files to work:

• package.json:  You will list grunt and the Grunt plugins your project needs as devDependencies in this file. And ofcourse npm uses this file.
• gruntfile.js: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins.

The easiest way to install grunt plugins is using the command:

For example this is how you install jshint as grunt task:

Gruntfile

This file is used to configure or define tasks and load Grunt plugins. Basically the file consists of these parts:

• The “wrapper” function
• Project and task configuration
• Loading Grunt plugins and tasks
• Custom tasks

Everything in the Grunt file is inside a wrapper function:

A simple Grunt file could look like this:

Inside the initConfig you will also set all the options for the grunt plugins.
Next you have to be sure to load all grunt dependencies from the package.json using grunt.loadNpmTasks.
To be able to run grunt tasks you have to register them also using grunt.registerTask. The default task will run when you type in Grunt without any parameters. You can also run specific tasks like pack by typing: grunt pack.

More information about Grunt can be found here:
http://gruntjs.com/getting-started

Other interesting tools

Requirejs

RequireJS is a JavaScript file and module loader. It can be installed using npm. RequireJS in configured using a main.js file. RequireJS can be seen as a service locator pattern for your javascripts. You enable it like this:

The main.js can look like this:

Now you can wrap your function in this:

Mustache / Handlebars / Swig / Hogan

These are all examples of javascript template engines. They all have there advantages and disadvantages. Mustache for example is a simple template engine in which all logic needs to be performed with javascript. Handlebars is a bit more advance. Handlebars supports logic in templates like (#if, #each etc) and is much faster because it compiles templates. For the compiling task you can use a Grunt Plugin so that you don’t have to do it manually every time you change the template. Below I will explain shortly what compiling means in the world of javascript.
Swig is like Handlebars a more complex template engine which also compiles it templates. Swig is build to be easily extendable and it’s syntax is very similar to that of the Twig template engine used in the world of PHP especially with the Symfony framework. Hogan is also very comparable with Handlebars but is considered a bit faster then handlebars. There are even more javascript template engines. If you use a different one then I mention above here for a special reason please discuss it below in the comments.

Compiling templates

Compiling templates is not always required but it reduces the time to render a template on the client side significantly. Compiling is like minifying your javascripts. It’s all about performance. Let’s say you have a template:

Now you can send it like this to the client and on the client side when rendering the template you replace all tags like {{title}} and {{body}} with content. This of course takes some time because the replace function will have to scan the entire string for tags. An alternative is to inject the values before you send it to the browser or wrap the template in a function like this:

Performance wise this should be faster. Compiling is like minifying and done by a script (task) that can be invoked with a command-line command or a task runner like Grunt. The compiler will convert all templates into functions before it sends it to the client.

Do not use libraries like jQuery

For me this was a real shock. I always believed that using libraries like jQuery was a good thing because you don’t have to worry anymore about browser compatibility. But real frontend developers find jQuery to big. Instead they prefer only to use those things they really need, the rest is just overhead that you want to avoid as much as possible. Switching back from jQuery to pure javascript is not easy if you are used to it for many years like me. But sites like there can help you switch back:

• http://www.leebrimelow.com/native-methods-jquery/
• http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/
• http://www.sitepoint.com/jquery-vs-raw-javascript-3-events-ajax/

Reqwest

So you can’t use jQuery how should you handle Ajax requests now. Reqwest is a good alternative for jQuery’s Ajax support. It’s very similar to jQuery’s way of handling Ajax requests but with less overhead. Reqwest also supports promises. Promises are like events except:

• A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa
• If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier

If you want to know more about javascript Promises and what the difference is between a Promise and an Event checkout this link:
http://www.html5rocks.com/en/tutorials/es6/promises/

Restify

Restify is a small framework for building REST APIs.

Modernizr

Modernizr makes it easy to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily. Frontend developers use it to test if a certain features are supported in a browser and if not you can display an item differently to make it still look nice. Modernizr is normally used in combination with shim. Shim in software engineering consists of missing functionality like some features that are not supported in your browser and workarounds for that. With Modernizr you test if a certain feature is available and if not you load the module that adds the feature.

Javascript beyond the basics

If you feel like you are a real Frontend Developer right now please don’t think you know everything right now. Javascript looks like an easy language but it is much more advanced then you might think. A good frontend developer recognizes it’s full power and knows there is more then just alert(‘Hello world’). Are you already familiar with the terms prototype, promises, closures, private variables and constructors in javascript? If not you might want to checkout this website before you think you can write javascript 😉

Interesting links

• http://www.html5rocks.com/
• http://bonsaiden.github.io/JavaScript-Garden/
• http://css-tricks.com/