First class dependency objects in ECMAScript Harmony

My favorite perk of Require.JS is how dependencies are sent as arguments to a factory function. Treating dependencies as first class objects makes much more sense to me than polluting the window object - something that happens too much with other dependency management solutions (I'm looking at you, Steal.JS).

I was curious how I might get this functionality with the next generation of JavaScript - namely, ECMAScript Harmony. No browsers implement Harmony's module system just yet, so pardon the pseudocode.

First class dependency objects via Require.JS

define([
  '../src/helloworld',
  '../lib/jquery',
],
function(helloworld, $){
  $('body').html(helloworld.sayIt());
});

In this example, helloworld.js and jquery.js are fully loaded first, then passed as objects named helloworld and $, respectively. Once in the factory function, I have free reign over the dependencies' methods, properties, and prototypes.

First class dependency objects via ECMAScript Harmony

module helloworld from '../src/helloworld.js';
module $ from '../lib/jquery.js';
$('body').html(helloworld.sayIt());        

This is the same result as Require.JS - the dependencies are loaded asynchronously (Harmony loads modules at compile time), and the dependencies are nicely encapsulated in their respective first class objects.

As it stands, I find the Require.JS syntax to be more readable. The list of dependencies and their mapping to objects is crystal clear. Since I haven't been able to test ECMAScript Harmony modules in a browser yet, the jury is still out on the pleasures of the new module syntax.

Filed under 


it should be noted that in your require.js example, without wrapping jquery in a define that returns jQuery, it does pollute the window object, with window.jQuery.

Add new comment

Restricted HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>&lt;code&gt;</code>, <code>&lt;blockcode&gt;</code>, <code>&lt;apache&gt;</code>, <code>&lt;c&gt;</code>, <code>&lt;cpp&gt;</code>, <code>&lt;css&gt;</code>, <code>&lt;drupal5&gt;</code>, <code>&lt;drupal6&gt;</code>, <code>&lt;html&gt;</code>, <code>&lt;java&gt;</code>, <code>&lt;javascript&gt;</code>, <code>&lt;mysql&gt;</code>, <code>&lt;php&gt;</code>, <code>&lt;python&gt;</code>, <code>&lt;ruby&gt;</code>, <code>&lt;sql&gt;</code>, <code>&lt;xml&gt;</code>. The supported tag styles are: <code>&lt;foo&gt;</code>, <code>[foo]</code>.

About the Author

Tony Rasmussen, Vice President of Growth

Tony believes that customers' technology problems can be solved with deep respect, sound data, strong process, and adventurous teams. He uses data-driven methods to improve all stages of the development lifecycle – from design, to beta, to final deployment. With numerous ties to the open-source community, Tony also works to solve client problems faster and more effectively with well-tested open-source solutions.

Several dozen products have shipped under his guidance over the past 14 years: collaborative internal sites at Nike, social networking integrations with Adidas, server-monitoring websites at Hewlett Packard, open source contributions to Drupal, entertainment sites such as The Emmys, community sites such as FearNET, and HTML5 apps for tablets and Smart TVs.