How to organize JS files in an Apcelerator Titanium project

Question

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

It is very simple to create long procedural files for each type of application. Is there a way to incorporate MVC or some structure into a 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 a view, and you pass (or set) model data against the view.

In Titanium, you can decompose your application with a few good built-in mechanisms:

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

• Titanium.UI.createWindow - you can create a new view as a property of a new window pass in the URL of another JS, which will create a new JS subcontext and allow you to save your own variable space (but still give you access to your parent).

In addition, in Titanium, you can create folders that allow you to logically organize your application in a way that suits you and your application.

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

Additional information about this statement: Require

Additional module information: Modules

Answer 2

Since I did not find a suitable MVC solution for the Titanium mobile project, I came up with the following approach. For small applications, this may be overly designed, but may help support growing applications.

Folder structure:

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

Separating views, models, and controllers requires a namespace, so we define it in app.js, which is our main controller:

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

In folders, we put separate JavaScript files for each component. To do this, we could use the lightweight OOP library for JavaScript, such as MooTools or Prototype, or define simple JS functions as our objects. If you also want to inherit the parent classes, the 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 in the app.js file all the necessary model / view / controller classes with Ti.include () 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 now assumes that the controller “controls” the state of the view and transfers data from the model to the view. A view consists only of interface elements and styling properties. Any action performed in the user interface raises an event that tells the controller to take the required action.

But, of course, the exact definition of MVC may vary depending on your personal taste;)

Answer 3

It can also help: The basic structure of the Titanium mobile project organization: https://github.com/krawaller/Struct

Answer 4

Let me update this question as most of the answers are being replaced. In the fourth quarter of 2012, Appcelerator released the Alloy MVC (beta) platform along with the latest version of the IDE and SDK, Titanium Studio 3.0 and SDK 3.0. The alloy is fully integrated with Studio, so it’s quite simple to get a basic application that works in less than 15 minutes. The alloy introduces a significant permutation of folders: the / app folder is now where all the development code is.

Folder / Resources , where the code used to live is used, is now the updated equivalent of the / build folder. Compiled code in / Resources is overwritten in each assembly.

I created a short introductory screencast for creating the Fusion project. You can view it through my folder folder.

Create alloy project

Answer 5

Appcelerator seems to have made its own Appcelerator MVC in a market that I haven't rated yet.

Further information: http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/