Cross platform-mobile-applications

Uploaded on

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

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?

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Nice slide, a good start for cross platform topic
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


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