multi platform mobile development using titanium

18
Multi-platform Mobile Application Development Jasper De Craecker, Mobile Developer (@jasperdc_be) Jürgen Coetsiers, CTO & co-founder (@jcoetsie)

description

Presentation given by the creative stores @ droidcon belgium on friday April 2nd 2010

Transcript of multi platform mobile development using titanium

Page 1: multi platform mobile development using titanium

Multi-platform Mobile Application Development

Jasper De Craecker, Mobile Developer (@jasperdc_be)

Jürgen Coetsiers, CTO & co-founder (@jcoetsie)

Page 2: multi platform mobile development using titanium

Reality check…

• Brand Manager: make me a mobile app….– Which device/platform/…

• Devs…– iPhone (Objective-C)– Android (Java, Google style)– RIM (Java, Blackberry or Midlet style)– Symbian (old school ;-) C)– Palm Pre (Web 2.0)– Windows Mobile (.NET compact)– Maemo (GTK+)– …

Page 3: multi platform mobile development using titanium

Imagine that….

• Presentation layer– HTML/CSS

• Business Logic– Javascript

• Run locally– Integrating cloud services

Page 4: multi platform mobile development using titanium

Multi-Platform Landscape

• Players (today)– Single code base, virtual machine

• J2ME• Adobe• …

– Single code base, native deployment• J2ME Polish• PhoneGap• XMLVM, byte code level cross compiler• Appcelerator• …

Page 5: multi platform mobile development using titanium

What we looked at

• Adobe Flash– No iPhone ( yet ;-) )– No Android ( yet ;-) )

• PhoneGap– Webkit based– Limited Access to native components– webkit quirks limit functionality and user interface

• “Position: fix” not possible, …, …• For more: http://www.quirksmode.org/webkit.html

Page 6: multi platform mobile development using titanium

What we work with

• Titanium– by Appcelerator– Premium Partner

• Multi-Platform JavaScript Library• Open Source (Apache Public License)

– Very active community

• Desktop– Win32, OS/X, Linux

• Mobile– iPhone, Android, iPad (beta), BlackBerry (Q2)

Page 7: multi platform mobile development using titanium

Titanium Architecture

Page 8: multi platform mobile development using titanium

Programming Model

• UI– Clean separation– HTML5/CSS3 – JavaScript access to create native controls, views, windows, …

• JavaScript– Mobile Features– Local Resources– Database– Remoting– Any toolkit: jQuery, YUI, Dojo, …

Page 9: multi platform mobile development using titanium

Titanium API’s• Accelerometer• Analytics• App• Database• Facebook• Filesystem• Compass

• Geolocation• Gesture• Media• Network• Platform• UI• Yahoo

Page 10: multi platform mobile development using titanium

Native UI Experience

Page 11: multi platform mobile development using titanium

Simple API’s

Titanium.UI.setTabBadge(10)

Titanium.UI.createMenu()

Function onShake(){

document.getElementById(“status”).innerHTML = ‘Stop Shaking me!’;

}

Var listernerId = Titanium.Gesture.addEventListener(“shake”, onShake);

Page 12: multi platform mobile development using titanium

A Multi-Platform Sports AppOur Proof of Concept Platform

Page 13: multi platform mobile development using titanium

Sports App

• Multi-Sport• News• RealTime• Pictures• Social Media

Data kindly provided by Corelio

Page 14: multi platform mobile development using titanium

Architecture

• Move as much as possible into the cloud– Cloud Based Service– Optimize data for mobile delivery (JSON)

• Minimize device based data processing

– Handle localization– Flexible data providers– Flexible Consumers (sms/mms, mobile, web, billboards, …)

• Device layer– Synchronisation & Caching– Presentation

Data kindly provided by Corelio

Page 15: multi platform mobile development using titanium

Sports App Data kindly provided by Corelio

Page 16: multi platform mobile development using titanium

Team

• Architects– Toon & Jürgen

• Back-End API’s– Cédric

• App Data Layer, caching & sync– Tom

• App UI– Jasper

• Design– Sven

Page 17: multi platform mobile development using titanium

The creative stores, enabling conversations betweens consumers & brands

Page 18: multi platform mobile development using titanium

DEMO