Modern Web Development Best Practices Powered by Grunt.js Part 1: Introduction

Developing for the World Wide Web has always been a challenge. At first, the challenge came because it was such a different concept than traditional desktop or server programming, but now the challenge lies in adapting to the speed at which everything web-related moves. Not just the connection speeds and adoption rates, but also the speed of browser updates, new frameworks, better tools, etc. All of these things are great, but at times can be overwhelming for any web developer.

In this series I will outline some tips, techniques, and best practices I’ve learned throughout my career that have helped me develop better software. I will focus mainly on the bread and butter of web development: HTML, CSS, and JavaScript. Don’t get me wrong, the back end stuff is also extremely important, but it moves at a glacial pace compared to the front end.

Using Grunt.js

As you might have guessed by the title of this series, Grunt.js plays a pivotal role in executing the techniques and best practices I’ll be proposing. Grunt.js is a task runner written in JavaScript that runs in the server using Node.js (if you’re not sure what that means then just think of it as the glue that will bring all our other tools together and help them work in conjunction to get the results we need). Grunt.js is not required to implement all the concepts I’ll be discussing, but I chose it because of its extreme flexibility, huge community support, ease of use, and portability (all of the examples I’ll show work on both Mac OSX and Windows).

Wherever possible, this series will contain code snippets and screenshots to help illustrate things better. I have also created a simple project hosted in GitHub that has everything you’ll see in here. You can clone it, install, and see the finished result, or you can browse the different release tags I’ve created that correspond to each of the sections of this series. Look for the “Tutorial” in each of the sections to follow along.

Package Managers

Put simply, a package manager is a repository of software that allows easy access to specific software and components to the user. Package managers have existed for desktop software for quite a while, predominantly in the open source world. In the last decade or so, new incarnations of package managers have surfaced. Some are more generic, while others are specific to a programming language. Examples of these are:

• RubyGems for Ruby

• Pip for Python

• NuGet for .NET

• NPM for Node.js

They are extremely important for developers, as they make the task of hunting down specific dependencies a breeze. Gathering most of the dependencies for your project no longer requires hunting down the developer’s site to download, extract, and copy into your folders. Now installation is as easy as typing in a command or two.

Tutorial:

Our sample project depends on two package managers: NPM and Bower. Bower labels itself a package manager for the web, and in my experience it works extremely well, has tons of up-to-date packages available, and great support from the community. NPM is the package manager for Node.js and has a lot of tools that a web developer might find handy, but we will use it to install Bower (yes, a package manager inside of a package manager), Grunt.js, and a few of its plugins. Make sure you have both of these package managers installed and configured before continuing. Also, make sure you have your Terminal.app or cmd.exe open and ready.

Once we have these tools set up and configured, the next step is to start building something. Stay tuned for more instructions in part two of this series. In the meantime, follow @CrederaMSFT on Twitter and Credera on LinkedIn for more great best practices.

To view the rest of the Modern Web Development Best Practices Powered by Grunt.js series click here.

• Grunt.js
• Modern Web Development Best Practices