Save 37% off PRO during our Black Friday Sale! »

Slides for Yahoo! Hack USA 2013

49345ea4af9a9432c1f4bf2cde34c736?s=47 Alco
September 29, 2013

Slides for Yahoo! Hack USA 2013

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

49345ea4af9a9432c1f4bf2cde34c736?s=128

Alco

September 29, 2013
Tweet

Transcript

  1. None
  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