Using Web Technologies to Build Native iPhone
          and Android Applications


      Mobile for the rest of us
       ...
About Me

• @jhaynie
• http://blog.jeffhaynie.us
• jhaynie@appcelerator.com
• #titanium_app on freenode
Why Mobile?


4 Billion devices worldwide
iPhone
• 50 Million iPhones - 5 Million this past
  quarter
• 1.5 Billions application downloads
• 65K+ applications
• iPh...
Android

• 1M phones already shipping (900% growth
  expected)
• 20 new phones coming out EY 2009
• Thousands and thousand...
iPhone: 8% market share but 43% of mobile web
Explosion of
       opportunities

20% year over year growth anticipated for
next 5 years in smart phones
Oh no.
• iPhone (Objective-C, 28th!)
• Android (Java, Google Style)
• RIM (Java, Blackberry or Midlet style)
• Symbian (ol...
Oh, yeah...
• Web Browsers
• Desktop Apps
• Net books
• E-Book readers
• Tablets
• etc etc.
We                Web
• HTML, CSS, JavaScript
• Presentation / UI can easily be built with
  HTML/ CSS
• JavaScript API fo...
It’s the UX

Build applications that fit the
use cases that are tailored for
the modality
What we want
• Skills
• Tools
• Reusability
• Platforms
• Portability
• Speed / Cost
• Open source / Standards
Appcelerator

Empower developers to quickly create and
commercialize web, desktop and mobile
applications
Appcelerator Products
        Create, test, and commercialize native mobile and desktop
        applications with the web ...
Product Architecture
                             Mobile                                        Desktop
Titanium




     ...
Titanium

• Desktop: Win32, OSX, Linux
• Mobile: iPhone and Android
Programming Model

Titanium supports JavaScript, HTML, CSS for
building mobile applications
UI

• Clean separation of Design from Code
• UI is constructed via HTML, CSS
• JavaScript access to create native controls...
JavaScript
• JavaScript is used to program Mobile
  Features, Access local Resources,
  Database, Remote Web Services, etc...
App Assembly

Titanium SDK compiles (using Titanium
Developer) the application using the Mobile
SDK into a native applicat...
Mobile APIs

                Geolocation
Accelerometer
                 Gesture
   Analytics
                  Media
     ...
Building the UI

• <html> accepted here (including HTML5)
• optimized native UI controls
• hybrid UI composition
Typical iPhone UI
Typical Android UI
<html>
Native UI views
Grouped View   Table View
Composite UI
Simple APIs
Titanium.UI.setTabBadge(10)




 Titanium.UI.createMenu()
Grouped View Example


var groupedView = Titanium.UI.iPhone.createGroupedView();
groupedView.addSection(optionSection);
gr...
Button Group Section
var   optionData = [
      {title:'Option 1', selected:true},
      {title:'Option 2'},
      {title:...
Input Group Section

     var inputData = [
      {title:'Input 1',
       input:switchInstance, image:'iTunes.png'},
    ...
Native UI Controls
• Toolbars
• Tab Bars
• Status Bars
• Dialogs
• Controls
Native UI (Android)
Databases

var db = Titanium.Database.open('mydb');
db.execute('INSERT INTO DATABASETEST (ID,   NAME ) VALUES(?,?)',
1,'Na...
Camera

Titanium.Media.showCamera(
{
    success:function(image,details)
    {
        $("status").innerHTML="Uploading......
Video
var video = Titanium.Media.
createVideoPlayer({ contentURL : "movie.mp4"});

var listenerId = video.addEventListener...
Gestures
function onShake()
{
   document.getElementById("status").innerHTML = 'Stop
Shaking me';  

}

var listenerId = T...
Accelerometer

Titanium.Accelerometer.addEventListener('update',function(e){

   document.getElementById('x').innerHTML = ...
Titanium Info
• http://www.appcelerator.com
• http://github.com/appcelerator
• @appcelerator
• #titanium_app on irc.freeno...
Open Source World : Using Web Technologies to build native iPhone and Android applications
Open Source World : Using Web Technologies to build native iPhone and Android applications
Open Source World : Using Web Technologies to build native iPhone and Android applications
Open Source World : Using Web Technologies to build native iPhone and Android applications
Open Source World : Using Web Technologies to build native iPhone and Android applications
Upcoming SlideShare
Loading in...5
×

Open Source World : Using Web Technologies to build native iPhone and Android applications

4,163

Published on

Presentation given by Jeff Haynie, CEO of Appcelerator, at Open Source World 2009 in San Francisco, CA on August 13, 2009.

Jeff talks about the state of the mobile smart phone application marketplace and how you can build native iPhone and Android applications using the open source platform, Appcelerator Titanium, and web technologies such as HTML, CSS and JavaScript.

Published in: Technology, Education
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,163
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
258
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "Open Source World : Using Web Technologies to build native iPhone and Android applications"

  1. 1. Using Web Technologies to Build Native iPhone and Android Applications Mobile for the rest of us Jeff Haynie @jhaynie
  2. 2. About Me • @jhaynie • http://blog.jeffhaynie.us • jhaynie@appcelerator.com • #titanium_app on freenode
  3. 3. Why Mobile? 4 Billion devices worldwide
  4. 4. iPhone • 50 Million iPhones - 5 Million this past quarter • 1.5 Billions application downloads • 65K+ applications • iPhone has raised bar and proven how to make money in mobile
  5. 5. Android • 1M phones already shipping (900% growth expected) • 20 new phones coming out EY 2009 • Thousands and thousands of applications • It’s Google
  6. 6. iPhone: 8% market share but 43% of mobile web
  7. 7. Explosion of opportunities 20% year over year growth anticipated for next 5 years in smart phones
  8. 8. Oh no. • iPhone (Objective-C, 28th!) • 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+)
  9. 9. Oh, yeah... • Web Browsers • Desktop Apps • Net books • E-Book readers • Tablets • etc etc.
  10. 10. We Web • HTML, CSS, JavaScript • Presentation / UI can easily be built with HTML/ CSS • JavaScript API for mobile features, platform, UI • Run locally, integrate cloud services
  11. 11. It’s the UX Build applications that fit the use cases that are tailored for the modality
  12. 12. What we want • Skills • Tools • Reusability • Platforms • Portability • Speed / Cost • Open source / Standards
  13. 13. Appcelerator Empower developers to quickly create and commercialize web, desktop and mobile applications
  14. 14. Appcelerator Products Create, test, and commercialize native mobile and desktop applications with the web technologies you use today. Develop Native iPhone Build Desktop apps Cloud services used for Web development tools and Android apps with that can be deployed testing, packaging, that enable rapid RIA full access to each with one code base on distribution, and development. device’s APIs. the PC, Mac, or Linux analytics. platforms.
  15. 15. Product Architecture Mobile Desktop Titanium Advanced Advanced Advanced APIs APIs APIs Analytics Advertising Social Networking Team Collaboration Appcelerator -  uattro Q -  acebook F -  hare your Project S - Usage Network -  reystripe G - Twitter - Account Management - Events -  ahoo Y Training Support
  16. 16. Titanium • Desktop: Win32, OSX, Linux • Mobile: iPhone and Android
  17. 17. Programming Model Titanium supports JavaScript, HTML, CSS for building mobile applications
  18. 18. UI • Clean separation of Design from Code • UI is constructed via HTML, CSS • JavaScript access to create native controls, native views, windows, etc.
  19. 19. JavaScript • JavaScript is used to program Mobile Features, Access local Resources, Database, Remote Web Services, etc. • Use your favorite JS Toolkit - jQuery,YUI, Dojo, Mootools, etc etc.
  20. 20. App Assembly Titanium SDK compiles (using Titanium Developer) the application using the Mobile SDK into a native application
  21. 21. Mobile APIs Geolocation Accelerometer Gesture Analytics Media App Network Database Platform Filesystem UI
  22. 22. Building the UI • <html> accepted here (including HTML5) • optimized native UI controls • hybrid UI composition
  23. 23. Typical iPhone UI
  24. 24. Typical Android UI
  25. 25. <html>
  26. 26. Native UI views Grouped View Table View
  27. 27. Composite UI
  28. 28. Simple APIs Titanium.UI.setTabBadge(10) Titanium.UI.createMenu()
  29. 29. Grouped View Example var groupedView = Titanium.UI.iPhone.createGroupedView(); groupedView.addSection(optionSection); groupedView.addSection(buttonSection); groupedView.addSection(inputSection); groupedView.open({animated:true});
  30. 30. Button Group Section var optionData = [     {title:'Option 1', selected:true},     {title:'Option 2'},     {title:'Option 3'}   ]; var optionSection = Titanium.UI.iPhone.createGroupedSection({header:'Option Group', type:'option', data:optionData}); optionSection.addEventListener('click',function(e) { });
  31. 31. Input Group Section var inputData = [     {title:'Input 1', input:switchInstance, image:'iTunes.png'},     {title:'Sound', input:sliderInstance, image:'Mail.png'},     {title:'Name', input:textInstance},     {title:'Input 2', value:'foo', hasChild:true},     {title:'Input 3'}   ]; var inputSection = Titanium.UI.iPhone.createGroupedSection({header:'Input Group', type:'input', data:inputData}); inputSection.addEventListener('click',function(e) { });
  32. 32. Native UI Controls • Toolbars • Tab Bars • Status Bars • Dialogs • Controls
  33. 33. Native UI (Android)
  34. 34. Databases var db = Titanium.Database.open('mydb'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)', 1,'Name 1'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)', 2,'Name 2'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)', 3,'Name 3'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)', 4,'Name 4');
  35. 35. Camera Titanium.Media.showCamera( {     success:function(image,details)     {         $("status").innerHTML="Uploading...."+image.url; } });
  36. 36. Video var video = Titanium.Media. createVideoPlayer({ contentURL : "movie.mp4"}); var listenerId = video.addEventListener("complete", function() {    video.removeEventListener('complete', listenerId);    var dlg = Titanium.UI.createAlertDialog({     'title' : 'Video Complete',     'message' : 'video completed',     'buttonNames' : [ 'OK' ]    });    dlg.show(); }); video.play();
  37. 37. Gestures function onShake() {    document.getElementById("status").innerHTML = 'Stop Shaking me';   } var listenerId = Titanium.Gesture.addEventListener("shake", onShake);
  38. 38. Accelerometer Titanium.Accelerometer.addEventListener('update',function(e){    document.getElementById('x').innerHTML = e.x;    document.getElementById('y').innerHTML = e.y;    document.getElementById('z').innerHTML = e.z });
  39. 39. Titanium Info • http://www.appcelerator.com • http://github.com/appcelerator • @appcelerator • #titanium_app on irc.freenode.net • http://slideshare.net/jhaynie
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×