Building cross-platform native mobile Apps with Titanium + Alloy

My slides for AT&T Bootstrap Week, September 2013

Transcript

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) 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 ] ;
10. 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 ! " ) ;
11. Titanium solves this problem by offering a JavaScript SDK that normalizes the underlying SDKs
12. 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 ! ' } )
13. Alloy is Titanium's MVC framework that uses XML, TSS (like CSS) and JavaScript
14. 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 >
15. Alloy App Folder Structure
16. Sample Two-tab App
17. 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 >
18. 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 " }
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