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

More Decks by Chris Griffith

Other Decks in Technology


  1. Choosing  the  Right  Mobile   Development  Pla5orm   @ChrisGriffith  

  2. These  opinions  and  thoughts  are  my  own,  and   may

     or  may  not  reflect  the  opinions  of  the   company  that  I  work  for.   Disclaimer  
  3. None
  4. None
  5. None
  6. None
  7. What  are  you  building?  

  8. Applica5on  vs.  Game?  

  9. Na5ve  App  vs.  Web  App?  

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

  11. Device  Pla?orms  to  support?  

  12. None
  13. Discoverability  

  14. None
  15. None
  16. None
  17. Upda5ng  you  app  

  18. Device  Integra5on?   Accelerometer     Camera     Capture

        Compass     Connec5on     Contacts     Device  Informa5on   Events     File     Geoloca5on     Media     No5fica5on     Storage    
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. What  does  jQuery  Mobile  do?   jQuery  Mobile  makes  it

     easy  to  develop  user  interfaces  for  mobile  web  apps.  
  28. <body>    <div  id="homePage"  data-­‐role="page">      <div  data-­‐role="header">  

         <h1>Header</h1>      </div>      <div  data-­‐role="content">        <p>Content</p>      </div>      <div  data-­‐role="footer">        <h4>Footer</h4>      </div>    </div>   </body>   Basic  Structure  
  29. Basic  Structure  

  30. <body>    <div  id="homePage"  data-­‐role="page">      <div  data-­‐role="header">  

         <h1>Page  Title</h1>      </div>      <div  data-­‐role="content">        <p>My  page  content</p>        <p><a  href="#about">About  this  app</a></p>      </div>      <div  data-­‐role="footer">        <h4>Footer</h4>      </div>    </div>    <div  data-­‐role="page"  id="about">      <div  data-­‐role="header">        <h1>About  This  App</h1>      </div>      <div  data-­‐role="content">        <p>This  app  rocks!  <a  href="#homePage">Go  home</a></p>      </div>    </div>   </body>   Basic  Structure  
  31. Performance  

  32. $(document).bind("mobileinit",  funcXon()  {          $.mobile.defaultPageTransiXon  =  "none";

             $.mobile.defaultDialogTransiXon  =  "none";   });   Performance  
  33. Device  Access?   Limited     Device  by  device  

      But…     GeOng  bePer  
  34. Templa5ng  

  35. Templa5ng   $('#hikeDetailsPage').live('pageshow',  funcXon(event)  {    var  hikeDetailsHTML;    

       hikeDetailsHTML  =  Mustache.to_html(hikeDetailsTemplate,   currentHikeData);      $('#hikeDetails').html(hikeDetailsHTML);   });  
  36. Styling  

  37. None
  38. iOS  

  39. iOS  

  40. Android  

  41. Android  

  42. None
  43. None
  44. ApplicaXon  container  that  allows  you  to  build   naXvely  installed

     apps  using  HTML,  CSS  &  JavaScript       What  is  PhoneGap  
  45. What  pla?orms  support  PhoneGap  

  46. Building  it   phonegap.com/start  

  47. Building  it   build.phonegap.com  

  48. Building  it  

  49. Device  Access   Accelerometer     Camera     Capture

        Compass     Connec5on     Contacts     Device  Informa5on   File     Geoloca5on     Media     No5fica5on     Storage    
  50. 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      
  51. iOS  

  52. Android  

  53. None
  54. Going  na5ve-­‐ish  

  55. 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  
  56. None
  57. None
  58. Performance  

  59. Pla?orm  features   Accelerometer     Camera     Capture

        Compass     Connec5on     Contacts     Device  Informa5on   File     Geoloca5on     Media     No5fica5on     Storage    
  60. SDK  installa5on  required  

  61. App  Structure  

  62. 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"   }  
  63. 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  =  [];   …    
  64. iOS  

  65. iOS  

  66. Android  

  67. Android  

  68. None
  69. The  future…  

  70. What  pla?orms  support  Adobe  AIR?  

  71. None
  72. SDK  installa5on  required   *  Highly  Recommended  

  73. Device  Access   Accelerometer     Camera     Capture

        Connec5on     File     Geoloca5on     Media     Storage      
  74. Na5ve  Extensions   Samples   Gyroscope   Licensing   NetworkInfo

      No5fica5on   Vibra5on   Game  Center   iAd   AdMob  
  75. Run5me  Requirement   ~7+  MB  to  app  size   Cap5ve

  76. Making  it  look  good  

  77. Making  it  look  good  

  78. Performance  

  79. App  Structure  

  80. iOS  

  81. iOS  

  82. Android  

  83. Android  

  84. None
  85. What  is  Sencha  Touch  2?   Javascript API for mobile

    apps Built on Web Standards Targets WebKit
  86. What  is  Sencha  Touch  2?  

  87. Sencha  Touch  is  licensed  under  free  commercial  and   open

     source  licenses  for  applicaXon  development,   and  a  paid  commercial  license  for  OEM  uses.      
  88. What  pla?orms  support  Sencha  Touch?  

  89. <!DOCTYPE HTML> <html manifest="" lang="en-US"> <head> <meta charset="UTF-8"> <title>Hike Sedona</title>

    <script id="microloader" type="text/javascript" src="sdk/ microloader/development.js"></script> </head> <body> <div id="appLoadingIndicator"> <div></div> <div></div> <div></div> </div> </body> </html> Basic  Structure  
  90. Ext.define("HikeSedona.view.Main",  {          extend:  'Ext.tab.Panel',    

                   config:  {                  tabBarPosiXon:  'boeom',                                    items:  [                              {  xclass:  'HikeSedona.view.hike.Card'},          {  xclass:  'HikeSedona.view.LocaXon'}                  ]          }   });   Basic  Structure  
  91. App  Structure  

  92. Components   Audio       Carousel      

      Forms         Icons         List   Search  List       Maps         Nested  List         Overlays         Tabs   Video  
  93. None
  94. Sencha  Designer  

  95. Device  Access   Accelerometer     Camera     Connec5on

     Status     Geoloca5on     No5fica5ons     Storage  
  96. Na5ve  Packaging   Sencha  SDK  Tools      

  97. Sencha  Architect  

  98. Performance  

  99. iOS  

  100. Android  

  101. None
  102. Now  go  build  something!  

  103. Thanks!   chris.griffith@gmail.com   @chrisgriffith   hep://chrisgriffith.wordpress.com/