Trip advsiorhybridpresentation


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Should mention this is not intended to be product placement but more of a case study
  • Should mention I don’t like the ter HTML5… what happened to web 2.0? Are we on web3.0 now?
  • Demo time!
  • Trip advsiorhybridpresentation

    1. 1. Hybrid App Development<br />MoMo Mobile Camp, February 19th, 2011<br />Stephen Bourdeau<br />Mobile Tech Lead<br />TripAdvisor, LLC<br />
    2. 2. Who is TripAdvisor? And what’s with the owl?<br /><ul><li>TripAdvisor is the world’s most popular & largest travel community with..
    3. 3. 40 million unique monthly visitors
    4. 4. 20 million registered members
    5. 5. 40 million reviews and opinions
    6. 6. Present in 18 countries and 26 languages
    7. 7. TripAdvisor Mobile Site and Apps
    8. 8. 5 million unique monthly visitors
    9. 9. We hit 1 million unique monthly visitors the month after we launched
    10. 10. Same global coverage
    11. 11. Native apps on a variety of platforms
    12. 12. iOS (iPad app reached #1 in more than 50 countries)
    13. 13. Android
    14. 14. Nokia Ovi
    15. 15. HP/Palm webOS</li></ul>… and our mobile site only launched 14 months ago (12/7/2009)!<br />How did we get there so fast?<br />
    16. 16. Types of Mobile Apps<br /><ul><li>Mobile web app
    17. 17. Built using HTML, CSS, JavaScript (maybe some tool kits)
    18. 18. Pros
    19. 19. Quick to launch and update
    20. 20. Easier to track metrics
    21. 21. Cons
    22. 22. Does not have access to low level features such as camera, accelerometer, etc.
    23. 23. Native app
    24. 24. Built using a variety of languages such as Objective-C (iOS), Java (Android), J2ME (BB), etc.
    25. 25. Pros
    26. 26. Has access to lower level features
    27. 27. Cons
    28. 28. Higher development cost across multiple platforms
    29. 29. In some cases (iOS) slower launch/update times due to approval process
    30. 30. Tougher to track metrics</li></li></ul><li>A dark corner…<br /><ul><li>Then there is a dark corner where native apps are actually web apps in disguise
    31. 31. HP/Palm webOS apps are built with HTML, CSS, and JS just like a web app but have access to native functionality
    32. 32. Nokia Ovi does the same thing
    33. 33. Provides access to low level features via JS</li></ul>Hmmm… that sounds like a good idea<br />
    34. 34. What is a Hybrid app?<br /><ul><li>Hybrid Apps combine the best of both worlds
    35. 35. Develop the basic building blocks of the app in HTML, CSS, JS and display through a web view
    36. 36. Build features leveraging those low level APIs natively
    37. 37. Quick(er) to launch & update most features
    38. 38. Easy(er) to track metrics
    39. 39. Wrap them up together and shake well before drinking</li></li></ul><li>Mobile Frameworks<br /><ul><li>There are many frameworks out there to help ease the cross-platform pain of native development
    40. 40. PhoneGap
    41. 41. RhoMobile
    42. 42. Appcelerator
    43. 43. Etc…
    44. 44. So should you use them?
    45. 45. They serve a purpose, but with limitations (still maturing, not perfect)
    46. 46. Introduce another layer of abstraction (good and bad)
    47. 47. Hybrid apps can be considered as an alternative cross-platform solution</li></li></ul><li>HTML5 vs Native apps<br /><ul><li>There is a big debate over what the future holds for mobile
    48. 48. Some think that native apps are here to stay
    49. 49. MG Siegler, TechCrunch -</li></ul>“…the fact that very few [developers], if any, choose to go HTML5-only is telling…” - Siegler<br /><ul><li>Some think that HTML5 is the way to go
    50. 50. John Ciancutti, VP of Personalization Technology, Netflix - Why We Choose HTML5 for User Experiences on Devices</li></ul>“Our customers don’t have to go through a manual process to install new software every time we make a change, it ‘just happens.’” - Ciancutti<br />
    51. 51. Hybrid App Strategy<br /><ul><li>With a hybrid app you are free to implement whatever works best
    52. 52. Choose the right tool for the job!
    53. 53. Use simple HTML, CSS, JS to build the simple stuff
    54. 54. Use HTML5 to build more complicated features and push them out cross-platform
    55. 55. Use native code for the most complicated/low level features </li></ul>Photo viewer built with DHTML/JS<br />Entire page built with HTML & CSS<br />Photo upload built natively<br />
    56. 56. Photo viewer & Photo upload<br />
    57. 57. In the end…<br /><ul><li>You want to spend your time building cool stuff, not reinventing the wheel for each platform (hello “Owl Cam”)</li></li></ul><li>How do we know where we are?<br /><ul><li>Is the web site page view from a mobile web browser or app?
    58. 58. Android – Allows you to change your user agent
    59. 59. iOS – Does not allow you to change your user agent
    60. 60. But wait! In iOS the webView does have a different user agent than mobile safari.
    61. 61. Doh… what if another hybrid app looks at your web page?
    62. 62. Best solution we have found for iOS? A cookie (who doesn’t love a cookie?)
    63. 63. Set the cookie on the web view every time the app opens
    64. 64. Then there is Windows Phone 7 – doesn’t allow you to set a cookie natively on the web view
    65. 65. But we can set it server side…</li></li></ul><li>Hybrid Technique #1: URL Modification<br /><ul><li>If you know you are serving a web page inside your hybrid app you can send modified URLs to perform native actions
    66. 66. Facebook does (did?) this in their iOS API with a return to their own fake protocol: fb://do-something-useful</li></li></ul><li>Hybrid Technique #2: URL Interception<br /><ul><li>From within your native app most web views allow you to listen for a change to the URL
    67. 67. iOS – UIWebView – shouldStartLoadWithRequest:
    68. 68. Android – WebViewClient - shouldOverrideUrlLoading()
    69. 69. Example: location services on webOS
    70. 70. Not currently supported by the webOS browser
    71. 71. Instead we navigate the web view to a URL with dummy values which gets intercepted by the native wrapper</li></ul><br />turns into<br /><br />
    72. 72. Hybrid Technique #2: URL Interception (contd.)<br /><ul><li>As an added benefit you can include a link on both the web page and native app that gets intercepted.
    73. 73. Remember that link to launch a native photo upload? If viewed from a mobile browser it gives a promo to download the app… have your cake and drive app downloads too!</li></li></ul><li>Hybrid Technique #3: The JavaScript drop<br /><ul><li>Some platforms allow you to execute JavaScript against the web view
    74. 74. Place data in the page you return from the server in JavaScript variables
    75. 75. On page load pull out the data with the native wrapper and put it to good use</li></ul>Pin data gets pulled out and rendered natively<br />WebView loads and contains location pin data in a JS variable<br />
    76. 76. Questions?<br />Stephen Bourdeau<br />Mobile Tech Lead<br />TripAdvisor, LLC<br />
    77. 77. Shameless “We are hiring!” plug<br /><ul><li>Hiring like crazy!
    78. 78. Lots of interesting mobile projects in the pipeline
    79. 79. Lots of interesting social projects in the pipeline (what could you do with 1.2 billion geographic place pins from our Facebook users?)</li>