Learn how Titanium works and how to use Alloy and platform-specific directives to properly target multiple devices from a single source code.

1. Multi-platform
mobile
development
with Titanium +
Alloy

2. About me
Have been using Titanium since late 2009
Former Titanium trainer in the Caribbean and Latin America
Obsessed with cross-platform mobile develoment
Love Javascript hacking and technology startups
I'm a hacker in constant training

3. About Appcelerator and
Titanium
JavaScript SDK to develop native, cross-platform mobile apps
500,000+ developers worldwide
Titanium is free and Open Source
Supports iOS, Android, Blackberry 10, Tizen and Windows in the
works
The Appcelerator Platform is the enterprise-grade suite of products
based on Titanium

4. What do I mean by cross-
platform?
To understand the power of Titanium, we
first need to understand the problem
Titanium solves

5. Is a Web-app cross-platform?
Let's use Facebook® as example

6. Is a Web-app cross-platform?
A web-app is cross-platform only if we
define a cross-platform app as an app that
can run on multiple platforms

7. Cross-platform is much more
than running on different
platforms
All platforms have their own set of
NATIVE UI elements and UX patterns

8. Building native mobile apps
the traditional way is not trivial

9. Objective-C (iOS)
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[myButton setTitle:@"Click Me!" forState:UIControlStateNormal];

10. Java (Android)
Button myButton = new Button(this);
myButton.setText("Click Me!");

11. Titanium solves this problem
by offering a JavaScript SDK
that normalizes the underlying
SDKs

12. Titanium/JavaScript (iOS,
Android)
var myButton=Ti.UI.createButton({
title:'Click Me!'
})

13. Alloy is Titanium's MVC
framework that uses XML, TSS
(like CSS) and JavaScript

14. Titanium/Alloy (iOS, Android)
<Alloy>
<Button>Click Me!</Button>
</Alloy>

15. Alloy App Folder Structure

16. Sample Two-tab App

17. UI DEFINITION: INDEX.XML
<alloy>
<tabgroup id="win">
<tab title="Tab 1" icon="KS_nav_ui.png">
<window title="Tab 1">
<label class="mylabel">I am Window 1</label>
</window>
</tab>
<tab title="Tab 2" icon="KS_nav_views.png">
<window title="Tab 2">
<label class="mylabel">I am Window 2</label>
</window>
</tab>
</tabgroup>
</alloy>

18. UI STYLING: INDEX.TSS
"Window": {
backgroundColor: "#fff"
},
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000",
font: {
fontSize: 20,
fontFamily: 'Helvetica Neue'
},
textAlign: 'center'
},
"#win":{
top: 0,
left: 0
},
".mylabel":{
color: "#000"
}

19. Running on iOS 6

20. Running on iOS 7

21. Running on Android 2.x

22. Running on Android ICS - Holo
Dark

23. Running on Android ICS - Holo
Light

24. Dealing with native UI
elements from the same code-
base

25. Simple single-window app

26. INDEX.XML

27. INDEX.TSS

28. INDEX.JS

29. The vocabulary is well
documented
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.Window

30. View the Source
https://github.com/appcelerator/KitchenSink/tree/master/Resources

31. Built into Alloy
Backbone
Data-binding
Synchronization adapters
Underscore.js
Moment.js
Widgets
Themes

32. More cool stuff from
Appcelerator
ACS - Appcelerator Cloud Services
Node.ACS
Command-line interface (CLI)

33. Get started today!
Runs on Mac, Windows and Linux
iOS development requires a Mac
Requires installation and configuration of all native tools (Xcode,
Android SDK manager, etc)
Download Titanium Studio from my.appcelerator.com
Start hacking!

34. Thank you!
Questions?
Follow me on
Twitter: @ricardoalcocer
Github: /ricardoalcocer