Home > Features > Dev Depot: RequireJS, Harmonizing Asset Allocation • Bookmark   • Newsletters   • Register Search Options


Dev Depot: RequireJS, Harmonizing Asset Allocation

Dev Depot: RequireJS, Harmonizing Asset Allocation

December 26, 2013
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" Although RequireJS doesn’t require jQuery, it’s often used alongside the technology, and demands some special considerations in order to make everything smooth and easy. "

Savvy coders are increasingly making use of modular programming techniques — breaking projects into more readily manageable blocks of code that boost their reusability while making maintenance and updates easier. While these are great benefits, being able to manage the dependencies between these modules can become a problematic process.

Consider the loading of JavaScript files, for example.

Many of today’s applications make use of a range of JavaScript files, often loaded individually using a separate <script> tag for each occurrence. This hurts performance and can also cause script conflicts when files that are dependent on other files are called in the wrong order.

An easy example of this can be found in jQuery plugins, all of which are dependent on the base jQuery library, which must be loaded by your page before any of its plugins.

Enter RequireJS (www.requirejs.org), a JavaScript file and module loader designed to eliminate jQuery loading errors and other scripting conflicts, while improving the speed and quality of a website’s coding.

Optimized for in-browser use, RequireJS is compatible with Chrome 3+, Firefox 2+, IE 6+, Opera 10+ and Safari 3.2+, and can also be used in other JavaScript environments, such as Node or Rhino.

Although RequireJS doesn’t require jQuery, it’s often used alongside the technology, and demands some special considerations in order to make everything smooth and easy.

“While RequireJS loads jQuery just like any other dependency, jQuery’s wide use and extensive plugin ecosystem mean you’ll likely have other scripts in your project that also depend on jQuery,” a script spokesperson states. “You might approach your jQuery RequireJS configuration differently depending on whether you are starting a new project or whether you are adapting existing code.”

One consideration is the use of global variables, as jQuery will register itself as the global variables “$” and “jQuery,” even when it detects AMD/RequireJS.

“The AMD approach advises against the use of global functions, but the decision to turn off these jQuery globals hinges on whether you have non-AMD code that depends on them,” the spokesperson explains. “JQuery has a noConflict function that supports releasing control of the global variables and this can be automated in the require.config.”

Another consideration is module names, since jQuery defines a named AMD module “jquery” (all lower case) when it detects AMD/RequireJS, so the publisher recommends that to reduce the confusion, developers should use “jquery” as the module name in their require.config.

For example, in the require.config below, the module ID is shown on the left (jquery), while the path to the jQuery file is on the right side (jquery-1.9.0), relative to the baseUrl — in other words, the function is calling jQuery 1.9.0, located at js/lib/jquery-1.9.0.js, relative to the HTML page. Note that the path does not include the “.js” file extension:

baseUrl: ‘js/lib’,
paths: {
jquery: ‘jquery-1.9.0’

"The other (recommended) solution is to just name the file ‘jquery.js’ and place it in the baseUrl directory. Then the above paths entry is not needed,” the spokesperson added.

“You can avoid lots of configuration lines by placing the files according to the default ID-to-path convention of baseUrl + moduleID + ‘.js’.”

The RequireJS website offers a wide range of coding examples, such as illustrating how to set the baseUrl to be the directory for third-party, library code, using one extra path config in the app code. Other instances involve using a shim configuration, as well as how to modify the plugins to be wrapped in a define() instead, for further flexibility.

Other examples show how to set the path of jQuery to point to a Google-hosted CDN, which the company says, benefits users who might already have the file in the browser cache and so won’t have to download it again. One factor to note when loading an asset from a CDN is that all plugins needing that asset as a dependency, have to call define().

It will take some time to get a grasp on the flexibility, power and value of RequireJS, but if your sites make heavy use of JavaScript and jQuery, then RequireJS is a winner.


Fraudulent Brazilian Trademark Registrations Running Rampant

Although you might not think often about protecting your trademark rights in Brazil, you need to — even if you don’t yet have a single Brazilian customer. Scammers are constantly looking for... More »

Visa Cracks Down on ‘Shell’ Billing Firms

There was a time not so long ago when website operators created billing companies in favorable jurisdictions, whose sole purpose was to bill customers for services provided by the operator and remit the... More »

Randazza: Trump Victory, Big Prop 60 Win

On Tuesday afternoon, I boarded a transatlantic flight. Given all of the negativity in the 2016 presidential race, I was delighted that I would be absent for the results. I found both Donald Trump and... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.


Everything To Do With Sex Show

Jan 27 - Jan 29
Halifax, Nova Scotia

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!