titanium for new developers

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

Welcome To Titanium!Welcome To Titanium!Kevin Whinnery

Engineer / Platform Evangelist

@kevinwhinnery

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

Agenda

• Titanium Mobile Overview• Hello World and Project

Walkthrough• Building Titanium Apps:

Fundamentals• Where To Go From Here• Questions and Answers

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

About Me

Kevin WhinneryEngineer/Platform Evangelist

http://kevinwhinnery.com

Twitter: @kevinwhinnery

E-Mail: community@appcelerator.com

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

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

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

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

About You

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

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

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?

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

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

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

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

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

...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

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

Enter Titanium

Titanium is an open source framework for building native mobile or desktop

applications using open web technologies (JavaScript, HTML and CSS)

12

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

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

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

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

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

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

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

Who Uses Titanium?

• NBC Universal• eBay/PayPal•Anheuser-Busch

• MTV• Computer Sciences Corporation• 1000s of apps per month to the stores

16

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

Titanium Architecture

• Desktop is HTML focused

• Can use other scripting languages

• Mobile: JavaScript interpreted at runtime

• JavaScript API >> native APIs

17

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

Desktop App Composition• HTML/CSS inside native window chrome• All HTML/CSS/JS libraries in play• Ruby, Python, PHP access• Ajax Client

18

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

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

19

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

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

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

20

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

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

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

Typical App Composition•“Windows”

vs. “Views”•App types:

–Tab Group–Single Window

–Window Stack

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

22

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

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

widgets to the app•Deploy to simulator

23

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

Demo: Kitchen Sink• Example Code• Living Reference Document• Demonstrates API coverage• github.com/appcelerator/

KitchenSink

24

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

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

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

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

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

Questions?