ti-expert
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/foldersalloy.jmkorconfig.jsonfiles
Classic indicators:
Resources/folder withapp.jsat 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
- Architecture: define structure by technical type with flat folders (
lib/api,lib/services,lib/actions,lib/repositories,lib/helpers) - Data strategy: choose Models (SQLite) or Collections (API)
- Contracts: define I/O specs between layers
- Implementation: write XML views and ES6+ controllers
- Quality: testing, error handling, logging, performance
- Cleanup: implement a
cleanup()pattern for memory management
Architectural Maturity Tiers
Choose the appropriate tier based on project complexity:
Tier 1: Basic (Rapid Prototyping)
- Best for: Simple utility apps or developers transitioning from Classic.
- Structure: Logic resides directly within
index.js. - UI Access: Direct usage of the
$object throughout the file. - Pros: Zero boilerplate, extremely fast start.
- Cons: Unmaintainable beyond 500 lines of code.
Tier 2: Intermediate (Modular Alloy)
- Best for: Standard commercial applications.
- Structure: Business logic extracted to
app/lib/using a flat technical-type organization. - Pattern: Slim Controllers that
require()services. - Memory: Mandatory implementation of
$.cleanup = cleanup.
Tier 3: Advanced / Enterprise (Service-Oriented)
- Best for: High-complexity apps (IDEs like TiDesigner, multi-state platforms).
- Architecture: Dependency Injection via a
ServiceRegistry. - ID Scoping: Services do not receive the entire
$object. They receive a "Scoped UI" object containing only relevant IDs. - Cognitive Load: "Black Box" logic—encapsulated units that reduce mental fatigue.
- Observability: Structured logging with a mandatory
servicecontext.
Detailed examples and full implementation samples are available in: Architectural Tiers Detail
Organization policy (low freedom)
- Use technical-type organization in
lib(for example:api,services,actions,repositories,helpers,policies,providers). - Keep
libflat and predictable:lib/<type>/<file>.jsonly. - Do not recommend deep nesting like
lib/services/auth/session/login.js. - Keep UI layers aligned by screen (
controllers/,views/,styles/) and avoid unnecessary depth.
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, anyTi.UI.iOS.* - Android:
actionBarconfiguration, anyTi.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, nolayoutneeded) - No padding on container Views: use margins on children instead
width: Ti.UI.FILLfills available space (preferred),width: '100%'= 100% of parentheight: Ti.UI.SIZEwraps content,height: Ti.UI.FILLfills 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
| Question | Answer |
|---|---|
| How to create a new Alloy project? | ti create -t app --alloy (not --classic + alloy new) |
| Fastest way to build? | tn <recipe> (using TiNy CLI wrapper) |
| Controller > 100 lines? | Extract to Tier 2 (Services) |
| More than 50 IDs in XML? | Use Tier 3 (ID Scoping) |
| Where does API call go? | lib/api/ |
| Where does business logic go? | lib/services/ |
How deep should lib folders be? |
One level: lib/<type>/<file>.js |
| Where do I store auth tokens? | Keychain (iOS) / KeyStore (Android) via service |
| Models or Collections? | Collections for API data, Models for SQLite persistence |
| Ti.App.fireEvent or EventBus? | Always EventBus (Backbone.Events) |
| Direct navigation or service? | Always Navigation service (auto cleanup) |
| Inline styles or TSS files? | Always TSS files (per-controller + app.tss for global) |
Reference guides (progressive disclosure)
Architecture & Patterns
- Architectural Tiers Detail
- Architectural Patterns (Factory, Singleton, Repository)
- Structure & Organization
- Contracts & Communication
- State Management
- Anti-patterns to Avoid
Implementation & API
- Alloy Builtins & Globals
- Code Conventions
- Controller Patterns
- Theming & Dark Mode
- Migration Patterns
- Examples Collection
Quality & Performance
- Performance Optimization
- ListView & ScrollView Performance
- Error Handling & Logging
- Unit & Integration Testing
- E2E Testing & CI/CD
Security
Tools
More from maccesar/titools
ti-ui
Titanium SDK UI/UX patterns and components expert. Use when working with, reviewing, analyzing, or examining Titanium layouts, ListView/TableView performance optimization, event handling and bubbling, gestures (swipe, pinch), animations, accessibility (VoiceOver/TalkBack), orientation changes, custom fonts/icons, app icons/splash screens, or platform-specific UI (Action Bar, Navigation Bar).
4purgetss
Titanium PurgeTSS utility-first styling toolkit. Use when styling, reviewing, analyzing, or examining Titanium UI with utility classes, configuring config.cjs, creating dynamic components with $.UI.create(), building animations, using grid layouts, setting up icon fonts, or working with TSS styles. Never suggest other CSS framework classes - verify in class-index.md first.
4ti-guides
Titanium SDK official fundamentals and configuration guide. Use when working with, reviewing, analyzing, or examining Titanium projects, Hyperloop native access, app distribution (App Store/Google Play), tiapp.xml configuration, CLI commands, memory management, bridge optimization, CommonJS modules, SQLite transactions, or coding standards. Applies to both Alloy and Classic projects.
4ti-howtos
Titanium SDK native feature integration guide. Use when implementing, reviewing, analyzing, or examining Titanium location services, maps (Google Maps v2, Map Kit), push notifications (APNs, FCM), camera/gallery, media APIs, SQLite databases, HTTPClient networking, WKWebView, Android Intents, background services, iOS Keychain/iCloud, WatchKit/Siri integration, or CI/CD with Fastlane and Appium.
4alloy-guides
Titanium Alloy MVC official framework reference. Use when working with, reviewing, analyzing, or examining Alloy models, views, controllers, Backbone.js data binding, TSS styling, widgets, Alloy CLI, sync adapters, migrations, or MVC compilation. Explains how Backbone.js models and collections work in Alloy.
4alloy-howtos
Titanium Alloy CLI and configuration guide. Use when creating, reviewing, analyzing, or examining Alloy projects, running alloy commands (new, generate, compile), configuring alloy.jmk or config.json, debugging compilation errors, creating conditional views, using Backbone.Events for communication, or writing custom XML tags.
4