Multi-platform mobile development with Titanium + Alloy 

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 

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 

What do I mean by cross- platform? To understand the power of Titanium, we first 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 we define a cross-platform app as an app that can run on multiple platforms 

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

Building native mobile apps the traditional way is not trivial 

Objective-C (iOS) U I B u t t o n * m y B u t t o n = [ U I B u t t o n b u t t o n W i t h T y p e : U I B u t t o n T y p e R o u n d e d R e c t ] ; [ m y B u t t o n s e t T i t l e : @ " C l i c k M e ! " f o r S t a t e : U I C o n t r o l S t a t e N o r m a l ] ; 

Java (Android) B u t t o n m y B u t t o n = n e w B u t t o n ( t h i s ) ; m y B u t t o n . s e t T e x t ( " C l i c k M e ! " ) ; 

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

Titanium/JavaScript (iOS, Android) v a r m y B u t t o n = T i . U I . c r e a t e B u t t o n ( { t i t l e : ' C l i c k M e ! ' } ) 

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

Titanium/Alloy (iOS, Android) < A l l o y > < B u t t o n > C l i c k M e ! < / B u t t o n > < / A l l o y > 

Alloy App Folder Structure 

Sample Two-tab App 

UI DEFINITION: INDEX.XML < a l l o y > < t a b g r o u p i d = " w i n " > < t a b t i t l e = " T a b 1 " i c o n = " K S _ n a v _ u i . p n g " > < w i n d o w t i t l e = " T a b 1 " > < l a b e l c l a s s = " m y l a b e l " > I a m W i n d o w 1 < / l a b e l > < / w i n d o w > < / t a b > < t a b t i t l e = " T a b 2 " i c o n = " K S _ n a v _ v i e w s . p n g " > < w i n d o w t i t l e = " T a b 2 " > < l a b e l c l a s s = " m y l a b e l " > I a m W i n d o w 2 < / l a b e l > < / w i n d o w > < / t a b > < / t a b g r o u p > < / a l l o y > 

UI STYLING: INDEX.TSS " W i n d o w " : { b a c k g r o u n d C o l o r : " # f f f " } , " L a b e l " : { w i d t h : T i . U I . S I Z E , h e i g h t : T i . U I . S I Z E , c o l o r : " # 0 0 0 " , f o n t : { f o n t S i z e : 2 0 , f o n t F a m i l y : ' H e l v e t i c a N e u e ' } , t e x t A l i g n : ' c e n t e r ' } , " # w i n " : { t o p : 0 , l e f t : 0 } , " . m y l a b e l " : { c o l o r : " # 0 0 0 " } 

Running on iOS 6 

Running on iOS 7 

Running on Android 2.x 

Running on Android ICS - Holo Dark 

Running on Android ICS - Holo Light 

Dealing with native UI elements from the same code- base 

Simple single-window app 

INDEX.XML 

INDEX.TSS 

INDEX.JS 

The vocabulary is well documented 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 Backbone Data-binding Synchronization adapters Underscore.js Moment.js Widgets Themes 

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

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! 

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