Imediava's Blog

Just another WordPress.com site

Monthly Archives: May 2012

Added benefits of using require.js

In a previous post I explained how require.js can help organize javascript code into modules that behave in a way similar to packages in programming languages like java. The main benefit of this approach is that clients don’t need to know a module’s internal dependencies to import it.

In the following post I’ll explain two other derived benefits of using require.js.

Benefit on code quality

Cleaner APIs and namespace

When defining modules with require.js the developer is forced to think about what variables the module is going to share. Forcing the programmer to decide what he wants to expose, and what are implementation specific details that need to be hidden leads to better encapsulated code.

In addition to it when the developer is importing a module with require.js the properties and methods exported by the module are accessible through a “package” variable. This allows two different modules to export an attribute with the same name without one of them hiding the value from the other.

To give an equivalent example it is as if in python a whole module was imported instead of each of its components. If someone wanted to avoid having to repeat the name of a module for a variable that is accessed many times it could still be done by creating a new variable:

// myModule1 = {myVar:1}
// myModule2 = {myVar:2}

// in python: import myModule1, myModule2
requirejs(['myModule1', 'myModule2'], function (m1, m2) {
	

        console.log(m1.myVar);
        console.log(m2.myVar);
        
        //To simulate loading a module's attribbute

        //in python: from myModule import myVar
        myVar = m1.myVar;

});

The added benefit to this is that importing modules in this way the namespace is not polluted. There are few chances of conflicts between variables it doesn’t matter how many modules are imported. This allows things like loading two different versions of the same library.

Benefit on performance

Loading smaller resources with lower requests

There are mainly two factors associated with the way the resources are loaded in the browser that affect the loading time of a page.

  1. The size of the resources: The bigger the resources the longer the loading time.
  2. The number of resources: The more resources the longer the time because there are more requests needed.

To deal with the first the best approach when talking about javascript files is to minify the code. Minify consists in removing all characters of the code that are only useful to make the code more readable.

For decreasing the number of web requests the usual solution (without getting into caching) is to group all the files into one without modifying the code. This way the number of requests needed to get the resources from the server is reduced to one.

Luckily require.js comes with a tool to automatically minify and group all the modules into one. This tool is capable of minifying every CSS file in your project and minify and group all the javascript files whose dependencies have been defined as require.js modules. The instructions of how to use the tool can be found at http://requirejs.org/docs/optimization.html.

PS: For those interested in further optimization of their webpages performance, I strongly recommend to have a look at the following link with a list of recommendations by the guys from yahoo.

Advertisements
%d bloggers like this: