Organizing JS code with Alloy and CommonJS in Titanium projects

Question

I'm learning with Titanium to make iPhone/Android apps. I'm using Alloy MVC framework. I never used javascript before, apart from simple scripts in HTML to access the DOM or something like that, so I never needed to structure the code before.

Now, with Titanium, I must use a lot of JS code and I was looking for ways to structure my code. Basically I found 3 ways to do it: prototype, namespace and functions inside functions.

Simple example for each:

Prototype:

NavigationController = function() {
    this.windowStack = [];
};

NavigationController.prototype.open = function(windowToOpen) {
    //add the window to the stack of windows managed by the controller
    this.windowStack.push(windowToOpen);

    //grab a copy of the current nav controller for use in the callback
    var that = this;
    windowToOpen.addEventListener('close', function() {
        if (that.windowStack.length > 1)
        {
            that.windowStack.pop();
        }
    });

    if(Ti.Platform.osname === 'android') {
        windowToOpen.open();
    } else {
        this.navGroup.open(windowToOpen);
    }
};

NavigationController.prototype.back = function(w) {
    //store a copy of all the current windows on the stack
    if(Ti.Platform.osname === 'android') {
        w.close();
    } else {
        this.navGroup.close(w);
    }
};

module.exports = NavigationController;

Using it as:

var NavigationController = require('navigator');
var navController = new NavigationController();

Namespace (or I think is something like that, coz the use of me = {}):

exports.createNavigatorGroup = function() {
    var me = {};

    if (OS_IOS) {   
        var navGroup = Titanium.UI.iPhone.createNavigationGroup();  
        var winNav = Titanium.UI.createWindow();
        winNav.add(navGroup);

        me.open = function(win) {
            if (!navGroup.window) {
                // First time call, add the window to the navigator and open the navigator window
                navGroup.window = win;
                winNav.open();
            } else {
                // All other calls, open the window through the navigator
                navGroup.open(win);
            }
        };

        me.setRightButton = function(win, button) {
            win.setRightNavButton(button);
        };

        me.close = function(win) {
            if (navGroup.window) {
                // Close the window on this nav
                navGroup.close(win);
            }
        };
    };

    return me;
};

Using it as:

var ui = require('navigation');
var nav = ui.createNavigatorGroup();

Functions inside functions:

function foobar(){
    this.foo = function(){
        console.log('Hello foo');
    }

    this.bar = function(){
        console.log('Hello bar');
    }
}

// expose foobar to other modules
exports.foobar = foobar;

Using it as:

var foobar = require('foobar').foobar
var test = new foobar();

test.bar(); // 'Hello bar'

And now my question is: which is the better to maintain code clean and clear? It seems that prototype is clear an easy to read/mantain. Namespace confuses me a bit but only needs to execute the initial function to be "available" (no use of new while declaring it, I suppose because it returns the object?namespace? "me"). Finally, functions inside functions is similar to the last, so I don't know exactly the difference, but is useful to export only the main function and have all the inside functions available for use it later.

Maybe the last two possibilities are the same, and I'm messing concepts.

Remember that I'm searching for a good way to structure the code and have functions available to other modules and also inside the own module.

I appreciate any clarification.

Answer 1

In the examples that they release, Appcelerator appears to follow the non-prototype approach. You can see it in the examples they have released: https://github.com/appcelerator/Field-Service-App.

I've seen a lot of different approaches to structuring applications in Titanium before Alloy. Since Alloy, I've found following the development team's examples helpful to me.

With that being said, it seems to me that all of this is still under interpretation and open to change and community development. Before Alloy there were some great community suggestions on structuring an app and I believe that it is still open with Alloy. Often when I find someone's example code I see something they did with it that appears to organize it a bit better than I thought of. It seems to make it a bit easier.

I think you should structure your application in a way that makes sense to you. You may stumble on to a better and easier way of developing applications with Alloy, because you are looking at it critically.

I haven't found a lot of extensive Alloy examples, but Field-Service-App makes sense to me. They have a nice separation of the elements in the application beyond MVC. Check it out.