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. These  opinions  and  thoughts  are  my  own,  and   may

     or  may  not  reflect  the  opinions  of  the   company  that  I  work  for.   Disclaimer  
  2. Device  Integra5on?   Accelerometer     Camera     Capture

        Compass     Connec5on     Contacts     Device  Informa5on   Events     File     Geoloca5on     Media     No5fica5on     Storage    
  3. What  does  jQuery  Mobile  do?   jQuery  Mobile  makes  it

     easy  to  develop  user  interfaces  for  mobile  web  apps.  
  4. <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  
  5. <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  
  6. $(document).bind("mobileinit",  funcXon()  {          $.mobile.defaultPageTransiXon  =  "none";

             $.mobile.defaultDialogTransiXon  =  "none";   });   Performance  
  7. Templa5ng   $('#hikeDetailsPage').live('pageshow',  funcXon(event)  {    var  hikeDetailsHTML;    

       hikeDetailsHTML  =  Mustache.to_html(hikeDetailsTemplate,   currentHikeData);      $('#hikeDetails').html(hikeDetailsHTML);   });  
  8. ApplicaXon  container  that  allows  you  to  build   naXvely  installed

     apps  using  HTML,  CSS  &  JavaScript       What  is  PhoneGap  
  9. Device  Access   Accelerometer     Camera     Capture

        Compass     Connec5on     Contacts     Device  Informa5on   File     Geoloca5on     Media     No5fica5on     Storage    
  10. 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      
  11. 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  
  12. Pla?orm  features   Accelerometer     Camera     Capture

        Compass     Connec5on     Contacts     Device  Informa5on   File     Geoloca5on     Media     No5fica5on     Storage    
  13. 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"   }  
  14. 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  =  [];   …    
  15. Device  Access   Accelerometer     Camera     Capture

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

      No5fica5on   Vibra5on   Game  Center   iAd   AdMob  
  17. What  is  Sencha  Touch  2?   Javascript API for mobile

    apps Built on Web Standards Targets WebKit
  18. Sencha  Touch  is  licensed  under  free  commercial  and   open

     source  licenses  for  applicaXon  development,   and  a  paid  commercial  license  for  OEM  uses.      
  19. <!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  
  20. Ext.define("HikeSedona.view.Main",  {          extend:  'Ext.tab.Panel',    

                   config:  {                  tabBarPosiXon:  'boeom',                                    items:  [                              {  xclass:  'HikeSedona.view.hike.Card'},          {  xclass:  'HikeSedona.view.LocaXon'}                  ]          }   });   Basic  Structure  
  21. Components   Audio       Carousel      

      Forms         Icons         List   Search  List       Maps         Nested  List         Overlays         Tabs   Video  
  22. Device  Access   Accelerometer     Camera     Connec5on

     Status     Geoloca5on     No5fica5ons     Storage