Titanium expert

Practical architecture and implementation guidance for Titanium SDK apps (Alloy and Classic). Focus on maintainability, clear boundaries, and low-friction testing.

Project detection

:::info Auto-detects Alloy vs Classic projects This skill detects project type automatically and tailors guidance.

Alloy indicators:

• •app/ folder (MVC structure)
• •app/views/, app/controllers/ folders
• •alloy.jmk or config.json files

Classic indicators:

• •Resources/ folder with app.js at root
• •No app/ folder structure

Behavior:

• •Alloy detected: provides Alloy MVC patterns and Backbone.js guidance
• •Classic detected: avoids Alloy-only patterns and recommends Classic options or migration
• •Unknown: asks the user to clarify the project type :::

Workflow

1. •Architecture: define structure (lib/api, lib/services, lib/helpers)
2. •Data strategy: choose Models (SQLite) or Collections (API)
3. •Contracts: define I/O specs between layers
4. •Implementation: write XML views and ES6+ controllers
5. •Quality: testing, error handling, logging, performance
6. •Cleanup: implement a cleanup() pattern for memory management

Quick start example

Minimal example that matches the conventions:

View (views/user/card.xml)

<Alloy>
  <View id="cardContainer">
    <View id="headerRow">
      <ImageView id="userIcon" image="/images/user.png" />
      <Label id="name" />
    </View>
    <Button id="viewProfileBtn"
      title="L('view_profile')"
      onClick="onViewProfile"
    />
  </View>
</Alloy>

Styles (styles/user/card.tss)

"#cardContainer": { left: 8, right: 8, top: 8, height: Ti.UI.SIZE, borderRadius: 12, backgroundColor: '#fff' }
"#headerRow": { layout: 'horizontal', left: 12, right: 12, top: 12, height: Ti.UI.SIZE, width: Ti.UI.FILL }
"#userIcon": { width: 32, height: 32 }
"#name": { left: 12, font: { fontSize: 18, fontWeight: 'bold' } }
"#viewProfileBtn": { left: 12, right: 12, bottom: 12, height: 40, width: Ti.UI.FILL, borderRadius: 6, backgroundColor: '#2563eb', color: '#fff' }

Controller (controllers/user/card.js)

const { Navigation } = require('services/navigation')

function init() {
  const user = $.args.user
  $.name.text = user.name
}

function onViewProfile() {
  Navigation.open('user/profile', { userId: $.args.user.id })
}

function cleanup() {
  $.destroy()
}

$.cleanup = cleanup

Service (lib/services/navigation.js)

exports.Navigation = {
  open(route, params = {}) {
    const controller = Alloy.createController(route, params)
    const view = controller.getView()

    view.addEventListener('close', function() {
      if (controller.cleanup) controller.cleanup()
    })

    view.open()
    return controller
  }
}

Code standards (low freedom)

• •No semicolons: let ASI handle it
• •Modern syntax: const/let, destructuring, template literals
• •applyProperties(): batch UI updates to reduce bridge crossings
• •Memory cleanup: any controller with global listeners must set $.cleanup = cleanup
• •Error handling: use AppError classes, log with context, never swallow errors
• •Testable code: inject dependencies, avoid hard coupling

Titanium style sheets rules (low freedom)

:::danger Critical: platform-specific properties require modifiers Using Ti.UI.iOS.* or Ti.UI.Android.* properties without platform modifiers breaks cross-platform builds.

Example of the damage:

// Wrong: adds Ti.UI.iOS to Android project
"#mainWindow": {
  statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
}

Correct: always use platform modifiers

// Correct: only adds to iOS
"#mainWindow[platform=ios]": {
  statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
}

Properties that always need platform modifiers:

• •iOS: statusBarStyle, modalStyle, modalTransitionStyle, any Ti.UI.iOS.*
• •Android: actionBar configuration, any Ti.UI.Android.* constant

Available modifiers: [platform=ios], [platform=android], [formFactor=handheld], [formFactor=tablet], [if=Alloy.Globals.customVar]

For more platform-specific patterns, see the ti-ui skill. :::

Titanium layout system:

• •Three layout modes: layout: 'horizontal', layout: 'vertical', and composite (default, no layout needed)
• •No padding on container Views: use margins on children instead
• •width: Ti.UI.FILL fills available space (preferred), width: '100%' = 100% of parent
• •height: Ti.UI.SIZE wraps content, height: Ti.UI.FILL fills available space

Alloy builtins quick reference

Key builtins: OS_IOS/OS_ANDROID (compile-time), Alloy.CFG (config.json), Alloy.Globals (shared state), $.args (controller params), $.destroy() (cleanup bindings), platform="ios" / formFactor="tablet" (XML conditionals).

For the complete reference with examples, see Alloy builtins and globals.

Quick decision matrix

Reference guides (progressive disclosure)

Architecture

• •CLI expert and TiNy: advanced build workflows, LiveView, TiNy (tn) recipes
• •Structure and organization: models vs collections, folder maps, widget patterns, automatic cleanup
• •Alloy builtins and globals: OS_IOS/OS_ANDROID, Alloy.CFG, Alloy.Globals, $.args, compiler directives
• •ControllerAutoCleanup.js: drop-in utility for automatic controller cleanup
• •Architectural patterns: repository, service layer, event bus, factory, singleton
• •Contracts and communication: layer interaction examples and JSDoc specs
• •Anti-patterns: fat controllers, memory leaks, inline styling, direct API calls

Implementation

• •Code conventions: ES6 features, TSS design system, accessibility
• •Theming and dark mode: theme system, Alloy.Globals palette, runtime switching, design tokens
• •Controller patterns: templates, animation, dynamic styling
• •Examples: API clients, SQL models, full screen examples

Quality and reliability

• •Unit and integration testing: unit testing, mocking patterns, controller testing, test helpers
• •E2E testing and CI/CD: Appium, WebdriverIO, GitHub Actions, Fastlane
• •Error handling and logging: AppError classes, Logger service, validation

Performance and security

• •ListView and ScrollView performance: ListView templates, data binding, image caching, ScrollView optimization
• •Performance optimization: bridge crossings, memory management, animations, debounce/throttle, database
• •Security fundamentals: token storage, certificate pinning, encryption, HTTPS, OWASP