Best practice for Appcelerator application structure

Question

I am reworking my iOS Appcelerator app for the third time trying to find the "best" way of organizing and developing it to optimize speed and memory usage.

I want to be able to:

1. Use custom UI components.
2. Make requests to remote REST API.
3. Use database for local storage / caching.

I need these "parts" to be separate "modules".

Which way is the best to achieve this? I am thinking perhaps a good MVC structure? Please share ideas, resources and best practices. Very thankful for all input!

Answer 1

Well first go to the source, this great talk by Kevin Whinnery on Best Practices. This talk encapsulates pretty much exactly what your looking for, going over:

1. Cross platform UI Approaches - (if you want to skip this, number 2 starts at 14:35)
2. Component Oriented Applications
3. Modular Javascript Techniques
4. Code walkthroughs!

Also, I highly recommend using the Template Applications when creating a new project, these templates generally espouse the concepts of what Kevin talks about, focusing on modular development. These should only be used with Titanium SDK > 1.8.

A good thing to keep in mind (and take advantage of) is that Titanium can be used just like any other Javascript environment, so wonderful things like "require.js" can be used (and its recommended to do this).

Here some code for your three requirements

Custom UI Components (Use CommonJS!)

To create custom component (short of modules) I personally use the CommonJS approach, using things like module.exports, and the require() command. Here is an example of a custom UI component inside a pretend file called DetailView.js:

function DetailView(argumentString) {
    var self = Ti.UI.createView(); // Create the base view, we 

    var lbl = Ti.UI.createLabel({
    text:'Please select an item named '+agumentString,
    height:'auto',
        width:'auto',
    color:'#000'
    });
    self.add(lbl);
    return self;
};

module.exports = DetailView; // This makes this component available when we require() it

This is just small custom module that wraps a label, which you can add a extra title string to. To create this module you just use require according to the CommonJS model.

app.js

// Init our custom component, use it just like any other titanium UI element
var infoView = require('InfoView')('title argument');
// Add to the window
var win = Ti.UI.currentWindow
win.add(infoView);

Make Requests to Remote REST API

Very easy to do, heres the code, you can also wrap this up easily in a CommonJS module.

// Create the object to send (JSON)
var obj = {title : 'A fancy title'};

// Create the HTTP object
var xhr_getstep = Titanium.Network.createHTTPClient();
// Listener for the response
xhr_getstep.onload = function(e) {
    // Do something with the response
    var response = this.responseText;
};
Listener / callback for the error
xhr_getstep.onerror = function() {
    Ti.API.info('[ERROR] WebService failed');
};
xhr_getstep.open("POST", 'http://yourwebsite.com/webservice/');
xhr_getstep.setRequestHeader("Content-Type", "application/json");
xhr_getstep.send(obj); 

Use database for local storage / caching.

This is also very simple to do (if you want to use SQL, noSQL may require some more setup). Really this is just leveraging the API, check the docs here.

As a quick example, to load a database from your resources directory (with table called users, and two field names, "UserID" and "FirstName") and SELECT from it:

var db = Titanium.Database.open('usersDB.db'); // Open database
var dbrows = db.execute('SELECT * FROM users');
while (dbrows.isValidRow()) {
    var userID = dbrows.fieldByName('UserID');
    var fname = dbrows.fieldByName('FirstName');

    // Trigger UI event, populate table, whatever you want
    //.......
}

Hope these examples help you in how you layout your modular architecture! They have helped keep me sane for many apps.

EDIT: As an addendum about MVC. A large section of the Titanium user base use Appcelerator MVC and TiMVC, I'm not really a fan (I feel like I loose some of the power and flexibility of the language) but it is very easy to use an MVC framework on top of this as well.