Cross PlatformMobile ApplicationsBy Rohit GhatolContact me –rohitsghatol@gmail.com                         http://meetup.c...
IntroductionRohit Ghatol• Project Manager @ Synerzip• Associate Architect @ QuickOffice Inc• GTUG Manager & Tech Next Foun...
Topics• Overview• Understanding Mobile Apps• Cross Platform Mobile App Development    • Pure HTML/JavaScript – PhoneGap   ...
OverviewThe process of developing Applications for various mobileplatform using common source code with little or no chang...
Understanding Mobile Apps                                      5         http://meetup.com/technext
Reaching Mobile Users                                        6           http://meetup.com/technext
1. Mobile Features    Mostly Feature Sub Set                        Complete Feature Set                                  ...
2. Tablet Features     Almost Complete                                Complete Feature Set     Feature Set                ...
3. User InteractionTouch based   Accelerometer                                             Traditional              Compas...
e.g Layar Application                                         10            http://meetup.com/technext
4. Location aware                                  Can be Location Aware                                  but approximateL...
5. Sensors             Handy Camera and Voice Recording             Upcoming NFC (Near Field Communication)               ...
e.g Shopping ApplicationsScan a product’s barcode to know                  If not, then navigate to a store               ...
6. Push Notifications          Push Notification          Notifying the User proactively                                  ...
Challenges in building Mobile        Applications                                        15           http://meetup.com/te...
1. OS Fragmentation                       Windows 7      Fragmentation                                         16         ...
2. Multiple Teams/Product                         Windows 7  Multiple Teams/Products                  17              http...
3. Uniform User Experience                          Windows 7   Uniform User Experience                  18               ...
4. Feature Fragmentation                                           19   Feature Fragmentation              http://meetup.c...
Approaches to Mobile   Development                                   20      http://meetup.com/technext
Types of Mobile App Dev1. Native Mobile Apps2. Cross Platform Mobile Apps3. Hybrid partly Native partly Cross Platform    ...
Native Mobile Apps        When To                                 When Not To• High Performance Apps              • Perfor...
Cross Platform Mobile Apps         When To                                When Not To• Performance is not the             ...
Cross Platform Mobile Apps          When To                                    When Not To• Time to market is critical• Sa...
Hybrid Mobile Apps         When To                                     Why To• Fairly Simple UI             • Some parts o...
Cross Platform Mobile App      Development                                      26         http://meetup.com/technext
Cross Platform Strategies                                                           Common Source                         ...
Common Platform Approach                                      28         http://meetup.com/technext
Modern BrowsersAll new Smart Phones come with modern browsers, which have bettersupport for HTML5/CSS3 specsMobile OS     ...
WebViewsAll of these smart phones supports using these modernbrowsers as embedded views (aka WebViews)                    ...
JavaScript to native and backAll these browser engine (most common being webkit) supportJavascript to talk to native code ...
Hybrid ApplicationsHTML/Javascript application loads Google Maps and talks to thenative code to gain access to GPS locatio...
Over all Architecture                   HTML5/CSS3 Application         UI Framework e.g                                   ...
Possibilities• Limitless Possibilities• Expose Camera, Accelerometer, GPS, any of the phones  sensors to javascript• Inste...
Development• HTML/CSS Application uses Common API exposing device  features                                               ...
Development• Sample code                                             36                http://meetup.com/technext
Mapping to Native                                  37     http://meetup.com/technext
Over all Architecture                   Javascript Based Application          Titanium UI API              Titanium Phone ...
Development• Two API Sets  • One for UI * (Specific to Titanium Mobile)     • Create Windows     • Create Dialogs     • ……...
DevelopmentUI API Set                                          40             http://meetup.com/technext
DevelopmentUI API Set                                          41             http://meetup.com/technext
Issues• Common API set across platforms is always minimum  • E.g IPhone as a widget, which Android not have• Fragmentation...
Mobile App Dev Frameworks           Common Platform                           Mapping to Native     • PhoneGap            ...
Compare Screens (IPhone)    PhoneGap                          Titanium Mobile                                             ...
Compare Screens (Android)    PhoneGap                          Titanium Mobile                                            ...
46http://meetup.com/technext
PhoneGap• Only platform to support 6 Platforms                                                     47                     ...
PhoneGap• Standards based and extended                                                   48                      http://me...
PhoneGap Prerequistes• Need to be acquainted with Android, IOS, BlackBerry, WebOS• Need to be expert at HTML/Javascript or...
Demo Screens - IPhone                                        50           http://meetup.com/technext
Demo Screens - Android                                        51           http://meetup.com/technext
PhoneGap Features                                       52          http://meetup.com/technext
Challenges and Advantages• HTML based UI is the biggest Challenge as well as Advantage• Same UI can be used for Web and Mo...
Code Walkthrough - PhoneGap                                       54          http://meetup.com/technext
Getting Started PhoneGapStep 1: Create Android Eclipse Project                                                            ...
Getting Started PhoneGapStep 2: Add Phone Gap Java Library                                                                ...
Getting Started PhoneGapStep 3: Add Phone Gap Javascript and with other web app files                                     ...
Getting Started PhoneGapStep 4: Modify Main Activity class                                                                ...
Getting Started PhoneGapStep 5: Extend DriodGap instead of Activity                                                       ...
Getting Started PhoneGapStep 6: Write Javascript Code to create UI &use PhoneGap API                                      ...
61http://meetup.com/technext
PhoneGap on XCode                                  62     http://meetup.com/technext
63http://meetup.com/technext
jQueryMobile UI Development                                       64          http://meetup.com/technext
jQuery Declarative UI<!-- Main Page --> <div data-role="page" id="home">  <!-- Header of Main Page -->  <div data-role="he...
jQuery Declarative UI                                         66            http://meetup.com/technext
Extending PhoneGap to open more of underlying system                                      67         http://meetup.com/tec...
Phone Gap Extension                                                  Javascript                                           ...
Mobile                       69http://meetup.com/technext
• Appcelerator Titanium SDK                 • Appcelerator Titanium SDK• Titanium Module SDK                       • Titan...
Titanium Mobile            Currently supports only Android and            IPhone platforms.                               ...
Titanium Mobile                   Titanium JavaScript                                                           Interprete...
Titanium Architecture                                        73           http://meetup.com/technext
Titanium Prerequistes• Need to be acquainted with Android, IOS programming• Need to know JavaScript• Use Titanium Mobile I...
Demo Screens - IPhone                                        75           http://meetup.com/technext
Demo Screens - Android                                        76           http://meetup.com/technext
Challenges and Advantages• Being Native is the biggest strength• Limited cross platform ui api is a weakness• Platform spe...
Code Walkthrough – Titanium          Mobile                                       78          http://meetup.com/technext
Titanium Developer• IDE for Titanium Mobile and Desktop• Allows Creating Titanium Project• Allows building Android and IPh...
http://meetup.com/technext
http://meetup.com/technext
Directory Structure                                         82            http://meetup.com/technext
App.js (entry point)var tabGroup = Titanium.UI.createTabGroup();var win1 = Titanium.UI.createWindow({ title: Search, url: ...
search.js (building UI)var window = Titanium.UI.currentWindow;var search = Titanium.UI.createSearchBar({height:43,    top:...
search.js (Ajax Call)var xhr = Titanium.Network.createHTTPClient();xhr.onload = function(){  actInd.hide();  var doc = xhr...
search.js (Event handling)//send ajax request to fetch altrnatives for searchTextfunction searchAlternatives(searchText){x...
Native Mobile App  Development                                  87     http://meetup.com/technext
Native App Development• Basically you need to hire experts who can  •   Build Android, IOS, BB, BlackBerry and Windows mob...
Hybrid Mobile App  Development                                  89     http://meetup.com/technext
Hybrid App Development• Have Web Developers for Common UI• Have native code experts for heavy weight lifting• Use framewor...
ShareFile Story• as                                         91            http://meetup.com/technext
Comparison        Titanium Mobile                                  PhoneGap•   Android and IPhone                    • 6 P...
Conclusion• Webkit is the next Virtual Machine.• Maybe Going where Java could not go• HTML 5, CSS 3 and Javascript is futu...
References• Phone Gap Documentation• Titanium Mobile Documentation• ShareFile Story                                       ...
Upcoming SlideShare
Loading in...5
×

Cross platform-mobile-applications-final

3,211

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,211
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
84
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cross platform-mobile-applications-final

  1. 1. Cross PlatformMobile ApplicationsBy Rohit GhatolContact me –rohitsghatol@gmail.com http://meetup.com/technext
  2. 2. IntroductionRohit Ghatol• Project Manager @ Synerzip• Associate Architect @ QuickOffice Inc• GTUG Manager & Tech Next Founder• Certified Scrum Master• Corporate Trainer (Agile and Technical)• Was part of OpenSocial at Google 2 http://meetup.com/technext
  3. 3. Topics• Overview• Understanding Mobile Apps• Cross Platform Mobile App Development • Pure HTML/JavaScript – PhoneGap • Interpreted JavaScript – Titanium Mobile• Native Mobile App Development• Hybrid Mobile App Development• Comparison between PhoneGap Vs Titanium• Conclusion• Q&A 3 http://meetup.com/technext
  4. 4. OverviewThe process of developing Applications for various mobileplatform using common source code with little or no change tothe common source.This presentation focuses on Comparing two frameworks eachtaking a different approach to solve the above problem.We will Compare PhoneGap Vs Titanium . 4 http://meetup.com/technext
  5. 5. Understanding Mobile Apps 5 http://meetup.com/technext
  6. 6. Reaching Mobile Users 6 http://meetup.com/technext
  7. 7. 1. Mobile Features Mostly Feature Sub Set Complete Feature Set 7 http://meetup.com/technext
  8. 8. 2. Tablet Features Almost Complete Complete Feature Set Feature Set 8 http://meetup.com/technext
  9. 9. 3. User InteractionTouch based Accelerometer Traditional Compass 9 http://meetup.com/technext
  10. 10. e.g Layar Application 10 http://meetup.com/technext
  11. 11. 4. Location aware Can be Location Aware but approximateLocation Aware and 11highly accurate http://meetup.com/technext
  12. 12. 5. Sensors Handy Camera and Voice Recording Upcoming NFC (Near Field Communication) 12 turning phone into Credit Card, Access Card, Business Card Exchanger http://meetup.com/technext
  13. 13. e.g Shopping ApplicationsScan a product’s barcode to know If not, then navigate to a store 13if it has the lowest price. which has the lowest price http://meetup.com/technext
  14. 14. 6. Push Notifications Push Notification Notifying the User proactively 14 http://meetup.com/technext
  15. 15. Challenges in building Mobile Applications 15 http://meetup.com/technext
  16. 16. 1. OS Fragmentation Windows 7 Fragmentation 16 http://meetup.com/technext
  17. 17. 2. Multiple Teams/Product Windows 7 Multiple Teams/Products 17 http://meetup.com/technext
  18. 18. 3. Uniform User Experience Windows 7 Uniform User Experience 18 http://meetup.com/technext
  19. 19. 4. Feature Fragmentation 19 Feature Fragmentation http://meetup.com/technext
  20. 20. Approaches to Mobile Development 20 http://meetup.com/technext
  21. 21. Types of Mobile App Dev1. Native Mobile Apps2. Cross Platform Mobile Apps3. Hybrid partly Native partly Cross Platform 21 http://meetup.com/technext
  22. 22. Native Mobile Apps When To When Not To• High Performance Apps • Performance is not the main criteria• Heavy on OS and Device • More or less Replicates Features Web Apps with few device feature• Complex N/W comm. • Standard Restful• Canvas based Apps • Widget based apps• Only Few Platforms • Many Platforms 22 http://meetup.com/technext
  23. 23. Cross Platform Mobile Apps When To When Not To• Performance is not the • High Performance Apps main criteria• More or less Replicates • Heavy on OS and Device Web Apps with few device Features feature • Complex N/W comm.• Standard Restful• Widget based apps • Canvas based Apps• Many Platforms • Only Few Platforms 23 http://meetup.com/technext
  24. 24. Cross Platform Mobile Apps When To When Not To• Time to market is critical• Saving Cost is critical 24 http://meetup.com/technext
  25. 25. Hybrid Mobile Apps When To Why To• Fairly Simple UI • Some parts of app are common • Rest parts are different• Complex Backend • Use Cross Platform to develop common part• Quite few platforms • Use Native to develop the weight lifting parts• E.g ShareFile• Recommended way - PhoneGap Plugin 25 http://meetup.com/technext
  26. 26. Cross Platform Mobile App Development 26 http://meetup.com/technext
  27. 27. Cross Platform Strategies Common Source Cross Platform Source Code Common Platform Mapping to Native WEB APPLICATION Bridge - JavaScript – Java – Objective C UI Platform APIs OS – Android / iPhone JavaScript – Java Bridge Mapping to Native OS – Android / iPhone Titanium Mobile PhoneGap 27 http://meetup.com/technext
  28. 28. Common Platform Approach 28 http://meetup.com/technext
  29. 29. Modern BrowsersAll new Smart Phones come with modern browsers, which have bettersupport for HTML5/CSS3 specsMobile OS BrowserAndroid Webkit basediPhone Webkit basedBlackBerry 6.0 + Webkit basedWindow Phone 7 IE 7 based *WebOS Webkit basedNokia Webkit based 29 http://meetup.com/technext
  30. 30. WebViewsAll of these smart phones supports using these modernbrowsers as embedded views (aka WebViews) 30 http://meetup.com/technext
  31. 31. JavaScript to native and backAll these browser engine (most common being webkit) supportJavascript to talk to native code and back HTML/Javascript Native Code (Java/C++/ObjC) JSON packets 31 http://meetup.com/technext
  32. 32. Hybrid ApplicationsHTML/Javascript application loads Google Maps and talks to thenative code to gain access to GPS location HTML/Javascript Native Code (Java/C++/ObjC) GPS Location 32 http://meetup.com/technext
  33. 33. Over all Architecture HTML5/CSS3 Application UI Framework e.g PhoneGap API jQueryMobile Phone Gap Bridge Camera GPS SQLite SQLite Accelerom Compass etc File System eter 33 http://meetup.com/technext
  34. 34. Possibilities• Limitless Possibilities• Expose Camera, Accelerometer, GPS, any of the phones sensors to javascript• Instead of just building Browsed Based applications augment with more phone features 34 http://meetup.com/technext
  35. 35. Development• HTML/CSS Application uses Common API exposing device features 35 http://meetup.com/technext
  36. 36. Development• Sample code 36 http://meetup.com/technext
  37. 37. Mapping to Native 37 http://meetup.com/technext
  38. 38. Over all Architecture Javascript Based Application Titanium UI API Titanium Phone API Titanium Framework Window Dialog SQLite SQLite Accelerom Compass etc File System eter 38 http://meetup.com/technext
  39. 39. Development• Two API Sets • One for UI * (Specific to Titanium Mobile) • Create Windows • Create Dialogs • ……. • One for Phone Features • Same as PhoneGap • Access Camera • Access GPS • …… 39 http://meetup.com/technext
  40. 40. DevelopmentUI API Set 40 http://meetup.com/technext
  41. 41. DevelopmentUI API Set 41 http://meetup.com/technext
  42. 42. Issues• Common API set across platforms is always minimum • E.g IPhone as a widget, which Android not have• Fragmentation of the API itself. • What is platform specific and not part of Common API comes in Platform specific api? 42 http://meetup.com/technext
  43. 43. Mobile App Dev Frameworks Common Platform Mapping to Native • PhoneGap • Titanium Mobile* Rhodes Mobile is another promising framework, but out of scope for today’s 43discussion http://meetup.com/technext
  44. 44. Compare Screens (IPhone) PhoneGap Titanium Mobile 44 http://meetup.com/technext
  45. 45. Compare Screens (Android) PhoneGap Titanium Mobile 45 http://meetup.com/technext
  46. 46. 46http://meetup.com/technext
  47. 47. PhoneGap• Only platform to support 6 Platforms 47 http://meetup.com/technext
  48. 48. PhoneGap• Standards based and extended 48 http://meetup.com/technext
  49. 49. PhoneGap Prerequistes• Need to be acquainted with Android, IOS, BlackBerry, WebOS• Need to be expert at HTML/Javascript or framework like GWT• Need to be acquainted with JavaScript libraries like • Jquery • script.aculo.us • Prototype • Etc• Or Ajax framework like GWT• Need different project for each platform, inject PhoneGap code in each project• PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone 49 http://meetup.com/technext
  50. 50. Demo Screens - IPhone 50 http://meetup.com/technext
  51. 51. Demo Screens - Android 51 http://meetup.com/technext
  52. 52. PhoneGap Features 52 http://meetup.com/technext
  53. 53. Challenges and Advantages• HTML based UI is the biggest Challenge as well as Advantage• Same UI can be used for Web and Mobile and even Desktop• Promising Framework • GWT – Used by Spring Roo for Enterprise Application Development • jQueryMobile – Based on legendary Jquery and now features • Multipage Template • Page Slide Transitions • Dialogs • Toolbars • Forms 53 • Lists http://meetup.com/technext
  54. 54. Code Walkthrough - PhoneGap 54 http://meetup.com/technext
  55. 55. Getting Started PhoneGapStep 1: Create Android Eclipse Project 55 http://meetup.com/technext
  56. 56. Getting Started PhoneGapStep 2: Add Phone Gap Java Library 56 http://meetup.com/technext
  57. 57. Getting Started PhoneGapStep 3: Add Phone Gap Javascript and with other web app files 57 http://meetup.com/technext
  58. 58. Getting Started PhoneGapStep 4: Modify Main Activity class 58 http://meetup.com/technext
  59. 59. Getting Started PhoneGapStep 5: Extend DriodGap instead of Activity 59 http://meetup.com/technext
  60. 60. Getting Started PhoneGapStep 6: Write Javascript Code to create UI &use PhoneGap API 60 http://meetup.com/technext
  61. 61. 61http://meetup.com/technext
  62. 62. PhoneGap on XCode 62 http://meetup.com/technext
  63. 63. 63http://meetup.com/technext
  64. 64. jQueryMobile UI Development 64 http://meetup.com/technext
  65. 65. jQuery Declarative UI<!-- Main Page --> <div data-role="page" id="home"> <!-- Header of Main Page --> <div data-role="header"> <h1>AlternativeTo Home</h1> </div> <!-- Content of Main Page --> <div data-role="content"> <p>Find Alternatives To Your favourite Softwares </p> <p><a href="#search" data-role="button">Search Alternatives</a></p> <p><a href="#recent" data-role="button">Recent Alternatives</a></p> </div> 65 </div> http://meetup.com/technext
  66. 66. jQuery Declarative UI 66 http://meetup.com/technext
  67. 67. Extending PhoneGap to open more of underlying system 67 http://meetup.com/technext
  68. 68. Phone Gap Extension Javascript Code Android Code• References - http://wiki.phonegap.com/w/page/36752779/PhoneGap- 68 Plugins• Author – Rohit Ghatol http://meetup.com/technext
  69. 69. Mobile 69http://meetup.com/technext
  70. 70. • Appcelerator Titanium SDK • Appcelerator Titanium SDK• Titanium Module SDK • Titanium Module SDK Paid Modules • Commerce Modules • Communication Modules • Analytics Module • Media Modules 70 http://meetup.com/technext
  71. 71. Titanium Mobile Currently supports only Android and IPhone platforms. 71 http://meetup.com/technext
  72. 72. Titanium Mobile Titanium JavaScript Interpreted By Wekit Mozilla Rhino JavascriptCore 72 IPhone Android http://meetup.com/technext
  73. 73. Titanium Architecture 73 http://meetup.com/technext
  74. 74. Titanium Prerequistes• Need to be acquainted with Android, IOS programming• Need to know JavaScript• Use Titanium Mobile IDE to configure projects and use Text IDE to edit the code (unlike PhoneGap, there is only one project for all platforms) 74 http://meetup.com/technext
  75. 75. Demo Screens - IPhone 75 http://meetup.com/technext
  76. 76. Demo Screens - Android 76 http://meetup.com/technext
  77. 77. Challenges and Advantages• Being Native is the biggest strength• Limited cross platform ui api is a weakness• Platform specific api leads to fragmentation within code 77 http://meetup.com/technext
  78. 78. Code Walkthrough – Titanium Mobile 78 http://meetup.com/technext
  79. 79. Titanium Developer• IDE for Titanium Mobile and Desktop• Allows Creating Titanium Project• Allows building Android and IPhone Applications• Does not provide any Source code Editor 79 http://meetup.com/technext
  80. 80. http://meetup.com/technext
  81. 81. http://meetup.com/technext
  82. 82. Directory Structure 82 http://meetup.com/technext
  83. 83. App.js (entry point)var tabGroup = Titanium.UI.createTabGroup();var win1 = Titanium.UI.createWindow({ title: Search, url: search.js});var tab1 = Titanium.UI.createTab({ window:win1, title:Search Alternatives’});tabGroup.addTab(tab1);tabGroup.addTab(tab2); 83tabGroup.open(); http://meetup.com/technext
  84. 84. search.js (building UI)var window = Titanium.UI.currentWindow;var search = Titanium.UI.createSearchBar({height:43, top:0});var actInd = Titanium.UI.createActivityIndicator({ height:50,});var tableview = Titanium.UI.createTableView({ top:50});window.add(search); 84window.add(tableview); http://meetup.com/technext
  85. 85. search.js (Ajax Call)var xhr = Titanium.Network.createHTTPClient();xhr.onload = function(){ actInd.hide(); var doc = xhr.responseText; var json = eval((+doc+)); var data = []; //…. Load data in data // provide the data to table to populate the table tableview.setData(data); 85}; http://meetup.com/technext
  86. 86. search.js (Event handling)//send ajax request to fetch altrnatives for searchTextfunction searchAlternatives(searchText){xhr.open(GET,http://api.alternativeto.net/software/+searchText+/?count=15);xhr.send();}//start search when user hits enter on search boxsearch.addEventListener(return, function(e){ actInd.show(); 86 searchAlternatives(e.value);}); http://meetup.com/technext
  87. 87. Native Mobile App Development 87 http://meetup.com/technext
  88. 88. Native App Development• Basically you need to hire experts who can • Build Android, IOS, BB, BlackBerry and Windows mobile apps • Devs should have experience to deploy apps on market • Devs should have experience on various devices • QA should know how to automate things on devices/emulator• Plan for risks if this is your companies first Mobile App deployment 88 http://meetup.com/technext
  89. 89. Hybrid Mobile App Development 89 http://meetup.com/technext
  90. 90. Hybrid App Development• Have Web Developers for Common UI• Have native code experts for heavy weight lifting• Use frameworks like PhoneGap Plugin Development framework to glue the above two pieces• Measure at every milestone to keep track of effect of changes• Use Automation to regress every layer 90 http://meetup.com/technext
  91. 91. ShareFile Story• as 91 http://meetup.com/technext
  92. 92. Comparison Titanium Mobile PhoneGap• Android and IPhone • 6 Platforms• Gives out native app • Gives out a mobile web app• API is more proprietary • API is less proprietary• UI has Limitations • UI possibilities are unlimited• UI will be fast• Much better User Experience • UI could be slow • User Experience will get• Portal Code can not be reused better with enhancements • Portal Code can be reused• Extensions are possible• Limited support for • Extensions are possible and HTML/Javascript 92 easy to implement More will come out of discussion, comments are welcome http://meetup.com/technext
  93. 93. Conclusion• Webkit is the next Virtual Machine.• Maybe Going where Java could not go• HTML 5, CSS 3 and Javascript is future,but not ready just yet• HTML 5, CSS3 and Javascript to lessen the fragmentation• HTML 5 will compete with native components 93 http://meetup.com/technext
  94. 94. References• Phone Gap Documentation• Titanium Mobile Documentation• ShareFile Story 94 http://meetup.com/technext
  1. A particular slide catching your eye?

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

×