Modular JavaScript Architecture

Update: This example has now grown into a full fledged, much better project, that you can check out on the Google Code page.

These days web development, and in particular JavaScript applications, are becoming more and more sophisticated and cumbersome. In addition to plenty of boilerplate code (I suggest you take a look at the HTML 5 Boilerplate), JavaScript programmers often find themselves copying over code they’ve written elsewhere into a new project, and integrating it with other code particular to that project. Managing these separate pieces of code that one finds themselves using in a project (or across multiple projects) can be trying at times. However, there is a solution.

A little while back, Nicholas Zakas from Yahoo! did a very interesting presentation on Scalable JavaScript Application Architecture. In it he described an architecture that separate pieces of a JavaScript application into separate modules based on the part of the HTML document that they interact with. Each module is only allowed to interact with that piece of markup, and has no direct link with the other modules. Modules are able to communicate indirectly with signals, sending a named signal containing data to modules that are listening for that signal.

The past two days I worked on my own architecture, based on his proposition, but with one major difference. His theoretical architecture has five layers of abstraction: library, base, core, sandbox, and modules. It also abstracts away the JavaScript library specific code, so that you can switch between different libraries like jQuery, YUI, Prototype, etc. His architecture is designed to not assume things. I decided that I could afford to do so, so I to take out the middleman, and created three layers of abstraction: jQuery, core, and modules. You sacrifice some of the scalability (being able to easily change JavaScript libraries without changing module code) for increased performance and ease of implementation.

I have an example of what the architecture is easily capable of here (with some Sammy.js thrown in for fun).

There are likely still some ways which I can improve, add to, and optimize this framework, but so far it seems to be working brilliantly.

Architecture Core

/*
 *************************************************************
 *
 * Title: Architecture Core
 * Author: Corey Schram
 *
 * Description: JavaScript Architecture Core. jQuery version.
 * This Application Architecture is designed to make developing
 * scalable, modular JavaScript applications easy and quicker.
 *
 * It uses jQuery for it's base.
 *
 * Created: 12/24/2010
 * Modified: 12/24/2010
 *
 *************************************************************
 */
// Self-Invoking Anonymous Function to create the Core Object
var Core = (function() {
    // Container for all loaded Modules
    var modules = {};
    // Signal Handlers
    var signals = {};
    /*
     * Summary: Send a signal to listening modules
     * Arguments: Signal object with the attributes 'type' and 'data'
     */
    function sendSignal(type, data) {
        if (signals.hasOwnProperty(type)) {
            for (var i = 0; i < signals[type].length; i++) {
                signals[type][i](data);
            }
        }
    }
    /*
     * Summary: Register a signal listener.
     * Arguments: Signal type and handler function
     */
    function registerSignal(type, handle) {
        if (signals.hasOwnProperty(type)) {
            signals[type].append(handle);
        } else {
            signals[type] = [handle];
        }
    }
    /*
     * Core Object
     */
    return {
        /*
         * Summary: Initialize the core. Initializes all Modules.
         */
        init : function () {
            for (var name in modules) {
                modules[name].init();
            }
        },
        /*
         * Summary: Create a new Module
         * Arguments: Module name (and id of the root element) and module object
         */
        createModule : function (name, obj) {
            var module = jQuery.extend($('#' + name), obj);
            module.send = sendSignal;
            module.register = registerSignal;
            modules[name] = module;
        },
        /*
         * Summary: Remove a module
         * Arguments: Module name and flag whether the root html element should
         * be deleted as well.
         */
        removeModule : function (name, deleteElem) {
            if (deleteElem) {
                modules[name].container.hide();
            }
            modules[name].destroy();
            delete modules[name];
        }
    };
}());

Module Example

/*
 *******************************************************
 *
 * Title: Test Module
 * Author: Corey Schram
 *
 * Description: Test JavaScript module for a test JavaScript Application
 * Architecture.
 *
 * Created: 12/23/2010
 * Modified: 12/23/2010
 *
 *******************************************************
 */
Core.createModule('header', {
    init : function (sammy) {
        var that = this;
        this.register('toggled', function (data) {
            if (data) {
                that.html('Closed');
            } else {
                that.html('Open');
            }
        });
    }
});
Core.createModule('test-module', {
    /*
     * Summary: Initiazer method. Called when the module is
     * initialized by the Core.
     */
    init : function () {
        this.collapsed = false;
        var that = this;
        this.find('.toggle-bar').click(function (event) {
            that.onToggle(event);
        });
    },
    /*
     * Summary: Destructor method. Called when the module is destroyed
     * by the core.
     */
    destroy : function () {
        this.unbind('click', this.onToggle);
    },
    /*
     * Summary: Event handler for when the toggle bar is pressed.
     */
    onToggle : function (event) {
        var content = this.find('.content');
        if (this.collapsed) {
            this.collapsed = false;
            content.slideDown(500);
            content.find('.inner').fadeIn(400);
        } else {
            this.collapsed = true;
            content.slideUp(500);
            content.find('.inner').fadeOut(250);
        }
        // Send a signal of the type 'toggled'
        this.send('toggled', this.collapsed);
    }
});