Cross Platform Mobile Applications<br />By Rohit Ghatol<br />Contact me – <br />rohit.ghatol@synerzip.com<br />rohitsghato...
Introduction<br />Rohit Ghatol<br />Project Manager @ Synerzip<br />Associate Architect @ QuickOffice Inc<br />GTUG Manage...
Topics<br />Mobile Trends<br />Understanding Mobile Apps<br />Cross Platform Mobile App Development<br />Pure HTML/JavaScr...
Mobile Trends<br />
Source  - http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718<br />
Frequent Users<br />Rare Users<br />Source  - http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-P...
Local Business Search<br />Source  - http://www.marketingprofs.com/charts/2010/3857/local-business-search-via-mobile-up-14...
Mobile Trends<br />Mobile Trend Perception<br />
Understanding Mobile Apps<br />
Reaching Mobile Users<br />
Characteristics<br />Complete Feature Set<br />Mostly Feature Sub Set<br />
Characteristics<br />Complete Feature Set<br />Almost Complete<br />Feature Set<br />
Characteristics<br />Touch based<br />Accelerometer<br />Traditional <br />Compass<br />
Layar Application<br />
Characteristics<br />Can be Location Aware but approximate<br />Location Aware and highly accurate<br />
Characteristics<br />Handy Camera and Voice Recording<br />Upcoming NFC (Near Field Communication) turning phone into Cred...
Shopping Applications<br />
Characteristics<br />Push Notification<br />Notifying the User proactively<br />
Challenges in building Mobile Applications<br />
Challenges – Mobile App Dev<br />Windows 7<br />Fragmentation<br />
Challenges – Mobile App Dev<br />Windows 7<br />Multiple Teams/Products<br />
Challenges – Mobile App Dev<br />Windows 7<br />Uniform User Experience<br />
Challenges – Mobile App Dev<br />Feature Fragmentation<br />
Types of Mobile App Dev<br />Native Mobile Apps<br />Cross Platform Mobile Apps<br />Hybrid partly Native partly Cross Pla...
Native Mobile Apps<br />When To<br />Long Running Services<br />Complex N/W comm.<br />Canvas based Apps<br />Only Few Pla...
Cross Platform Mobile Apps<br />When To<br />Replica Web Apps<br />Standard Restful<br />Widget based apps<br />Many Platf...
Hybrid Mobile Apps<br />When To<br />Why To<br />Fairly Simple UI<br />Complex Backend<br />Quite few platforms<br />E.gSh...
Rest parts are different
Use Cross Platform to develop common part
Use Native to develop the weight lifting parts</li></li></ul><li>Cross Platform Mobile App Development<br />
Cross Platform Strategies<br />Cross Platform <br />Source Code<br />Common Platform<br />e.gWebKit<br />Mapping to Native...
WebKit Platform<br />All Mobile Platforms have something common that is a Modern Browser<br />All these browsers are based...
Mapping to Native Code<br />Say Application is written in JavaScript<br />The JavaScript code is running in Interpreter<br...
Mobile App Dev Frameworks<br />Common Platform<br />PhoneGap<br />Titanium Desktop<br />Mapping to Native<br />Titanium Mo...
PhoneGap<br />
PhoneGap<br />Only platform to support 6 Platforms<br />
PhoneGap<br />Standards based and extended<br />
PhoneGap Features<br />
PhoneGapPrerequistes<br />Need to be acquainted with Android, IOS, BlackBerry, WebOS<br />Need to be expert at HTML/Javasc...
Demo Screens - IPhone<br />
Demo Screens - Android<br />
Digging Deeper (Android)<br />Instead of extending a Activity, we extend DroidGap<br />DroidGap internally uses a WebView ...
Digging Deeper <br />
Bootstrapping phonegap<br /><html><br />     <head><br />          <title>Phone Gap</title><br />          <script type="t...
Bootstrapping phonegap<br />function init() {<br />document.addEventListener('deviceready’,loadMap,false);<br />}<br />
Bootstrapping phonegap<br />function loadMap() {<br />varsuccessCallback= function(position) {                         <br...
PhoneGap Walkthrough<br />Lets see a Live Demo<br />
Phone Gap Extension<br />Adding new apis to PhoneGap is Simple<br />Say Dropbox like Sync is exposed via javascriptapi<br ...
Challenges and Advantages<br />HTML based UI is the biggest Challenge as well as Advantage<br />Same UI can be used for We...
Titanium Mobile<br />
Titanium Mobile<br />
Titanium Mobile<br />Titanium JavaScript<br />Interpreted By<br />WekitJavascriptCore<br />Mozilla Rhino<br />IPhone<br />...
Titanium Architecture<br />
Titanium Prerequistes<br />Need to be acquainted with Android, IOS programming<br />Need to know JavaScript<br />Use Titan...
Demo Screens - IPhone<br />
Demo Screens - Android<br />
Directory Structure<br />
App.js (entry point)<br />vartabGroup = Titanium.UI.createTabGroup();<br />var win1 = Titanium.UI.createWindow({<br />titl...
search.js (building UI)<br />var window = Titanium.UI.currentWindow;<br />varsearch = Titanium.UI.createSearchBar({<br />h...
search.js (Ajax Call)<br />varxhr = Titanium.Network.createHTTPClient();<br />xhr.onload = function()<br />{<br />actInd.h...
search.js (Event handling)<br />//send ajax request to fetch altrnatives for searchText<br />function searchAlternatives(s...
Titanium Walkthrough<br />Lets see a Live Demo<br />
Challenges and Advantages<br />Being Native is the biggest strength<br />Limited cross platform api is a weakness<br />Pla...
Native Mobile App Development<br />
Native App Development<br />Basically you need to hire experts who can<br />Build Android, IOS, BB, BlackBerry and Windows...
Hybrid Mobile App Development<br />
Hybrid App Development<br />Have Web Developers for Common UI<br />Have native code experts for heavy weight lifting<br />...
ShareFile Story<br />as<br />
Comparison<br />Titanium<br />Gives out native app<br />API is more proprietary<br />UI has Limitations<br />UI will be fa...
Conclusion<br />Webkit is the next Virtual Machine. <br />Maybe Going where Java could not go<br />HTML 5, CSS 3 and Javas...
Cross Desktop App Dev<br />Following are options worth considering<br />Nokia QT (webkit based)<br />Titanium Desktop (web...
Building your own Framework<br />Common HTML/JavaScript Code<br />WebKit<br />WebKit<br />WebKit<br />WebKit<br />Obj c<br...
Upcoming SlideShare
Loading in...5
×

Cross platform-mobile-applications

5,625

Published on

Talks about nature of mobile application and their comparison with traditional web applications

Talks on various ways of developing Mobile Application and when and why to choose on of them
1. Native
2. Cross Platform
3. Hybrid


Explains strategies of Cross Platform
1. Common Platform (ie, webkit phonegap)
2. Mapping Common Language to Native (i,e Titanium)

What is Hybrid approach?

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • Nice slide, a good start for cross platform topic
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,625
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
300
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Cross platform-mobile-applications

  1. 1. Cross Platform Mobile Applications<br />By Rohit Ghatol<br />Contact me – <br />rohit.ghatol@synerzip.com<br />rohitsghatol@gmail.com<br />
  2. 2. Introduction<br />Rohit Ghatol<br />Project Manager @ Synerzip<br />Associate Architect @ QuickOffice Inc<br />GTUG Manager<br />Certified Scrum Master<br />Corporate Trainer (Agile and Technical)<br />Was part of OpenSocial at Google<br />
  3. 3. Topics<br />Mobile Trends<br />Understanding Mobile Apps<br />Cross Platform Mobile App Development<br />Pure HTML/JavaScript – PhoneGap<br />Interpreted JavaScript– Titanium<br />Native Mobile App Development<br />Hybrid Mobile App Development<br />Building your own Cross Platform Framework<br />
  4. 4. Mobile Trends<br />
  5. 5. Source - http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718<br />
  6. 6. Frequent Users<br />Rare Users<br />Source - http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718<br />
  7. 7. Local Business Search<br />Source - http://www.marketingprofs.com/charts/2010/3857/local-business-search-via-mobile-up-14<br />
  8. 8. Mobile Trends<br />Mobile Trend Perception<br />
  9. 9. Understanding Mobile Apps<br />
  10. 10. Reaching Mobile Users<br />
  11. 11. Characteristics<br />Complete Feature Set<br />Mostly Feature Sub Set<br />
  12. 12. Characteristics<br />Complete Feature Set<br />Almost Complete<br />Feature Set<br />
  13. 13. Characteristics<br />Touch based<br />Accelerometer<br />Traditional <br />Compass<br />
  14. 14. Layar Application<br />
  15. 15. Characteristics<br />Can be Location Aware but approximate<br />Location Aware and highly accurate<br />
  16. 16. Characteristics<br />Handy Camera and Voice Recording<br />Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger<br />
  17. 17. Shopping Applications<br />
  18. 18. Characteristics<br />Push Notification<br />Notifying the User proactively<br />
  19. 19. Challenges in building Mobile Applications<br />
  20. 20. Challenges – Mobile App Dev<br />Windows 7<br />Fragmentation<br />
  21. 21. Challenges – Mobile App Dev<br />Windows 7<br />Multiple Teams/Products<br />
  22. 22. Challenges – Mobile App Dev<br />Windows 7<br />Uniform User Experience<br />
  23. 23. Challenges – Mobile App Dev<br />Feature Fragmentation<br />
  24. 24. Types of Mobile App Dev<br />Native Mobile Apps<br />Cross Platform Mobile Apps<br />Hybrid partly Native partly Cross Platform<br />
  25. 25. Native Mobile Apps<br />When To<br />Long Running Services<br />Complex N/W comm.<br />Canvas based Apps<br />Only Few Platforms<br />When Not To<br />Replica Web Apps<br />Standard Restful<br />Widget based apps<br />Many Platforms<br />
  26. 26. Cross Platform Mobile Apps<br />When To<br />Replica Web Apps<br />Standard Restful<br />Widget based apps<br />Many Platforms<br />When Not To<br />Long Running Services<br />Complex N/W comm.<br />Canvas based Apps<br />Only Few Platforms<br />
  27. 27. Hybrid Mobile Apps<br />When To<br />Why To<br />Fairly Simple UI<br />Complex Backend<br />Quite few platforms<br />E.gShareFile<br />Recommended method - PhoneGap Plugin<br /><ul><li>Some parts of app are common
  28. 28. Rest parts are different
  29. 29. Use Cross Platform to develop common part
  30. 30. Use Native to develop the weight lifting parts</li></li></ul><li>Cross Platform Mobile App Development<br />
  31. 31. Cross Platform Strategies<br />Cross Platform <br />Source Code<br />Common Platform<br />e.gWebKit<br />Mapping to Native<br />Titanium<br />PhoneGap<br />
  32. 32. WebKit Platform<br />All Mobile Platforms have something common that is a Modern Browser<br />All these browsers are based on WebKit<br />Moreover all these platform support showing embedded browser in Applications (aka WebView)<br />Strange enough all these WebViews provide hooks from javascript to java and vice a versa<br />In short WebView is the new Virtual Machine <br />
  33. 33. Mapping to Native Code<br />Say Application is written in JavaScript<br />The JavaScript code is running in Interpreter<br />The Interpreter internally forwards calls to the native code<br />Limitation being the you can only map to subset of code available on all target platforms. <br />OR you allow for fragmentation in api, like Titanium Mobile does for involving Android services<br />android<br />blackberry<br />ios<br />
  34. 34. Mobile App Dev Frameworks<br />Common Platform<br />PhoneGap<br />Titanium Desktop<br />Mapping to Native<br />Titanium Mobile<br />Rho Mobile<br />
  35. 35. PhoneGap<br />
  36. 36. PhoneGap<br />Only platform to support 6 Platforms<br />
  37. 37. PhoneGap<br />Standards based and extended<br />
  38. 38.
  39. 39. PhoneGap Features<br />
  40. 40. PhoneGapPrerequistes<br />Need to be acquainted with Android, IOS, BlackBerry, WebOS<br />Need to be expert at HTML/Javascript or framework like GWT<br />Need to be acquainted with JavaScript libraries like<br />Jquery<br />script.aculo.us<br />Prototype<br />Etc<br />Or Ajax framework like GWT<br />Use existing IDEs like Eclipse or Xcode, PhoneGap has no IDE<br />
  41. 41. Demo Screens - IPhone<br />
  42. 42. Demo Screens - Android<br />
  43. 43. Digging Deeper (Android)<br />Instead of extending a Activity, we extend DroidGap<br />DroidGap internally uses a WebView to show local/remote HTML/JavaScript/CSS<br />This WebView has hooks to<br />Call Java from JavaScript<br />And Vice a Versa<br />More like building Web 2.0 Applications <br />But also calling some java scripts which allow accessing native mobile resources e.g. Geo, Database, File System, etc<br />
  44. 44. Digging Deeper <br />
  45. 45. Bootstrapping phonegap<br /><html><br />     <head><br />          <title>Phone Gap</title><br />          <script type="text/javascript" src="scripts/phonegap.js"></script><br />       <script>…</script><br />     </head><br />     <body onload=”init();"><br />          <img id="map" /><br />     </body><br /></html><br />
  46. 46. Bootstrapping phonegap<br />function init() {<br />document.addEventListener('deviceready’,loadMap,false);<br />}<br />
  47. 47. Bootstrapping phonegap<br />function loadMap() {<br />varsuccessCallback= function(position) { <br /> var coords = position.coords;<br /> var url = "http://maps.google.com/maps/api/staticmap?center=" <br /> + coords.latitude + "," + coords.longitude ;<br />document.getElementById('map').setAttribute('src',url);<br /> };<br />varfailureCallback = function(e) {<br /> alert('Can't retrieve position.nError: ' + e);<br /> };<br /> //Fetch Coordinate Asynchronously<br />navigator.geolocation.getCurrentPosition(successCallback, <br />failureCallback );<br />} <br />
  48. 48. PhoneGap Walkthrough<br />Lets see a Live Demo<br />
  49. 49. Phone Gap Extension<br />Adding new apis to PhoneGap is Simple<br />Say Dropbox like Sync is exposed via javascriptapi<br />Each Platform to have Dropbox like Sync native code called from javascript<br />References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins<br />Author – Rohit Ghatol<br />
  50. 50. Challenges and Advantages<br />HTML based UI is the biggest Challenge as well as Advantage<br />Same UI can be used for Web and Mobile and even Desktop<br />Promising Framework<br />GWT – Used by Spring Roo for Enterprise Application Development<br />jQueryMobile – Based on legendary Jquery and now features Samples<br />Multipage Template<br />Page Slide Transitions<br />Dialogs<br />Toolbars<br />Forms<br />Lists<br />
  51. 51. Titanium Mobile<br />
  52. 52. Titanium Mobile<br />
  53. 53. Titanium Mobile<br />Titanium JavaScript<br />Interpreted By<br />WekitJavascriptCore<br />Mozilla Rhino<br />IPhone<br />Android<br />
  54. 54. Titanium Architecture<br />
  55. 55. Titanium Prerequistes<br />Need to be acquainted with Android, IOS programming<br />Need to know JavaScript<br />Use Titanium Mobile IDE to configure projects and use Text IDE to edit the code<br />
  56. 56. Demo Screens - IPhone<br />
  57. 57. Demo Screens - Android<br />
  58. 58. Directory Structure<br />
  59. 59. App.js (entry point)<br />vartabGroup = Titanium.UI.createTabGroup();<br />var win1 = Titanium.UI.createWindow({<br />title: 'Search',<br />url: 'search.js'<br />});<br />vartab1 = Titanium.UI.createTab({ <br /> window:win1,<br />title:'SearchAlternatives’<br />});<br />tabGroup.addTab(tab1); <br />tabGroup.addTab(tab2); <br />tabGroup.open();<br />
  60. 60. search.js (building UI)<br />var window = Titanium.UI.currentWindow;<br />varsearch = Titanium.UI.createSearchBar({<br />height:43,<br /> top:0<br />});<br />var actInd = Titanium.UI.createActivityIndicator({<br /> height:50,<br />});<br />vartableview = Titanium.UI.createTableView({<br /> top:50<br />});<br />window.add(search);<br />window.add(tableview);<br />
  61. 61. search.js (Ajax Call)<br />varxhr = Titanium.Network.createHTTPClient();<br />xhr.onload = function()<br />{<br />actInd.hide();<br />vardoc = xhr.responseText;<br />var json = eval('('+doc+')');<br /> var data = [];<br />//…. Load data in data <br /> // provide the data to table to populate the table<br />tableview.setData(data);<br />};<br />
  62. 62. search.js (Event handling)<br />//send ajax request to fetch altrnatives for searchText<br />function searchAlternatives(searchText){<br />xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?count=15');<br />xhr.send();<br />}<br />//start search when user hits enter on search box<br />search.addEventListener('return', function(e)<br />{<br />actInd.show();<br />searchAlternatives(e.value);<br />});<br />
  63. 63. Titanium Walkthrough<br />Lets see a Live Demo<br />
  64. 64. Challenges and Advantages<br />Being Native is the biggest strength<br />Limited cross platform api is a weakness<br />Platform specific api leads to fragmentation within code<br />
  65. 65. Native Mobile App Development<br />
  66. 66. Native App Development<br />Basically you need to hire experts who can<br />Build Android, IOS, BB, BlackBerry and Windows mobile apps<br />Devs should have experience to deploy apps on market<br />Devs should have experience on various devices<br />QA should know how to automate things on devices/emulator<br />Have concrete plans on <br />What is Trial app?<br />How does user upgrade?<br />Use in app billing to have fine grained control<br />Plan for risks if this is your companies first Mobile App deployment<br />
  67. 67. Hybrid Mobile App Development<br />
  68. 68. Hybrid App Development<br />Have Web Developers for Common UI<br />Have native code experts for heavy weight lifting<br />Use frameworks like PhoneGap to glue the above two pieces<br />Measure at every milestone to keep track of effect of changes<br />Use Automation to regress every layer<br />
  69. 69. ShareFile Story<br />as<br />
  70. 70. Comparison<br />Titanium<br />Gives out native app<br />API is more proprietary<br />UI has Limitations<br />UI will be fast <br />Much better User Experience<br />Portal Code can not be reused<br />Extensions are possible<br />Limited support for HTML/Javascript<br />PhoneGap<br />Gives out a mobile web app<br />API is less proprietary<br />UI possibilities are unlimited<br />UI could be slow<br />User Experience will get better with enhancements<br />Portal Code can be reused<br />Extensions are possible and easy to implement<br />More will come out of discussion, comments are welcome<br />
  71. 71. Conclusion<br />Webkit is the next Virtual Machine. <br />Maybe Going where Java could not go<br />HTML 5, CSS 3 and Javascriptis future,but not ready just yet<br />HTML 5, CSS3 and Javascript to lessen the fragmentation<br />HTML 5 will compete with native components<br />
  72. 72. Cross Desktop App Dev<br />Following are options worth considering<br />Nokia QT (webkit based)<br />Titanium Desktop (webkit based)<br />Adobe Air (flash based)<br />Java<br />Many more <br />
  73. 73. Building your own Framework<br />Common HTML/JavaScript Code<br />WebKit<br />WebKit<br />WebKit<br />WebKit<br />Obj c<br />Java<br />C#<br />?<br />IPhone,IPad, Mac<br />Android<br />Windows<br />?<br />
  74. 74. JavaScript to Native Channel<br />Assume a single channel from Javascript to native and back from native to Javascript is present<br />This Single Channel can provide infinite control to the native code. One needs to just add more code to the native end and add new messages for it to be exposed.<br />However, understand that Javascript is single threaded and the callbacks will execute only if there is no javascript running.<br />
  75. 75. Building Proof of Concepts<br />Building Proof of Concepts is straight forward on<br />Android<br />IPad, IPhone, IPod Touch and Mac<br />Even for BlackBerry and WebOSthere is some documentatiion<br />For Windows, Linux and other mobile platforms one can refer to the source code of<br />Titanium Desktop<br />Phone Gap<br />
  1. A particular slide catching your eye?

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

×