titanium overview (mobile march 2011)

Kevin WhinneryEngineer and Platform Evangelist

Appcelerator, Inc.

E-Mail: kwhinnery@appcelerator.com Twitter: @kevinwhinnery

Agenda

Titanium Architecture Overview

Developer Resources

Project Structure and User Interface Basics

Demos

Q&A

Titanium enables web developers to createnative mobile, desktop, and tablet

applicationsusing open web technologies (JavaScript,

HTML, and CSS)

Titanium Key Facts

Open Source (Apache 2.0)

Pro Services, Training, Analytics and SLA Support available from Appcelerator

Mobile Platforms: iOS, Android, and BlackBerry (beta)

Desktop Platforms: Windows, OS X, and Linux

Titanium from 10,000 Feet

Mobile:• JavaScript APIs for UI (Native)• JavaScript for scripting• WebView available, but not required

Desktop: • HTML 5/ CSS 3 for UI (Webkit)• JavaScript, Ruby, PHP or Python for scripting

Native User ExperienceNative performance + Native UI(tables, animations, gestures…etc.)

MultimediaCamera, video camera, streaming/device audio/video

Location-based servicesAugmented reality, geo-location, compass, native maps

AnalyticsCustom analytics baked into every application, track usage patterns and adoption

Social sharingAuthenticated access to Facebook, Twitter, Yahoo YQL. Native email/address book

Titanium+PlusEncrypted database, ecommerce, ads, barcode scanners, custom analytics, in-app purchase

DataLocal SQLite data store, web services, lightweight key/value store

Development toolsCreate, test, and publish your app using the same tools across platforms

Platform Features

Titanium Projects

Titanium Mobile (1.6.1)

Titanium Desktop (1.1.0)

Titanium Developer (1.2.2)

Aptana Studio (2.0.5) – Eclipse IDE, JS editor

Powered By TitaniumLatest Applications:•Late Night with Jimmy Fallon •Wunderlist•GetGlue (Android)

Companies:•NBC/Universal•eBay and PayPal•Anheuser Busch•Jaguar•MTV•Many more

Web Apps versus Native Apps

We heart the mobile web!

Many native apps could be written as web apps

Mobile web is progressing fast and converging around Webkit and emerging web standards

For some apps, you need to go native for business or technical reasons

However, developing N apps for N platforms doesn’t scale

Titanium Mobile exists to help developers build native apps that…Run cross-platform

Leverage common skill sets and a gorgeous dynamic programming language

Look, feel*, and perform native

Fit well into the native app ecosystem (local notifications, activities/intents, background services…)

*this is a fuzzy but important point – users can perceive differencesand can tell when something isn’t quite “right”

Under the Covers

Titanium Developer === GUI for Python build scripts

JavaScript is statically analyzed, native project stub generated

JavaScript precompiled to bytecode (Android) or inlined in a generated C file (iOS)

JavaScript and native code bindings are shipped along with JavaScriptCore (iOS) or Rhino (Android) to interpret JS code at runtime

Documentation

Example Code

Getting Help

Typical Application Structure

For you web developers…

A “window” is analogous to a “page”

A “view” is analogous to a “div”

Ti.UI namespace provides many specialized controls (buttons, text fields, pickers, maps, scroll views)

UI objects are composed in JavaScript similarly to DOM fragments

View Hierarchy and PositioningModeled after iOS View Hierarchy

Views positioned relative to parent

Layout options:• Absolute• Vertical• Horizontal

Demo – Add a nested view structure to default app

Event Handling

Similar To JavaScript in the browser

Can use addEventListener on nearly any JS object

Can programmatically fire events on objects as well

Demo: A simple event handler

A Few Words On Workflow…

Target both platforms early (though not necessarily today)

iOS Emulator is fast for dev

Deploying to iOS device is slow

Android Emulator is S-L-O-W – keep it running!

Android devices are faster (better for dev)