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.

Transcript

1. Choosing  the  Right  Mobile  
   Development  Pla5orm  
   @ChrisGriffith  
   

   View 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 Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. What  are  you  building?  
   

   View Slide

8. Applica5on  vs.  Game?  
   

   View Slide

9. Na5ve  App  vs.  Web  App?  
   

   View Slide

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

    View Slide

11. Device  Pla?orms  to  support?  
    

    View Slide

12. View Slide

13. Discoverability  
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. Upda5ng  you  app  
    

    View Slide

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

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

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

    View Slide

28.  
       
         
         Header  
         
         
         Content  
         
         
         Footer  
         
       
     
    Basic  Structure  
    

    View Slide

29. Basic  Structure  
    

    View Slide

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

    View Slide

31. Performance  
    

    View Slide

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

    View Slide

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

    View Slide

34. Templa5ng  
    

    View Slide

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

    View Slide

36. Styling  
    

    View Slide

37. View Slide

38. iOS  
    

    View Slide

39. iOS  
    

    View Slide

40. Android  
    

    View Slide

41. Android  
    

    View Slide

42. View Slide

43. View Slide

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

    View Slide

45. What  pla?orms  support  PhoneGap  
    

    View Slide

46. Building  it  
    phonegap.com/start  
    

    View Slide

47. Building  it  
    build.phonegap.com  
    

    View Slide

48. Building  it  
    

    View Slide

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

    View Slide

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    
     
    

    View Slide

51. iOS  
    

    View Slide

52. Android  
    

    View Slide

53. View Slide

54. Going  na5ve-­‐ish  
    

    View Slide

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  
    

    View Slide

56. View Slide

57. View Slide

58. Performance  
    

    View Slide

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

    View Slide

60. SDK  installa5on  required  
    

    View Slide

61. App  Structure  
    

    View Slide

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"  
    }  
    

    View Slide

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  =  [];  
    …  
     
    

    View Slide

64. iOS  
    

    View Slide

65. iOS  
    

    View Slide

66. Android  
    

    View Slide

67. Android  
    

    View Slide

68. View Slide

69. The  future…  
    

    View Slide

70. What  pla?orms  support  Adobe  AIR?  
    

    View Slide

71. View Slide

72. SDK  installa5on  required  
    *  Highly  Recommended  
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

76. Making  it  look  good  
    

    View Slide

77. Making  it  look  good  
    

    View Slide

78. Performance  
    

    View Slide

79. App  Structure  
    

    View Slide

80. iOS  
    

    View Slide

81. iOS  
    

    View Slide

82. Android  
    

    View Slide

83. Android  
    

    View Slide

84. View Slide

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

    View Slide

86. What  is  Sencha  Touch  2?  
    

    View Slide

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

    View Slide

88. What  pla?orms  support  Sencha  Touch?  
    

    View Slide

89. 
    
    
    
    Hike Sedona
    
    
    
    
    
    
    
    
    
    
    Basic  Structure  
    

    View Slide

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  
    

    View Slide

91. App  Structure  
    

    View Slide

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

    View Slide

93. View Slide

94. Sencha  Designer  
    

    View Slide

95. Device  Access  
    Accelerometer  
     
    Camera  
     
    Connec5on  Status  
     
    Geoloca5on  
     
    No5fica5ons  
     
    Storage  
    

    View Slide

96. Na5ve  Packaging  
    Sencha  SDK  Tools  
     
     
    

    View Slide

97. Sencha  Architect  
    

    View Slide

98. Performance  
    

    View Slide

99. iOS  
    

    View Slide

100. Android  
     

     View Slide

101. View Slide

102. Now  go  build  something!  
     

     View Slide

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

     View Slide