Multi-platformmobile

developmentwith Titanium +

Alloy

About me

Have been using Titanium since late 2009Former Titanium trainer in the Caribbean and Latin AmericaObsessed with cross-platform mobile develomentLove Javascript hacking and technology startupsI'm a hacker in constant training

About Appcelerator andTitanium

JavaScript SDK to develop native, cross-platform mobile apps500,000+ developers worldwideTitanium is free and Open SourceSupports iOS, Android, Blackberry 10, Tizen and Windows in theworksThe Appcelerator Platform is the enterprise-grade suite of productsbased on Titanium

What do I mean by cross-platform?

To understand the power of Titanium, wefirst need to understand the problem

Titanium solves

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

Is a Web-app cross-platform?

A web-app is cross-platform only if wedefine a cross-platform app as an app that

can run on multiple platforms

Cross-platform is much morethan running on different

platforms

All platforms have their own set ofNATIVE UI elements and UX patterns

Building native mobile appsthe traditional way is not trivial

Objective-C (iOS)

UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];[myButton setTitle:@"Click Me!" forState:UIControlStateNormal];

Java (Android)

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

Titanium solves this problemby offering a JavaScript SDKthat normalizes the underlying

SDKs

Titanium/JavaScript (iOS,Android)

var myButton=Ti.UI.createButton({ title:'Click Me!'})

Alloy is Titanium's MVCframework that uses XML, TSS

(like CSS) and JavaScript

Titanium/Alloy (iOS, Android)

<Alloy> <Button>Click Me!</Button></Alloy>

Alloy App Folder Structure

Sample Two-tab App

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>

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"}

Running on iOS 6

Running on iOS 7

Running on Android 2.x

Running on Android ICS - HoloDark

Running on Android ICS - HoloLight

Dealing with native UIelements from the same code-

base

Simple single-window app

INDEX.XML

INDEX.TSS

INDEX.JS

The vocabulary is welldocumented

http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.Window

View the Source

https://github.com/appcelerator/KitchenSink/tree/master/Resources

Built into Alloy

BackboneData-bindingSynchronization adaptersUnderscore.jsMoment.jsWidgetsThemes

More cool stuff fromAppcelerator

ACS - Appcelerator Cloud ServicesNode.ACSCommand-line interface (CLI)

Get started today!

Runs on Mac, Windows and LinuxiOS development requires a Mac

Requires installation and configuration of all native tools (Xcode,Android SDK manager, etc)Download Titanium Studio from my.appcelerator.comStart hacking!

Thank you!

Questions?Follow me on

Twitter: @ricardoalcocer

Github: /ricardoalcocer