Multi-platform Mobile Application Development<br />Jasper De Craecker, Mobile Developer (@jasperdc_be)<br />Jürgen Coetsie...
Reality check…<br />Brand Manager: make me a mobile app….<br />Whichdevice/platform/…<br />Devs…<br />iPhone (Objective-C)...
Imaginethat….<br />Presentationlayer<br />HTML/CSS<br />Business Logic<br />Javascript<br />Run locally<br />Integratingcl...
Multi-Platform Landscape<br />Players (today)<br />Single code base, virtual machine<br />J2ME<br />Adobe<br />…<br />Sing...
What we looked at<br />Adobe Flash<br />No iPhone ( yet ;-) )<br />No Android ( yet ;-) )<br />PhoneGap<br />Webkit based<...
What we workwith<br />Titanium<br />byAppcelerator<br />Premium Partner<br />Multi-PlatformJavaScriptLibrary<br />Open Sou...
Titanium Architecture<br />
Programming Model<br />UI<br />Clean separation<br />HTML5/CSS3 <br />JavaScriptaccess to createnativecontrols, views, wi...
Titanium API’s<br />Accelerometer<br />Analytics<br />App<br />Database<br />Facebook<br />Filesystem<br />Compass<br />Ge...
Native UI Experience<br />
SimpleAPI’s<br />FunctiononShake()<br />{<br />document.getElementById(“status”).innerHTML = ‘Stop Shaking me!’;<br />}<br...
A Multi-PlatformSportsApp<br />OurProof of Concept Platform<br />
SportsApp<br />Multi-Sport<br />News<br />RealTime<br />Pictures<br />Social Media<br />Data kindlyprovidedbyCorelio<br />
Architecture<br />Move as much as possibleinto the cloud<br />CloudBased Service<br />Optimize data for mobile delivery (J...
SportsApp<br />Data kindlyprovidedbyCorelio<br />
Team<br />Architects<br />Toon & Jürgen<br />Back-EndAPI’s<br />Cédric<br />App Data Layer, caching & sync<br />Tom<br />A...
The creative stores, enablingconversationsbetweensconsumers & brands<br />
DEMO<br />
Upcoming SlideShare
Loading in …5
×

multi platform mobile development using titanium

2,620 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,620
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
64
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

multi platform mobile development using titanium

  1. 1. Multi-platform Mobile Application Development<br />Jasper De Craecker, Mobile Developer (@jasperdc_be)<br />Jürgen Coetsiers, CTO & co-founder (@jcoetsie)<br />
  2. 2. Reality check…<br />Brand Manager: make me a mobile app….<br />Whichdevice/platform/…<br />Devs…<br />iPhone (Objective-C)<br />Android (Java, Google style)<br />RIM (Java, BlackberryorMidletstyle)<br />Symbian (old school ;-) C)<br />Palm Pre (Web 2.0)<br />Windows Mobile (.NET compact)<br />Maemo (GTK+)<br />…<br />
  3. 3. Imaginethat….<br />Presentationlayer<br />HTML/CSS<br />Business Logic<br />Javascript<br />Run locally<br />Integratingcloud services<br />
  4. 4. Multi-Platform Landscape<br />Players (today)<br />Single code base, virtual machine<br />J2ME<br />Adobe<br />…<br />Single code base, nativedeployment<br />J2ME Polish<br />PhoneGap<br />XMLVM, byte code level cross compiler<br />Appcelerator<br />…<br />
  5. 5. What we looked at<br />Adobe Flash<br />No iPhone ( yet ;-) )<br />No Android ( yet ;-) )<br />PhoneGap<br />Webkit based<br />Limited Access to nativecomponents<br />webkit quirks limit functionality and user interface<br />“Position: fix” notpossible, …, …<br />For more: http://www.quirksmode.org/webkit.html<br />
  6. 6. What we workwith<br />Titanium<br />byAppcelerator<br />Premium Partner<br />Multi-PlatformJavaScriptLibrary<br />Open Source (Apache Public License)<br />Veryactivecommunity<br />Desktop<br />Win32, OS/X, Linux<br />Mobile<br />iPhone, Android, iPad (beta), BlackBerry (Q2)<br />
  7. 7. Titanium Architecture<br />
  8. 8. Programming Model<br />UI<br />Clean separation<br />HTML5/CSS3 <br />JavaScriptaccess to createnativecontrols, views, windows, …<br />JavaScript<br />Mobile Features<br />Local Resources<br />Database<br />Remoting<br />Anytoolkit: jQuery, YUI, Dojo, …<br />
  9. 9. Titanium API’s<br />Accelerometer<br />Analytics<br />App<br />Database<br />Facebook<br />Filesystem<br />Compass<br />Geolocation<br />Gesture<br />Media<br />Network<br />Platform<br />UI<br />Yahoo<br />
  10. 10. Native UI Experience<br />
  11. 11. SimpleAPI’s<br />FunctiononShake()<br />{<br />document.getElementById(“status”).innerHTML = ‘Stop Shaking me!’;<br />}<br />Var listernerId = Titanium.Gesture.addEventListener(“shake”, onShake);<br />Titanium.UI.setTabBadge(10)<br />Titanium.UI.createMenu()<br />
  12. 12. A Multi-PlatformSportsApp<br />OurProof of Concept Platform<br />
  13. 13. SportsApp<br />Multi-Sport<br />News<br />RealTime<br />Pictures<br />Social Media<br />Data kindlyprovidedbyCorelio<br />
  14. 14. Architecture<br />Move as much as possibleinto the cloud<br />CloudBased Service<br />Optimize data for mobile delivery (JSON)<br />Minimizedevicebased data processing<br />Handlelocalization<br />Flexible data providers<br />FlexibleConsumers (sms/mms, mobile, web, billboards, …)<br />Devicelayer<br />Synchronisation & Caching<br />Presentation<br />Data kindlyprovidedbyCorelio<br />
  15. 15. SportsApp<br />Data kindlyprovidedbyCorelio<br />
  16. 16. Team<br />Architects<br />Toon & Jürgen<br />Back-EndAPI’s<br />Cédric<br />App Data Layer, caching & sync<br />Tom<br />App UI<br />Jasper<br />Design<br />Sven<br />
  17. 17. The creative stores, enablingconversationsbetweensconsumers & brands<br />
  18. 18. DEMO<br />

×