background preloader


Facebook Twitter

Simplicity and JavaScript modules. All of us are looking for simplicity, but there are different levels to simplification.

Simplicity and JavaScript modules

This is a story of what could be considered simple for modules in JavaScript. This post was prompted by the removal the optional AMD define() call in underscore. For a post on simplicity, it is a bit long, but I'm not a great writer, and I find I normally edit myself so much as to lose interest in posting, so then I end up not communicating. Better to start communicating even if imperfect.

I want to lay out why AMD modules are the simplest overall module solution for JavaScript at the moment, and where other approaches are not as simple as they may appear. Script Tags JavaScript does not have syntax for modules, but most programming languages do. JavaScript on the web has meant using script tags and manually ordering those script tags so that dependencies on global objects are worked out correctly. That sucks for the following reasons: CommonJS require('some/id') to reference a bit of code.

Return value; AMD is Not the Answer. Every so often, we get requests to make Ember.js support AMD (asynchronous module definition).

AMD is Not the Answer

Until today, I had yet to hear anyone articulate why the advantages outweighed the (in my opinion) many disadvantages. Then, James Burke wrote an article called Simplicity and JavaScript modules that has so far done the best job outlining why AMD is good. However, I disagree with many of the assumptions and find many of the arguments outright contradictory. So, while James is both smart and I’m sure good-looking (and I agree with his comments on CommonJS), here are the reasons I think he is wrong about AMD. Build Tools Are Okay However, for those of us who came from Dojo, requiring a server tool or compile step to just develop in JS was a complication. I have a lot of respect for Alex but, if this is his current opinion, he’s wrong. Many HTTP Requests AMD expects every module to be contained in a separate file. But wait, I thought we were just arguing that build tools are bad? Too Much Ceremony. CommonJS: Why and How. As I said last time, I want to start moving more of my stuff into npm, and so I think perhaps today would be a good time to explain why I think this is the right way to go, and how you can use it in your own JS projects.

CommonJS: Why and How

Module Systems However, while there are many good reasons to use JavaScript, it has a reputation for scaling poorly with project size. In my opinion, the main cause of this is that JavaScript lacks anything even remotely resembling a coherent module system. This omission makes it inordinately difficult to apply sensible practices like: Hiding implementation details behind interfacesSplitting large projects into multiple filesReusing functionality from libraries and other code bases Ignoring these problems isn’t an option. Ad-Hoc The obvious way to emulate a module in JavaScript would be to use a closure. Here MyModule would become the interface for the module and the implementation of the module would be hidden away within the function() block. CommonJS var lib = require(". JavaScript Module Pattern: In-Depth.

The module pattern is a common JavaScript coding pattern.

JavaScript Module Pattern: In-Depth

It’s generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I’ll review the basics and cover some truly remarkable advanced topics, including one which I think is original. The Basics We’ll start out with a simple overview of the module pattern, which has been well-known since Eric Miraglia (of YUI) first blogged about it three years ago. If you’re already familiar with the module pattern, feel free to skip ahead to “Advanced Patterns”. Anonymous Closures This is the fundamental construct that makes it all possible, and really is the single best feature of JavaScript. (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }()); Notice the () around the anonymous function. Global Import JavaScript has a feature known as implied globals. Luckily, our anonymous function provides an easy alternative. CommonJS. CommonJS is a project with the goal of specifying an ecosystem for JavaScript outside the browser (for example, on the server or for native desktop applications).


The project was started by Kevin Dangoor in January 2009 and initially named ServerJS.[1] In August 2009, the project was renamed CommonJS to show the broader applicability of the APIs.[2] Specifications are created and approved in an open process. A specification is only considered final after it has been finished by multiple implementations.[3] CommonJS is not affiliated with the Ecma International group TC39 working on ECMAScript, but some members of TC39 participate in the project.[4] Specifications[edit] The list of specifications includes:[5] Current[edit] Modules/1.0 (Superseded by Modules/1.1)Modules/1.1Modules/1.1.1Packages/1.0Promises/BPromises/CSystem/1.0 Proposals[edit]