Multi-platform mobile development with Titanium + Alloy
Dec 17, 2014
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