Today I was flipping through reading one of the presentations by Nicholas Zakas, specifically the “Scalable Javascript Applications Architecture“. Although not the first thing I read on the subject, I enjoyed the clarity with which Nicholas explains. I will try to record the impressions taken in case anyone can help.
1) Theory of modules
The theory of modules (as Nicholas calls it) tells us that one way to create an application that is scalable and easy to maintain, this should be composed of modules.
What are modules?
A module (in our terms) is one application that is part of a larger structure. Each has a job and only takes care of it.
(See Picture)
(I enjoyed this picture gives a clear picture of the meaning of magnitude).
Code
Core.register("hello-world", function(sandbox){
// Private Variables
var strPriv = "Private";
// Public Methods
return {
init: function(){
try{
sandbox.console("start the module");
} catch(ex) {
alert("sandbox not found");
}
},
destroy: function(){
// Destructor
}
};
});
Here’s an example of a module that recorded with Core.register() we will see later.
Looking at the form we see that the first parameter informs the module name and the second specifies the functionality of the module. This function receives as parameter sandbox (Also see below).
This feature will return an object with at least two methods init() and destroy() that comprise the options available in the module.
init() will be treated as the builder of the module and will be executed when the module is generated. On the other hand destroy() will be treated as the destroyer of the module running when the module is removed.
Sandbox
In software development environment called the Sandbox to test isolated where the experts on running applications. In this case, practically based on the same and that each of the modules used an isolated environment for other modules.
Code
var Sandbox = function() {
var strPrivate = "Private";
return {
alert: function(str){
alert(str + strPrivate);
},
console: function(str) {
console.log(str);
}
}
};
As we see the Sandbox, this is an element that offers a number of ways in which we interact with the application. For example, could be used to interact with the DOM of the application using a JS framework (or not) could implement a simple version and checked to make Ajax requests or validate forms, …. All this is available from the modules.
This module should only worry about what the Sandbox allowed without worrying about what lies beneath it, thus facilitating the development and functionality of each module.
Example:
// Add method notify () to Sandbox
var Sandbox = function() {
....
notify: function(opt){
// Checks prior
// .....
$("#notify #title").text(opt.title);
$("#notify #content").html(opt.content);
}
....
};
// Use the method notify () of the Sandbox from the module.
Core.register("hello-world", function(sandbox){
// Private Variables
ver ver = "1.0";
return {
init: function(){
try{
sandbox.notify({
title: "Hello World v." + ver,
content: 'This is a <strong>Test</strong>.<br />To demonstrate the use of modules'
});
} catch(ex) {
alert("sandbox not found");
}
},
destroy: function(){
// Destructor
}
};
});
In the example we see that at the start of our module, we call the method notify() from sandbox without worrying about what will make this method.
The method after a series of previous validations, simply add a title and content to an element #notify using jQuery.
Thus, the Sandbox filter made between the module and the framework controlling what this intends to do about our application.
The Core
In the above we have seen a variable Core that seems to be the cornerstone of all this. This is a small script that allows modules to register and associate a new instance of the SandBox to each of them every time you run .
var Core = function(){
// Private Variable
var modules = {};
// Instance Creams
function createInstance(moduleID){
var instance = modules[moduleID].creator(new Sandbox(this)),
name, method;
if (!debug) {
for (name in instance){
method = instance[name];
if (typeof method == "function") {
instance[name] = function(name, method) {
return function(){
try { return method.apply(this, arguments); }
catch(ex) { log(1, name + "(): " + ex.message); }
}
}
}
}
}
return instance;
}
// Public method
return {
register: function(moduleID, creator) {
modules[moduleID] = {
creator: creator,
instance: null
};
},
start: function(moduleID) {
modules[moduleID].instance = createInstance(moduleID);
modules[moduleID].instance.init();
},
stop: function(moduleID){
var data = modules[moduleID];
if (data.instance) {
data.instance.destroy();
data.instance = null;
}
},
startAll: function(){
for (var moduleID in modules) {
if (modules.hasOwnProperty(moduleID)) {
this.start(moduleID);
}
}
},
stopAll: function() {
for (var moduleID in modules) {
if (modules.hasOwnProperty(moduleID)) {
this.stop(moduleID);
}
}
}
};
}();
As we see it is a small script (this is a base, can be extended depending on the needs of the project) that allows us to build the modules we want for every application.
Example
Core.register("....", function(sandbox){});
Core.register("....", function(sandbox){});
Core.register("....", function(sandbox){});
Core.register("....", function(sandbox){});
...
// Start all modules
Core.startAll();
View Demo
Download Code
