Titanium For New Developers


Published on

Slides from 1/5/11 webinar on Titanium for New Developers. Covers Titanium Desktop and Titanium Mobile.

Published in: Technology
  • 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 For New Developers

  1. 1. Welcome To Titanium! <ul><li>Kevin Whinnery </li></ul><ul><li>Engineer / Platform Evangelist </li></ul><ul><li>@kevinwhinnery </li></ul>http://www.appcelerator.com | @appcelerator
  2. 2. Agenda http://www.appcelerator.com | @appcelerator <ul><li>Titanium Mobile Overview </li></ul><ul><li>Hello World and Project Walkthrough </li></ul><ul><li>Building Titanium Apps: Fundamentals </li></ul><ul><li>Where To Go From Here </li></ul><ul><li>Questions and Answers </li></ul>
  3. 3. About Me <ul><li>Kevin Whinnery </li></ul><ul><li>Engineer/Platform Evangelist </li></ul><ul><li>http://kevinwhinnery.com </li></ul><ul><li>Twitter: @kevinwhinnery </li></ul><ul><li>E-Mail: [email_address] </li></ul><ul><li>Web developer by trade and training, lover of JavaScript and open web technologies in general </li></ul>http://www.appcelerator.com | @appcelerator
  4. 4. About Appcelerator <ul><li>Open Source Software Company based in Mountain View, CA </li></ul><ul><li>Developing Titanium over two years </li></ul><ul><li>Enabling deployment of web technology in native applications across multiple screens </li></ul>http://www.appcelerator.com | @appcelerator
  5. 5. About You <ul><li>Web developers </li></ul><ul><li>Flash developers </li></ul><ul><li>Designers </li></ul><ul><li>Desktop, iOS, Android, or Blackberry app developers </li></ul><ul><li>Targeting top mobile platforms (plus desktop) </li></ul>http://www.appcelerator.com | @appcelerator
  6. 6. Build Native? <ul><li>Which platforms do you choose? </li></ul><ul><li>How many codebases do you want to (or even can you) support? </li></ul><ul><li>How long will it take to build native on N platforms? </li></ul><ul><li>How much effort will be duplicated? </li></ul><ul><li>What if you bet on the wrong platform? </li></ul><ul><li>Who writes the code? Hire out? Retrain/retool yourself or your devs? </li></ul>http://www.appcelerator.com | @appcelerator
  7. 7. The Web is an option... <ul><li>...and a darn good one - should often be targeted first </li></ul><ul><li>Mobile browsers are progressing fast and converging around WebKit </li></ul><ul><li>But there are limitations </li></ul><ul><li>Native apps are inherently more capable than web apps </li></ul><ul><li>Native apps run faster and smoother on resource constrained devices </li></ul>http://www.appcelerator.com | @appcelerator
  8. 8. Ideally, we want to build cross-platform native apps. http://www.appcelerator.com | @appcelerator
  9. 9. ...but we don’t want to “write once, suck everywhere”* http://www.appcelerator.com | @appcelerator *Loren Brichter, creator “Twitter for iPhone”/Tweetie
  10. 10. Doing Cross-Platform Right <ul><li>Target multiple platforms from a single codebase </li></ul><ul><li>Apps must look and feel like they belong on the platform, meet user expectations </li></ul><ul><li>Apps need to perform like native </li></ul><ul><li>Bonus: Open source and extensible </li></ul><ul><li>Bonus: Use skills we already have </li></ul>http://www.appcelerator.com | @appcelerator
  11. 11. Enter Titanium http://www.appcelerator.com | @appcelerator Titanium is an open source framework for building native mobile or desktop applications using open web technologies (JavaScript, HTML and CSS)
  12. 12. Titanium Key Facts <ul><li>Open Source (Apache 2.0) </li></ul><ul><li>Professional Services, SLA Support, Training, and Analytics available from Appcelerator </li></ul><ul><li>Titanium Platforms </li></ul><ul><li>Desktop: Win32, OS X, Linux </li></ul><ul><li>Mobile: iOS, Android, BlackBerry </li></ul>http://www.appcelerator.com | @appcelerator
  13. 13. Titanium Projects <ul><li>Titanium Developer (1.2.2) </li></ul><ul><li>Titanium Mobile SDK (1.5.1) </li></ul><ul><li>Titanium Desktop SDK (1.1.0) </li></ul><ul><li>Versioned separately, different release schedules </li></ul>http://www.appcelerator.com | @appcelerator
  14. 14. Platform Features http://www.appcelerator.com | @appcelerator Native UI Location APIs Local and Remote Data Social APIs Rich Media APIs Open Source and Extensible Integrated Analytics Development Tools Real native tables, tabs, sliders, and views Native Maps, Compass, and Geolocation Local SQL Database, Lightweight Key/Value Store, XHR Integrated Facebook Connect and YQL Local and streaming audio and video, media recording Extend Titanium with custom modules in native code Baked-in analytics APIs to measure results and behavior Develop and distribute your app for multiple platforms from a single tool
  15. 15. Who Uses Titanium? <ul><li>NBC Universal </li></ul><ul><li>eBay/PayPal </li></ul><ul><li>Anheuser-Busch </li></ul><ul><li>MTV </li></ul><ul><li>Computer Sciences Corporation </li></ul><ul><li>1000s of apps per month to the stores </li></ul>http://www.appcelerator.com | @appcelerator
  16. 16. Titanium Architecture <ul><li>Desktop is HTML focused </li></ul><ul><li>Can use other scripting languages </li></ul>http://www.appcelerator.com | @appcelerator <ul><li>Mobile: JavaScript interpreted at runtime </li></ul><ul><li>JavaScript API >> native APIs </li></ul>
  17. 17. Desktop App Composition <ul><li>HTML/CSS inside native window chrome </li></ul><ul><li>All HTML/CSS/JS libraries in play </li></ul><ul><li>Ruby, Python, PHP access </li></ul><ul><li>Ajax Client </li></ul>http://www.appcelerator.com | @appcelerator
  18. 18. Demo: Hello World <ul><li>Create a new Desktop App </li></ul><ul><li>Launch for current platform </li></ul><ul><li>Project structure </li></ul>http://www.appcelerator.com | @appcelerator
  19. 19. Okay, so Desktop is mostly a single-page HTML app running inside a supercharged Webkit browser. What does a mobile app look like? http://www.appcelerator.com | @appcelerator
  20. 20. A Simple Mobile App <ul><li>Native UI widgets constructed via JavaScript </li></ul><ul><li>iOS-style view hierarchy (.add()) </li></ul><ul><li>60% of code is UI construction, 20% event handling, 20% biz logic </li></ul>http://www.appcelerator.com | @appcelerator
  21. 21. Typical App Composition <ul><li>“ Windows” vs. “Views” </li></ul><ul><li>App types: </li></ul><ul><ul><li>Tab Group </li></ul></ul><ul><ul><li>Single Window </li></ul></ul><ul><ul><li>Window Stack </li></ul></ul><ul><li>Windows are like ‘pages’, views like ‘div’s </li></ul>http://www.appcelerator.com | @appcelerator
  22. 22. Demo: Hello World! <ul><li>Creating a mobile project </li></ul><ul><li>Mobile project structure </li></ul><ul><li>Editing code, adding UI widgets to the app </li></ul><ul><li>Deploy to simulator </li></ul>http://www.appcelerator.com | @appcelerator
  23. 23. Demo: Kitchen Sink http://www.appcelerator.com | @appcelerator <ul><li>Example Code </li></ul><ul><li>Living Reference Document </li></ul><ul><li>Demonstrates API coverage </li></ul><ul><li>github.com/appcelerator/KitchenSink </li></ul>
  24. 24. Where To Next? <ul><li>Developer Resources </li></ul><ul><ul><li>API docs, User Guides </li></ul></ul><ul><ul><li>Community Q&A </li></ul></ul><ul><ul><li>vimeo.com/appcelerator </li></ul></ul><ul><ul><li>IRC: #titanium_app (kwhinnery/cauld/fusion94) on irc.freenode.net </li></ul></ul><ul><li>Pro Services </li></ul><ul><ul><li>SLA Support </li></ul></ul><ul><ul><li>Full lifecycle development or partner matching </li></ul></ul>http://www.appcelerator.com | @appcelerator
  25. 25. Stay Up To Date <ul><li>Follow @appcelerator </li></ul><ul><li>Fan Us - facebook.com/appcelerator </li></ul><ul><li>Developer Blog </li></ul><ul><li>Corporate Blog </li></ul><ul><li>Appcelerator Crew: </li></ul><ul><ul><li>@jhaynie, @donthorp, @marshall_law, @billdawson, @fusion94, @kevinwhinnery, @chadauld, @clinttredway, @tyrusaurus... (too many to count now!) </li></ul></ul>http://www.appcelerator.com | @appcelerator
  26. 26. Questions? http://www.appcelerator.com | @appcelerator