Downloaded 27 times
Trip advsiorhybridpresentation
- 1. Hybrid App DevelopmentMoMoMobile Camp, February 19th, 2011Stephen BourdeauMobile Tech LeadTripAdvisor, LLC
- 2. Who is TripAdvisor?And what’s with the owl?TripAdvisor is the world’s most popular & largest travel community with..
- 3. 40 million uniquemonthly visitors
- 4. 20 million registeredmembers
- 5. 40 million reviewsand opinions
- 6. Present in 18countries and 26 languages
- 7. TripAdvisor Mobile Siteand Apps
- 8. 5 million uniquemonthly visitors
- 9. We hit 1million unique monthly visitors the month after we launched
- 10.
- 11. Native apps ona variety of platforms
- 12. iOS (iPad appreached #1 in more than 50 countries)
- 13.
- 14.
- 15. HP/Palm webOS… andour mobile site only launched 14 months ago (12/7/2009)!How did we get there so fast?
- 16. Types of MobileAppsMobile web app
- 17. Built using HTML,CSS, JavaScript (maybe some tool kits)
- 18.
- 19. Quick to launchand update
- 20. Easier to trackmetrics
- 21.
- 22. Does not haveaccess to low level features such as camera, accelerometer, etc.
- 23.
- 24. Built using avariety of languages such as Objective-C (iOS), Java (Android), J2ME (BB), etc.
- 25.
- 26. Has access tolower level features
- 27.
- 28. Higher development costacross multiple platforms
- 29. In some cases(iOS) slower launch/update times due to approval process
- 30. Tougher to trackmetricsA dark corner…Then there is a dark corner where native apps are actually web apps in disguise
- 31. HP/Palm webOS appsare built with HTML, CSS, and JS just like a web app but have access to native functionality
- 32. Nokia Ovi doesthe same thing
- 33. Provides access tolow level features via JSHmmm… that sounds like a good idea
- 34. What is aHybrid app?Hybrid Apps combine the best of both worlds
- 35. Develop the basicbuilding blocks of the app in HTML, CSS, JS and display through a web view
- 36. Build features leveragingthose low level APIs natively
- 37. Quick(er) to launch& update most features
- 38. Easy(er) to trackmetrics
- 39. Wrap them uptogether and shake well before drinkingMobile FrameworksThere are many frameworks out there to help ease the cross-platform pain of native development
- 40.
- 41.
- 42.
- 43.
- 44. So should youuse them?
- 45. They serve apurpose, but with limitations (still maturing, not perfect)
- 46. Introduce another layerof abstraction (good and bad)
- 47. Hybrid apps canbe considered as an alternative cross-platform solutionHTML5 vs Native appsThere is a big debate over what the future holds for mobile
- 48. Some think thatnative apps are here to stay
- 49. MG Siegler, TechCrunch- http://techcrunch.com/2011/02/09/html5-versus-native-apps/“…the fact that very few [developers], if any, choose to go HTML5-only is telling…” - SieglerSome think that HTML5 is the way to go
- 50. John Ciancutti, VPof Personalization Technology, Netflix - Why We Choose HTML5 for User Experiences on Devices“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
- 51. Hybrid App StrategyWitha hybrid app you are free to implement whatever works best
- 52. Choose the righttool for the job!
- 53. Use simple HTML,CSS, JS to build the simple stuff
- 54. Use HTML5 tobuild more complicated features and push them out cross-platform
- 55. Use native codefor the most complicated/low level features Photo viewer built with DHTML/JSEntire page built with HTML & CSSPhoto upload built natively
- 56. Photo viewer &Photo upload
- 57. In the end…Youwant to spend your time building cool stuff, not reinventing the wheel for each platform (hello “Owl Cam”)How do we know where we are?Is the web site page view from a mobile web browser or app?
- 58. Android – Allowsyou to change your user agent
- 59. iOS – Doesnot allow you to change your user agent
- 60. But wait! IniOS the webView does have a different user agent than mobile safari.
- 61. Doh… what ifanother hybrid app looks at your web page?
- 62. Best solution wehave found for iOS? A cookie (who doesn’t love a cookie?)
- 63. Set the cookieon the web view every time the app opens
- 64. Then there isWindows Phone 7 – doesn’t allow you to set a cookie natively on the web view
- 65. But we canset it server side…Hybrid Technique #1: URL ModificationIf you know you are serving a web page inside your hybrid app you can send modified URLs to perform native actions
- 66. Facebook does (did?)this in their iOS API with a return to their own fake protocol: fb://do-something-usefulHybrid Technique #2: URL InterceptionFrom within your native app most web views allow you to listen for a change to the URL
- 67. iOS – UIWebView– shouldStartLoadWithRequest:
- 68. Android – WebViewClient- shouldOverrideUrlLoading()
- 69. Example: location serviceson webOS
- 70. Not currently supportedby the webOS browser
- 71. Instead we navigatethe web view to a URL with dummy values which gets intercepted by the native wrapperhttp://www.tripadvisor.com?latitude=LAT&longitude=LNGturns intohttp://www.tripadvisor.com?latitude=42.313156&longitude=-71.21274
- 72. Hybrid Technique #2:URL Interception (contd.)As an added benefit you can include a link on both the web page and native app that gets intercepted.
- 73. Remember that linkto 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!Hybrid Technique #3: The JavaScript dropSome platforms allow you to execute JavaScript against the web view
- 74. Place data inthe page you return from the server in JavaScript variables
- 75. On page loadpull out the data with the native wrapper and put it to good usePin data gets pulled out and rendered nativelyWebView loads and contains location pin data in a JS variable
- 76. Questions?Stephen BourdeauMobile TechLeadTripAdvisor, LLC
- 77. Shameless “We arehiring!” plugHiring like crazy!
- 78. Lots of interestingmobile projects in the pipeline
- 79. Lots of interestingsocial projects in the pipeline (what could you do with 1.2 billion geographic place pins from our Facebook users?)