Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Slides for Yahoo! Hack USA 2013

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


September 29, 2013

More Decks by Alco

Other Decks in Technology


  1. 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
  2. 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
  3. What do I mean by cross-platform? To understand the power

    of Titanium, we first need to understand the problem Titanium solves 5
  4. 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
  5. Cross-platform is much more than running on different platforms All

    platforms have their own set of NATIVE UI elements and UX patterns 8
  6. Titanium solves this problem by offering a JavaScript SDK that

    normalizes the underlying platform SDKs 12
  7. 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>
  8. 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
  9. Built into Alloy 32 •  Backbone •  Data-binding •  Synchronization

    adapters •  Underscore.js •  Moment.js •  Widgets •  Themes
  10. More cool stuff from Appcelerator •  ACS - Appcelerator Cloud

    Services •  Node.ACS •  Command-line interface (CLI) 33
  11. 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