Slides for Yahoo! Hack USA 2013

Learn how to use Titanium and Alloy to properly target multiple mobile platforms from a single code-base

Transcript

2. Multi-platform mobile development using Titanium + Alloy by ricardo alcocer
3. About me •  Have been using Titanium since late 2009 •  Former independent Titanium trainer in the Caribbean and Latin America •  Currently work as Lead Developer Evangelist @ Appcelerator •  Obsessed with cross-platform mobile develoment •  Love Javascript hacking and technology startups •  I'm a hacker in constant training 3
4. 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
5. What do I mean by cross-platform? To understand the power of Titanium, we first need to understand the problem Titanium solves 5
6. Is a web-app cross-platform? Let's use Facebook® as example 6
7. 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
8. Cross-platform is much more than running on different platforms All platforms have their own set of NATIVE UI elements and UX patterns 8
9. Building native mobile apps the traditional way is not trivial 9
10. Objective-C (iOS) UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [myButton setTitle:@"Click Me!" forState:UIControlStateNormal]; 10
11. Java (Android) Button myButton = new Button(this); myButton.setText("Click Me!"); 11
12. Titanium solves this problem by offering a JavaScript SDK that normalizes the underlying platform SDKs 12
13. Titanium/JavaScript (iOS, Android) var myButton=Ti.UI.createButton({ title:'Click Me!' }) 13
14. Alloy is Titanium's MVC framework that uses XML, TSS (like CSS) and JavaScript 14
15. Titanium/Alloy (iOS, Android) <Alloy> <Button>Click Me!</Button> </Alloy> 15
16. Alloy App Folder Structure 16
17. Sample Two-tab App 17
18. UI DEFINITION: INDEX.XML 18 <Alloy> <TabGroup id="win"> <Tab title="Tab 1" icon="KS_nav_ui.png"> <Window title="Tab 1"> <Label>I am Window 1</Label> </Window> </Tab> <Tab title="Tab 2" icon="KS_nav_views.png"> <Window title="Tab 2"> <Label>I am Window 2</Label> </Window> </Tab> </TabGroup> </Alloy>
19. 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' } 19
20. Running on iOS 6 20
21. Running on iOS 7 21
22. Running on Android 2.x 22
23. Running on Android ICS - Holo Dark 23
24. Running on Android ICS - Holo Light 24
25. Dealing with native UI elements from the same code-base 25
26. Example : Simple single-window app 26
27. INDEX.XML 27
28. INDEX.TSS 28
29. INDEX.JS 29
30. The vocabulary is well documented 30
31. View the Source 31
32. Built into Alloy 32 •  Backbone •  Data-binding •  Synchronization adapters •  Underscore.js •  Moment.js •  Widgets •  Themes
33. More cool stuff from Appcelerator •  ACS - Appcelerator Cloud Services •  Node.ACS •  Command-line interface (CLI) 33
34. 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
35. Thank you! Questions? Follow me on Twitter: @ricardoalcocer Github: /ricardoalcocer 35