Every year, Ted Neward‘s article on tech predictions for the new year, and review of technologies in the past year has been my favorite read. You can read his latest post on tech predictions for 2013 at http://blogs.tedneward.com/2013/01/01/Tech+Predictions+2013.aspx
Managing JavaScript files using RequireJS – III
In the earlier post, we discussed managing dependencies of our JavaScript files using Require JS. The application uses jQuery.js, A.js and B.js. They are loaded in order using Require js. However the browser while loading the html file, sends individual requests to each of these JS files adding an unneccesary overhead. In this post, let’s discuss how we can optimize the loading of the JS files.
The index.html as shown below has a link to the require.js file and the main script dev.js.
<html> <head> <script data-main="scripts/dev" src="require.js"></script> </head> <body> <h1>Require JS app</h1> </body> </html>
Shown below is the Network section of Chrome browser when index.html file is loaded.
As you can see, there’re are six requests send to the server. The more the number of JS files, we use the more the number of requests to the server will be sent. Let’s see how we can optimize the number of requests sent to the server.
Require JS provides an optimizer called r.js(Yes that’s the name!!!). You can download r.js from http://requirejs.org/docs/release/2.1.2/r.js. You can save r.js in the same place where require.js and index.html are placed. R.js can be run in NodeJS environment from the command line.
In the command line navigate to the scripts folder and run the following command.
node ../r.js -o name=dev out=prod.js baseUrl=.
When you run the above command an optimized JS file prod.js is generated. prod.js contains minified jquery, A and B JS files minified and optimized into one source. You can modify the index.html to use prod.js instead of dev.js as shown below.
<html> <head> <script data-main="scripts/prod" src="require.js"></script> </head> <body> <h1>Require JS app</h1> </body> </html>
The network section when index.html is loaded looks as shown below.
You’ll now notice that the number of requests send to the server has reduced by one half thanks to r.js. r.js can be used to optimize CSS files as well.
The complete code for the three series article can be downloaded from https://github.com/prabhu-durasoft/Managing_JS_Files_With_RequireJS
Managing JavaScript files using RequireJS – II
In the earlier post we created a HTML page that used three js files, jquery-1.8.3-min.js, A.js and B.js. The page had three <script> tags one for each js file. To re-iterate one of the problems with this approach as mentioned in the previous post, The single page applications that are developed today have link to multiple JS files. Changing the order of inclusion of these files lead to several problems. With new releases every now and then, this can lead to maintainence issues. In our example, changing the order of inclusion, ie., A and B followed by jQuery will make your code throw error.
Let’s solve this problem, by bringing in modularity and manage the dependencies using Require JS framework. To start-with, we’ll arrange our JS files as shown below.
The js files are organized in two folders scripts and app. Also notice the require.js and index.html present in the same level. We’ll focus on the js file “dev.js” which is the master configuration file.
The dev.js file will use the RequireJS API and have the dependencies configured as shown below.
requirejs.config({
baseUrl : "scripts",
paths : {
app : "app",
lib : "lib"
}
});
require(["lib/jquery-1.8.3.min","app/A","app/B"],function(){
console.log("Loaded all the JS files");
});
In dev.js, we first define the folder structure and specify the list of files to be loaded in the specific order. The jquery file is loaded followed by A and B js files. After loading the files the callback function is invoked.
The index.html file looks lot more cleaner and has a reference to the dev.js file but using the data-main attribute, as shown below.
<html> <head> <script data-main="scripts/dev" src="require.js"></script> </head> <body> <h1>Require JS app</h1> </body> </html>
The dependencies are now segregated and can be managed very effectively thanks to RequireJS. If you browse index.html, you will notice that the browser still sends individual requests for every JS file. This is because, we have not optimized our JavaScript code yet. Let’s discuss how we can optimize JavaScript code using RequireJS in our next post.
Managing JavaScript files using RequireJS – I
RequireJS is a JavaScript library that provides two main facilities.
- Manage dependencies of JavaScript code in our applications
- Optimize JavaScript code
In this post and subsequent posts we’ll discuss use of RequireJS in our applications. We’ll see how we can manage dependencies and optimize JavaScript code.
Let’s begin with an index.html file that uses jQuery and two other JavaScript files. The body of index.html file is nearly empty. It has a header element with some text in it.
//index.html <html> <head> <script src="jquery-1.8.3.min.js"></script> <script src="A.js"></script> <script src="B.js"></script> </head> <body> <h1>Require JS example</h1> </body> </html>
index.html refers to three JavaScript files, jquery, A.js and B.js. A.js and B.js have the following code.
//A.js
console.log("*****Loaded A");
var arr = [1,2,3];
$(arr).each(function(index,value){
console.log(value);
});
//B.js
console.log("*****Loaded B");
$().ready(function(){
$("h1").css("color","red");
});
As you can see A.js and B.js have very basic code. index.html has link to these three files with jquery being the first one that is included. There’re couple of problems in this approach.
- The single page applications that are developed today have link to multiple JS files. Changing the order of inclusion of these files lead to several problems. With new releases every now and then, this can lead to maintainence issues. In our example, changing the order of inclusion, ie., A and B followed by jQuery will make your code throw error.
-
When the browser loads index.html you will find from the following picture, that it sends four HTTP requests to the server. The more files you include the more requests to the server. Let’s not forget the fact that we’ve not included CSS and images here.
. I have named the html file “indexWithoutUsingRequireJS.html” as shown in the picture.
In our next article, we’ll see how we can modularize our JavaScript code using RequireJS framework, so that our application is easier to maintain.
Nice article(s) on object graphs in JavaScript
Though a pretty old one, Tim Caswell‘s articles on JavaScript and the Object-Oriented(???) concepts are really popular and worth having in your bookmarks list.
The three series article that talk about object graphs in JavaScript are given below.
- http://howtonode.org/object-graphs
- http://howtonode.org/object-graphs-2
- http://howtonode.org/object-graphs-3
Tim Caswell’s site serves as a very good source for Node JS developers as well.