PureMVC native JavaScript port

PureMVC native JavaScript port

Now that I have implemented a Unit Tests Suite for PureMVC JavaScript ports I couldn't resist to create a native JavaScript PureMVC port. By "native" I mean that this port doesn't use any external library but PureMVC classes themselves. The port uses "org.puremvc.js.standard" as namespace because I think this is a good thing to refer to it as the JavaScript standard port.

When I started to work with PureMVC in JavaScript in 2008 I thought this was not possible to use PureMVC alone with JavaScript to develop maintainable projects. My main fears were class name collision and class declaration order. But time passed, I worked since on JavaScript projects with near 300 classes using only a micro-architecture (my Objs library) to maintain class namespaces for reflection on rare cases. All of this worked pretty well, I thought last week to create a PureMVC port to native JavaScript only.

But this is not only a personal challenge. Now that we have an agnostic Unit Test Suite and an agnostic PureMVC port, we can easily create applications using jQuery as User Interface (I mean avoiding any UI components compatibility with others libraries). And what I really wanted to create was a PureMVC EmployeeAdmin for jQueryMobile as few applications already exists for and I need to learn how to use it. I'm already working on it and I think to be able to release it for the next week-end.

Next step will be to create a PureMVC EmployeeAdmin Demo with this standard port using jQuery UI (the standard jQuery version, so not the mobile one). My hope is that it will help in creating future Employee Admin port to other frameworks.

Using the native JavaScript port

As the port doesn't use any external library, it doesn't define namespaces for classes nor use any predefined method to extend classes. If you already have an experience in working in native JavaScript for class inheritance you know that Function.prototype helper is one of the better way to achieve inheritance in JavaScript.

The only problem is that you have to avoid to run any code in your constructor because without any external library extending is done like this:

/**
 * @constructor
 */
function MySuperClass()
{
    this.message = "Hello, World!";
}
 
/**
 * @type {String}
 * @private
 */
MySuperClass.prototype.message = "";
 
/**
 * Display an alert containing the <code>message</code> property value.
 */
MySuperClass.prototype.myMethod = function()
{
    alert(this.message);
}
 
/**
 * @constructor
 * @extends MySuperClass
 */
function MySubClass(){}
MySubClass.prototype = new MySuperClass(); //Here is our problem
 
//Test the implementation
var myClass = new MySubClass();
myClass.myMethod(); //Display an alert containing "Hello, World!"

Our problem is that we need to construct at least an instance of the MySuperClass class to populate the MySubClass class prototype with MySuperClass methods we need to call its constructor. The code executed in the constructor could sometime lead to serious problems. What JavaScript developers are used to, is to defer initialization of their classes in an init method which is called after the class construction.

Here is how this is implemented in the PureMVC standard JavaScript port:

/**
 * @constructor
 */
function MySuperClass(){}
 
/**
 * Initialize a <code>MySuperClass</code> instance.
 */
MySuperClass.prototype.initialize = function()
{
	this.message = "Hello, World!";
 
	return this;
}
 
/**
 * @type {String}
 * @private
 */
MySuperClass.prototype.message = "";
 
MySuperClass.prototype.myMethod = function()
{
    alert(this.message);
}
 
/**
 * @constructor
 * @extends MySuperClass
 */
function MySubClass(){}
 
/**
 * @override
 *
 * Initialize a <code>MySubClass</code> instance.
 */
MySubClass.prototype.initialize = function()
{
	MySuperClass.prototype.initialize.call(this);
 
        //We can run the code we're used to in the constructor here.
 
	return this;
}
 
/**
 * <code>MySubClass extend the <code>MySuperClass</code> class.
 */
MySubClass.prototype = new MySuperClass();
 
//Test the implementation
var myClass = new MySubClass().initialize(); //Problem solved
myClass.myMethod(); //Display an alert containing "Hello, World!"

As we use a little trick by returning this in the initialize method, it doesn't complicate class construction that much and only need to add a method to each class. ExtJS and Prototype use the exact same routine (I named the initialize method against theirs to ease things a little).

Download

PureMVC JavaScript Standard port

This port follow the same conventions I used in the PureMVC PrototypeJS port, the project contains Unit Tests Suite using YUITest, a debug and minified version of the port using YUICompressor. It is deployed on GitHub.

2 thoughts on “PureMVC native JavaScript port

  1. Pingback: Tweets that mention Tekool.net - PureMVC native JavaScript port -- Topsy.com

  2. Pingback: PureMVC in Dojo « Bill White's Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

*

  Am Not Spammer

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>