Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Titanium Overview (Mobile March 2011)

9,880 views

Published on

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

Published in: Technology
  • Be the first to comment

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>

×