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!

The Death of Flash?

The Death of Flash?

Background

The throughput of digital work these days normally requires a level of highly interactive, video or animation elements.  This means that the word flash get banded about during discussions. I think it’s important we distinguish the difference between flash and creating digital offerings that include interaction, animation or video.

History

Over the last 8-10 year or so Flash Technology has enabled us to create web based animation and interactivity that most other technologies cannot offer.  With flash we can create highly stylised and interactive, web pages, banners, games and websites.  However there are a number of problems with Flash that argue it is not always the right technology to use. 

Over the past 2-3 years HTML and its associated technology (JavaScript and CSS3) has evolved (HT ML5) to a point that it can offer most if not all the features that flash offers. 

Current Pro and Cons

Below are some of the pros and cons of each technology:

Flash

Pros

• ·         Re-scalable vector graphics providing resolution & cross-browser independence 
• ·         Excellent multimedia support & high degree of interactivity 

Cons

• ·         Proprietary technology & high cost of development 
• ·         Breaks web fundamentals, prone to design abuse and security vulnerabilities   
• ·         Limited developer community, resulting in expensive resources

HTML5

Pros

• ·         Short learning curve for Web Developers 
• ·         Open Standard defined by W3C & backed by industry heavyweights including Apple, Microsoft, Google and several others 
• ·         Promotes the “Write once, run everywhere” paradigm for web development
• ·         Great advocate for hardware acceleration, provides unmatched power to developers 
• ·         Zero development cost 

Cons

• ·         Still a draft, subject to change 
• ·         Evolving standard, browsers lack full support

Lessons learned and the future

So where does this leave us?  Well I think we need to identify the core issues for most companies which is cost and the ability to find resource for projects and align these with the right technology.  Both of the these issue would point to using HTML5 for new projects as the cost of using HTML will keep going down over using flash and the number of developers for HTML5 is now outstripping flash.

However this is not to say that we should never use flash ever again as we may need to maintain current flash websites and its possible the client will explicitly ask for or need flash.