Titanium For New Developers

1http://www.appcelerator.com | @appcelerator

Welcome To Titanium!Welcome To Titanium!Kevin Whinnery

Engineer / Platform Evangelist

@kevinwhinnery

http://www.appcelerator.com/


Agenda

• Titanium Mobile Overview• Hello World and Project

Walkthrough• Building Titanium Apps:

Fundamentals• Where To Go From Here• Questions and Answers



About Me

Kevin WhinneryEngineer/Platform Evangelist

http://kevinwhinnery.com

Twitter: @kevinwhinnery

E-Mail: [email protected]

Web developer by trade and training, lover of JavaScript and open web technologies in general


http://kevinwhinnery.com/

mailto:[email protected]


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



About You

• Web developers• Flash developers• Designers• Desktop, iOS, Android, or Blackberry app developers• Targeting top mobile platforms (plus desktop)



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?



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



Ideally, we want to build cross-platform native apps.



...but we don’t want to “write once, suck

everywhere”*

*Loren Brichter, creator “Twitter for iPhone”/Tweetie


10

http://www.appcelerator.com | @appcelerator

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


11


Enter Titanium

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


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


14


Platform FeaturesNative 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, LightweightKey/Value Store, XHR

Integrated Facebook Connectand YQL

Local and streaming audio andvideo, media recording

Extend Titanium with custommodules in native code

Baked-in analytics APIs to measureresults and behavior

Develop and distribute your app formultiple 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


16


Titanium Architecture

• Desktop is HTML focused

• Can use other scripting languages

• 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


18


Demo: Hello World• Create a new Desktop App• Launch for current platform• Project structure


19


Okay, so Desktop is mostly a single-page HTML app

running inside a supercharged Webkit browser. What does a mobile app look like?


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


21


Typical App Composition•“Windows”

vs. “Views”•App types:

–Tab Group–Single Window

–Window Stack

•Windows are like ‘pages’, views like ‘div’s


22


Demo: Hello World!•Creating a mobile project•Mobile project structure•Editing code, adding UI

widgets to the app•Deploy to simulator


23


Demo: Kitchen Sink• 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


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!)

26


Questions?

Technology

Titanium For New Developers