Choosing Alloy for Declarative UI and Data Binding in Titanium Projects

Decision: When to Pick Alloy

In a Titanium mobile project you can write UI and logic directly in JavaScript or use Appcelerator’s Alloy framework. Alloy brings a declarative XML view layer, automatic data binding, and MVC separation. The decision hinges on two main constraints:

• SDK version – Alloy requires Titanium SDK 3.2 or newer. Projects targeting older SDKs must stay with classic JavaScript.
• Control vs. Convenience – Alloy abstracts many native API details; if you need fine‑grained native access or extremely small bundle sizes, classic JavaScript is preferable.

Options Compared in a Compact Table

Feature	Alloy	Classic Titanium
UI definition	XML + TSS (CSS‑like)	JavaScript UI objects
Data binding	Built‑in, one‑line binding syntax	Manual event listeners
Build time	+30‑60 s (code generation)	Fast (no generation)
Bundle size	+5–10 MB (framework bundles)	Minimal overhead
Native API access	Via $.api or Ti calls	Direct Ti calls
Memory leaks	Potential from observers if models live too long	Only if you create leaks yourself
Learning curve	XML + MVC concepts	Pure JavaScript

Trade‑offs Explained

Speed of UI development – Alloy’s XML lets you prototype screens in minutes; classic JavaScript requires constructing each view component in code.

Runtime performance – Both compile to native code, but Alloy’s data binding incurs a small runtime overhead for observer notifications. In most apps this is negligible, but in a tight loop with thousands of items it can add latency.

Memory management – Alloy automatically keeps references to models that are bound to views. If you forget to call model.destroy() or remove event listeners, the garbage collector will not reclaim memory, leading to leaks during long sessions.

Bundle size – The generated JavaScript and TSS files add ~5–10 MB to the final APK/IPA. For apps where the initial download must be <200 KB, classic Titanium may be preferable.

Concrete Implementation: Auto‑Updating ListView

Below is a minimal Alloy project that demonstrates a ListView bound to a SQLite table. Inserting a row via the Alloy console automatically refreshes the list without any manual reload.

1. Project Setup

# Run from a terminal in the project root
# Requires Titanium SDK ≥ 3.2

tiannium create --type alloy --name DemoAlloy
cd DemoAlloy

2. Database Helper (app/controllers/db.js)

exports.open = function() {
  var db = Ti.Database.open('demo.db');
  db.execute('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, title TEXT)');
  return db;
};

3. Model (app/models/item.js)

var db = require('db').open();

exports.definition = {
  config: {
    columns: {
      id: 'INTEGER PRIMARY KEY AUTOINCREMENT',
      title: 'TEXT'
    },
    adapter: {
      type: 'sql',
      collection_name: 'items',
      db_name: 'demo.db'
    }
  },
  extendModel: function(Model) {
    _.extend(Model.prototype, {
      // Custom methods can be added here
    });
    return Model;
  },
  extendCollection: function(Collection) {
    _.extend(Collection.prototype, {
      // Custom methods can be added here
    });
    return Collection;
  }
};

// Populate with an initial item if empty
var count = db.execute('SELECT COUNT(*) AS c FROM items').fieldByName('c');
if (count === 0) {
  db.execute('INSERT INTO items (title) VALUES (?)', 'Initial item');
}

4. View (app/views/index.xml)

<Alloy>
  <Window title="Alloy Demo" layout="vertical">
    <ListView id="list" bindId="item" defaultItemTemplate="default" >
      <ListItemTemplate name="default">
        <Label text="${title}" textAlign="center" color="#333" />
      </ListItemTemplate>
    </ListView>
  </Window>
</Alloy>

5. Controller (app/controllers/index.js)

var Item = Alloy.createModel('item');
var items = Alloy.createCollection('item');

// Bind collection to ListView
$.list.sections[0].setItems(items.getItems());

// Listen for changes in the collection and refresh the list
items.on('fetch change add remove reset', function() {
  $.list.sections[0].setItems(items.getItems());
});

// Initial fetch
items.fetch();

// Expose a helper to add items from the console
exports.addItem = function(title) {
  var model = items.create({ title: title });
  model.save();
  items.trigger('change');
};

6. Running the App

# Build and launch on an emulator or device
# iOS

ti run -p ios
# Android

ti run -p android

Once the app is running, open the Alloy console (via the debugger or the ti debug command) and execute:

app.addItem('New Item');

The ListView should immediately show “New Item” without any manual reload. This confirms that the binding between the SQLite table and the UI works as intended.

Verification Checklist

• Build succeeds on both iOS and Android with SDK ≥ 3.2.
• Running app.addItem('Test') in the console inserts a row and updates the ListView.
• Open the Titanium debugger, step into the items.trigger('change') call, and observe the setItems call on the ListView section.
• Check the final APK/IPA size: it should be roughly 5–10 MB larger than a comparable classic Titanium app.

Limitations and Practical Checks

Alloy’s automatic data binding uses observers that keep references to models. If you create many long‑lived models and never call destroy(), memory consumption will grow. A quick check is to run the app in long‑term usage mode and monitor the memory tab in the debugger.

The build time overhead is noticeable for large projects. You can mitigate this by disabling the --debug flag during release builds: ti build --platform ios --build-type release.

Because Alloy bundles its own framework code, the final binary includes the Alloy runtime. If your app must stay under a strict size limit, consider stripping unused modules or switching to classic Titanium for that part of the codebase.

Conclusion

Use Alloy when you need rapid, declarative UI development and built‑in data binding, especially for data‑driven screens like lists or forms. Opt for classic Titanium if you require tight control over native APIs, need to support very old SDKs, or must keep bundle size minimal. The concrete example above demonstrates how a single database insert updates the UI automatically, illustrating Alloy’s core advantage while highlighting the need for careful memory and size management.