Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Choosing the Right Mobile Development Platform

Choosing the Right Mobile Development Platform

As more and more projects are requiring mobile applications, developers are faced with a wide range of options. AIR for mobile? PhoneGap? Titanium's Appcelerator? Sencha? Native? Which development environment makes sense? This session will explore the advantages and limitations of each of these environments from someone who has been in the mobile application development world for over 4 years. Get a clear picture of what these technologies can offer for your mobile development needs.

Chris Griffith

June 18, 2012
Tweet

More Decks by Chris Griffith

Other Decks in Technology

Transcript

  1. Choosing  the  Right  Mobile  
    Development  Pla5orm  
    @ChrisGriffith  

    View full-size slide

  2. These  opinions  and  thoughts  are  my  own,  and  
    may  or  may  not  reflect  the  opinions  of  the  
    company  that  I  work  for.  
    Disclaimer  

    View full-size slide

  3. What  are  you  building?  

    View full-size slide

  4. Applica5on  vs.  Game?  

    View full-size slide

  5. Na5ve  App  vs.  Web  App?  

    View full-size slide

  6. Na5ve  App  vs.  Pseudo-­‐Na5ve  App?  

    View full-size slide

  7. Device  Pla?orms  to  support?  

    View full-size slide

  8. Discoverability  

    View full-size slide

  9. Upda5ng  you  app  

    View full-size slide

  10. Device  Integra5on?  
    Accelerometer  
     
    Camera  
     
    Capture  
     
    Compass  
     
    Connec5on  
     
    Contacts  
     
    Device  Informa5on  
    Events  
     
    File  
     
    Geoloca5on  
     
    Media  
     
    No5fica5on  
     
    Storage  
     

    View full-size slide

  11. What  does  jQuery  Mobile  do?  
    jQuery  Mobile  makes  it  easy  to  develop  user  interfaces  for  mobile  web  apps.  

    View full-size slide

  12.  
       
         
         Header  
         
         
         Content  
         
         
         Footer  
         
       
     
    Basic  Structure  

    View full-size slide

  13. Basic  Structure  

    View full-size slide

  14.  
       
         
         Page  Title  
         
         
         My  page  content  
         About  this  app  
         
         
         Footer  
         
       
       
         
         About  This  App  
         
         
         This  app  rocks!  Go  home  
         
       
     
    Basic  Structure  

    View full-size slide

  15. Performance  

    View full-size slide

  16. $(document).bind("mobileinit",  funcXon()  {  
           $.mobile.defaultPageTransiXon  =  "none";  
           $.mobile.defaultDialogTransiXon  =  "none";  
    });  
    Performance  

    View full-size slide

  17. Device  Access?  
    Limited  
     
    Device  by  device  
     
    But…  
     
    GeOng  bePer  

    View full-size slide

  18. Templa5ng  

    View full-size slide

  19. Templa5ng  
    $('#hikeDetailsPage').live('pageshow',  funcXon(event)  {  
     var  hikeDetailsHTML;  
       
     hikeDetailsHTML  =  Mustache.to_html(hikeDetailsTemplate,  
    currentHikeData);  
     
     $('#hikeDetails').html(hikeDetailsHTML);  
    });  

    View full-size slide

  20. ApplicaXon  container  that  allows  you  to  build  
    naXvely  installed  apps  using  HTML,  CSS  &  JavaScript    
     
    What  is  PhoneGap  

    View full-size slide

  21. What  pla?orms  support  PhoneGap  

    View full-size slide

  22. Building  it  
    phonegap.com/start  

    View full-size slide

  23. Building  it  
    build.phonegap.com  

    View full-size slide

  24. Building  it  

    View full-size slide

  25. Device  Access  
    Accelerometer  
     
    Camera  
     
    Capture  
     
    Compass  
     
    Connec5on  
     
    Contacts  
     
    Device  Informa5on  
    File  
     
    Geoloca5on  
     
    Media  
     
    No5fica5on  
     
    Storage  
     

    View full-size slide

  26. Beyond  the  mobile  web  
    PhoneGap  is  extensible  with  a  “naXve  
    plugin”  model  that  enables  you  to  write  
    your  own  naXve  logic  to  access  via  
    JavaScript.    
     
    There  are  lots  of  open  source  plugins  at  
    heps://github.com/phonegap/
    phonegap-­‐plugins    
     
    Learn  more  at  hep://
    wiki.phonegap.com/w/page/36752779/  
    PhoneGap%20Plugins    
     

    View full-size slide

  27. Going  na5ve-­‐ish  

    View full-size slide

  28. Native UI
    Real native tables, tabs, sliders, and views
    Local and Remote Data
    Local SQL Database, Lightweight Key/Value Store, XHR
    Social APIs
    Integrated Facebook Connect and YQL
    Rich Media APIs
    Local and streaming audio and video, media recording
    Open Source and Extensible
    Extend Titanium with custom modules in native code
    Integrated Analytics
    Baked-in analytics APIs
    Development Tools
    Develop and distribute your app for multiple platforms
    from a single tool
    Pla?orm  features  

    View full-size slide

  29. Performance  

    View full-size slide

  30. Pla?orm  features  
    Accelerometer  
     
    Camera  
     
    Capture  
     
    Compass  
     
    Connec5on  
     
    Contacts  
     
    Device  Informa5on  
    File  
     
    Geoloca5on  
     
    Media  
     
    No5fica5on  
     
    Storage  
     

    View full-size slide

  31. SDK  installa5on  required  

    View full-size slide

  32. App  Structure  

    View full-size slide

  33. App.js  
    Ti.UI.setBackgroundColor('#fff');  
    var  currentMap  =  "Sedona";  
    var  currentHike  =  "";  
    var  baseLaXtude  =  34.866285;  
    var  baseLongitude  =  -­‐111.763573;  
    var  handFont  =  "Marker  Felt";  
    var  bodyFont  =  "Times  New  Roman";  
     
    var  AppTabGroup  =  require('ui/AppTabGroup');  
    new  AppTabGroup().open();  
     
    AppTabGroup.orientaXonModes  =  [Titanium.UI.PORTRAIT,  Titanium.UI.UPSIDE_PORTRAIT];  
     
    if  (  Ti.Pla5orm.osname  ==  'android'  )  {  
     handFont  =  "Droid  Sans";  
     bodyFont  =  "Droid  Serif"  
    }  

    View full-size slide

  34. HikesWindow.js  
    funcXon  HikesWindow(Xtle)  {  
     var  HikeDetailsWindow  =  require('ui/HikeDetailsWindow');  
       
     var  self  =  Ti.UI.createWindow({  
       Xtle:Xtle,  
       backgroundColor:'white',  
       barColor:'#bb9650'  
     });  
       
     var  hikes_db  =  Titanium.Database.install('/Hikes.db','Hikes');  
     var  hikeData  =  [];  
    …  
     

    View full-size slide

  35. The  future…  

    View full-size slide

  36. What  pla?orms  support  Adobe  AIR?  

    View full-size slide

  37. SDK  installa5on  required  
    *  Highly  Recommended  

    View full-size slide

  38. Device  Access  
    Accelerometer  
     
    Camera  
     
    Capture  
     
    Connec5on  
     
    File  
     
    Geoloca5on  
     
    Media  
     
    Storage  
     
     

    View full-size slide

  39. Na5ve  Extensions  
    Samples  
    Gyroscope  
    Licensing  
    NetworkInfo  
    No5fica5on  
    Vibra5on  
    Game  Center  
    iAd  
    AdMob  

    View full-size slide

  40. Run5me  Requirement  
    ~7+  MB  to  app  size  
    Cap5ve  Run5me  

    View full-size slide

  41. Making  it  look  good  

    View full-size slide

  42. Making  it  look  good  

    View full-size slide

  43. Performance  

    View full-size slide

  44. App  Structure  

    View full-size slide

  45. What  is  Sencha  Touch  2?  
    Javascript API for mobile apps
    Built on Web Standards
    Targets WebKit

    View full-size slide

  46. What  is  Sencha  Touch  2?  

    View full-size slide

  47. Sencha  Touch  is  licensed  under  free  commercial  and  
    open  source  licenses  for  applicaXon  development,  
    and  a  paid  commercial  license  for  OEM  uses.  
       

    View full-size slide

  48. What  pla?orms  support  Sencha  Touch?  

    View full-size slide





  49. Hike Sedona










    Basic  Structure  

    View full-size slide

  50. Ext.define("HikeSedona.view.Main",  {  
           extend:  'Ext.tab.Panel',  
             
           config:  {  
                   tabBarPosiXon:  'boeom',  
                     
                   items:  [  
                               {  xclass:  'HikeSedona.view.hike.Card'},  
           {  xclass:  'HikeSedona.view.LocaXon'}  
                   ]  
           }  
    });  
    Basic  Structure  

    View full-size slide

  51. App  Structure  

    View full-size slide

  52. Components  
    Audio  
     
     
    Carousel  
     
     
     
    Forms  
     
     
     
    Icons  
     
     
     
    List  
    Search  List  
     
     
    Maps  
     
     
     
    Nested  List  
     
     
     
    Overlays  
     
     
     
    Tabs  
    Video  

    View full-size slide

  53. Sencha  Designer  

    View full-size slide

  54. Device  Access  
    Accelerometer  
     
    Camera  
     
    Connec5on  Status  
     
    Geoloca5on  
     
    No5fica5ons  
     
    Storage  

    View full-size slide

  55. Na5ve  Packaging  
    Sencha  SDK  Tools  
     
     

    View full-size slide

  56. Sencha  Architect  

    View full-size slide

  57. Performance  

    View full-size slide

  58. Now  go  build  something!  

    View full-size slide

  59. Thanks!  
    chris.griffi[email protected]  
    @chrisgriffith  
    hep://chrisgriffith.wordpress.com/  

    View full-size slide