Titanium Overview (Mobile March 2011)


Published on

An overview of the Titanium Mobile platform, delivered at Mobile March 2011 (Minneapolis, MN)

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Titanium Overview (Mobile March 2011)

  1. 1. Kevin Whinnery Engineer and Platform Evangelist Appcelerator, Inc. E-Mail: [email_address] Twitter: @kevinwhinnery
  2. 2. Agenda <ul><li>Titanium Architecture Overview </li></ul><ul><li>Developer Resources </li></ul><ul><li>Project Structure and User Interface Basics </li></ul><ul><li>Demos </li></ul><ul><li>Q&A </li></ul>
  3. 3. Titanium enables web developers to create native mobile, desktop, and tablet applications using open web technologies (JavaScript, HTML, and CSS)
  4. 4. Titanium Key Facts <ul><li>Open Source (Apache 2.0) </li></ul><ul><li>Pro Services, Training, Analytics and SLA Support available from Appcelerator </li></ul><ul><li>Mobile Platforms: iOS, Android, and BlackBerry (beta) </li></ul><ul><li>Desktop Platforms: Windows, OS X, and Linux </li></ul>
  5. 5. Titanium from 10,000 Feet <ul><li>Mobile: </li></ul><ul><li>JavaScript APIs for UI (Native) </li></ul><ul><li>JavaScript for scripting </li></ul><ul><li>WebView available, but not required </li></ul><ul><li>Desktop: </li></ul><ul><li>HTML 5/ CSS 3 for UI (Webkit) </li></ul><ul><li>JavaScript, Ruby, PHP or Python for scripting </li></ul>
  6. 6. Native User Experience Native performance + Native UI (tables, animations, gestures…etc.) Multimedia Camera, video camera, streaming/device audio/video Location-based services Augmented reality, geo-location, compass, native maps Analytics Custom analytics baked into every application, track usage patterns and adoption Social sharing Authenticated access to Facebook, Twitter, Yahoo YQL. Native email/address book Titanium+Plus Encrypted database, ecommerce, ads, barcode scanners, custom analytics, in-app purchase Data Local SQLite data store, web services, lightweight key/value store Development tools Create, test, and publish your app using the same tools across platforms Platform Features
  7. 7. Titanium Projects <ul><li>Titanium Mobile (1.6.1) </li></ul><ul><li>Titanium Desktop (1.1.0) </li></ul><ul><li>Titanium Developer (1.2.2) </li></ul><ul><li>Aptana Studio (2.0.5) – Eclipse IDE, JS editor </li></ul>
  8. 8. Powered By Titanium <ul><li>Latest Applications: </li></ul><ul><li>Late Night with Jimmy Fallon </li></ul><ul><li>Wunderlist </li></ul><ul><li>GetGlue (Android) </li></ul><ul><li>Companies: </li></ul><ul><li>NBC/Universal </li></ul><ul><li>eBay and PayPal </li></ul><ul><li>Anheuser Busch </li></ul><ul><li>Jaguar </li></ul><ul><li>MTV </li></ul><ul><li>Many more </li></ul>
  9. 9. Web Apps versus Native Apps <ul><li>We heart the mobile web! </li></ul><ul><li>Many native apps could be written as web apps </li></ul><ul><li>Mobile web is progressing fast and converging around Webkit and emerging web standards </li></ul><ul><li>For some apps, you need to go native for business or technical reasons </li></ul><ul><li>However, developing N apps for N platforms doesn’t scale </li></ul>
  10. 10. Titanium Mobile exists to help developers build native apps that… <ul><li>Run cross-platform </li></ul><ul><li>Leverage common skill sets and a gorgeous dynamic programming language </li></ul><ul><li>Look, feel*, and perform native </li></ul><ul><li>Fit well into the native app ecosystem (local notifications, activities/intents, background services…) </li></ul>*this is a fuzzy but important point – users can perceive differences and can tell when something isn’t quite “right”
  11. 12. Under the Covers <ul><li>Titanium Developer === GUI for Python build scripts </li></ul><ul><li>JavaScript is statically analyzed, native project stub generated </li></ul><ul><li>JavaScript precompiled to bytecode (Android) or inlined in a generated C file (iOS) </li></ul><ul><li>JavaScript and native code bindings are shipped along with JavaScriptCore (iOS) or Rhino (Android) to interpret JS code at runtime </li></ul>
  12. 14. Documentation
  13. 15. Example Code
  14. 16. Getting Help
  15. 18. Typical Application Structure
  16. 19. For you web developers… <ul><li>A “window” is analogous to a “page” </li></ul><ul><li>A “view” is analogous to a “div” </li></ul><ul><li>Ti.UI namespace provides many specialized controls (buttons, text fields, pickers, maps, scroll views) </li></ul><ul><li>UI objects are composed in JavaScript similarly to DOM fragments </li></ul>
  17. 20. View Hierarchy and Positioning <ul><li>Modeled after iOS View Hierarchy </li></ul><ul><li>Views positioned relative to parent </li></ul><ul><li>Layout options: </li></ul><ul><li>Absolute </li></ul><ul><li>Vertical </li></ul><ul><li>Horizontal </li></ul><ul><li>Demo – Add a nested view structure to default app </li></ul>
  18. 21. Event Handling <ul><li>Similar To JavaScript in the browser </li></ul><ul><li>Can use addEventListener on nearly any JS object </li></ul><ul><li>Can programmatically fire events on objects as well </li></ul><ul><li>Demo: A simple event handler </li></ul>
  19. 22. A Few Words On Workflow… <ul><li>Target both platforms early (though not necessarily today) </li></ul><ul><li>iOS Emulator is fast for dev </li></ul><ul><li>Deploying to iOS device is slow </li></ul><ul><li>Android Emulator is S-L-O-W – keep it running! </li></ul><ul><li>Android devices are faster (better for dev) </li></ul>