Titanium For New Developers

Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


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