Javascript Builds with Require.js

Background

With the advent of complex client side applications, comes the need to be able to build and deploy these applications from your code base.  Require.js build  functionality offers this.  I will talk through a typical example of usage.

Installation

Please make sure you have node.js installed before you begin.  The next thing you need to do is to install require.js by running the following command:

npm install -g requirejs

Usage

Create a bash script to run the build

My preference is to create a build directory in your app directory as follows. Containing a bash script (.sh) file and the associated app.build.js file that has the app build options.

The file contains a command that runs the build using require js and a reference to your build file as follows:

r.js -o app/build/app.build.js

Create an app build file

The file contains the commands required for JS to pick up the require.js configuration and some other defaults for css build and directory locations as follows: 

({

appDir: "../",

baseUrl: "scripts",

dir: "../../dist",

mainConfigFile: "../scripts/main.js",

name: "main",

optimizeCss: "standard"

})

• The appDir directive status where the main app directory is, in our case it is on directory up from the file.
• the baseUrl is the url for our scripts.
• The dir is the location for the completed build
• mainConfigFile is the location of our require.js settings
• name: the main entry point of the appllication
• optimizeCss is an extra option defining how to optimize any css

Cleaning Up

As part of the build you can add deletions to your bash scripts to make sure your distribution or dist directory is easy to deploy.

This can be done by specifying remove bash script commands as follows:

cd dist
rm -rf build build.txt .bowerrc component.json scripts/views scripts/vendor/backbone-amd scripts/vendor/jquery scripts/vendor/roundabout scripts/vendor/threedubmedia scripts/vendor/underscore-amd/docs scripts/vendor/underscore-amd
rm -rf scripts/vendor/requirejs/dist scripts/vendor/requirejs/docs scripts/vendor/requirejs/tests
rm -rf scripts/vendor/requirejs/.gitignore scripts/vendor/requirejs/component.json scripts/vendor/requirejs/index.html scripts/vendor/requirejs/.gitignore scripts/vendor/requirejs/component.json scripts/vendor/requirejs/LICENSE
rm -rf scripts/vendor/requirejs/package.json scripts/vendor/requirejs/README.md scripts/vendor/requirejs/tasks.txt scripts/vendor/requirejs/testBaseUrl.js scripts/vendor/requirejs/updatesubs.sh

Summary

Using require.js is a good way of keeping your javascript releases optimized and clean.  Have a go and enjoy :-)

The Power of Bower

The Power of Bower

What is it?

Bower is a package manager for web applications.  I would liken it to nuget for JavaScript   It allows you to install lots of different web artefacts and keep you dependencies clean in your project.

This is especially useful with the rise of modular javascript applications. Such as Knockout.js, Backbone.js or Angular.js.  Many of these framework use tools such as underscore.js to manage dependencies   Using Bower to get the classes required for your app simplifies things your development and build processes.

Example

Installing Bower

Step 1

Install node.js which should ship with npm

Step 2

Install Bower using npm type the following in a command prompt that can access npm:

npm install bower -g

Step 3
Create a bower config file .bowerrc in the root of the website application source as follows:

Step 4
Now we need to edit the file that tells bower where to create the directories for all your dependencies:

{
"directory" : "app/scripts/vendor"
}

I am putting my files in app/scripts/vendor.

Step 5
The next step is to tell bower what the packages are required for the application.  This is done from within a component.json file.  Please see below the format for the file:

{
"name": "Charles Bikhazi Website",
"version": "1.0.0",
"dependencies": {
"jquery": null,
"backbone-amd": null,
"underscore-amd": null,
"requirejs": null,
"roundabout": "https://github.com/fredhq/roundabout.git",
"threedubmedia": "https://github.com/threedubmedia/jquery.threedubmedia.git"
}
}

As you can see the key part in this file is the dependencies section.  You can specify the short-name in here that will lookup github for the source alternatively if this is not available you can specify the github URL   The second part of the declaration allows us to specify the version of the file if required.  Specifying null gets the latest version.

Step 6
Now comes the magic :-). If everything is setup correctly all you need to is browse to the root of directory (were your bower config files live) and run

bower install

Getting a similar output as below:

This will have the affect of creating all the directories for each library and giving you all the relevant source files you need.  the beauty of this is that all you need is to modify your .json config file and re-run install and hey presto all the latest version of the libraries you need :-)

Happy Bowering!