How to organize JS files in a Appcelerator Titanium project

Question

I have recently started creating an iPhone application using Appcelerator's Titanium. Since the application is essentially all JS, I needed some advice on how I should organize this project.

It's becoming very easy to just create long procedural files for each view in the application. Is there a way I can incorporate MVC, or some structure to the project?

Thanks, I appreciate it. -Tilo

Answer 1

Titanium itself is essentially MVC given that your app.js file is the main controller and each View you create is the view and you pass (or set) model data against the view.

In Titanium, you can decompose your application using a couple of nice built-in mechanisms:

1. Titanium.include - Titanium.include allows you to include one or more JS files in place much like the C #include compiler directive. You can put common functions and JS classes in this file and then include them where ever you want them imported and available.

2. Titanium.UI.createWindow - you can create a new View as as a property of the new Window pass in a URL to another JS context which will create a new JS sub-context and allow you to maintain its own variable space (but still give you access back to your parent).

Also, in Titanium, you can create folders that allow you to logically organize your application in a way that is suitable to you and your application.

Edit: Today, the Titanium.Include method is deprecated. As mentionned in the documentation, we should create a CommonJS module and use the require() statement.

More information about this statement : Require

More information about modules : Modules

Answer 2

As I was not finding an appropriate MVC solution for a Titanium mobile project, I came up with the following approach. For small apps this might be over-engineered but could help for maintaining growing applications.

Folder structure:

/Resources
  /model
  /view
  /controller
  /ui
  /iphone
  /android
  app.js
  app.jss

For separating views, models and controllers a namespace is needed, so we define it in the app.js, which is our main controller:

var app = {
  view: {},
  controller: {},
  model: {},
  ui: {}
}

Within the folders we place single JavaScript files for each component. For this we could either use a lightweight JavaScript OOP library, such as MooTools or Prototype or define simple JS functions as our objects. If you also want to inherit from parent classes, a library definitely makes sense.

Examples:

# Resources/controller/MyController.js
app.controller.MyController = function() {
   return {
      getView: function() {
         return new app.view.MyView().getView();
      }
   }
}

# Resources/view/MyView.js
app.view.MyView = function() {
   return {
      getView: function() {
         return Ti.UI.createWindow({...});
      }
   }
}

# Resources/view/MyModel.js
app.model.MyModel = function() {
   return {
      some: "data",
      foo: "bar"
   }
}

After that we can include all needed model/view/controller classes with Ti.include() in the app.js file and reference the components with our namespace:

Ti.include("controller/MyController.js");
Ti.include("view/MyView.js");
var myController = new app.controller.MyController();
var myView = myController.getView();
myView.open();

The MVC approach would now presume that the controller "controls" the state of the view and passes data from the model into the view. The view consists only of UI elements and properties for styling. Any action which is made in the UI fires an event, which tells the controller to perform the desired action.

But of course, the exact definition of MVC might be different according to your personal taste ;)