1. Hybrid App Development MoMo Mobile Camp, February 19th, 2011 Stephen Bourdeau Mobile Tech Lead TripAdvisor, LLC

3. 40 million unique monthly visitors

4. 20 million registered members

5. 40 million reviews and opinions

6. Present in 18 countries and 26 languages

7. TripAdvisor Mobile Site and Apps

8. 5 million unique monthly visitors

9. We hit 1 million unique monthly visitors the month after we launched

10. Same global coverage

11. Native apps on a variety of platforms

12. iOS (iPad app reached #1 in more than 50 countries)

13. Android

14. Nokia Ovi

15. HP/Palm webOS… and our mobile site only launched 14 months ago (12/7/2009)! How did we get there so fast?

17. Built using HTML, CSS, JavaScript (maybe some tool kits)

18. Pros

19. Quick to launch and update

20. Easier to track metrics

21. Cons

22. Does not have access to low level features such as camera, accelerometer, etc.

23. Native app

24. Built using a variety of languages such as Objective-C (iOS), Java (Android), J2ME (BB), etc.

25. Pros

26. Has access to lower level features

27. Cons

28. Higher development cost across multiple platforms

29. In some cases (iOS) slower launch/update times due to approval process

31. HP/Palm webOS apps are built with HTML, CSS, and JS just like a web app but have access to native functionality

32. Nokia Ovi does the same thing

33. Provides access to low level features via JSHmmm… that sounds like a good idea

35. Develop the basic building blocks of the app in HTML, CSS, JS and display through a web view

36. Build features leveraging those low level APIs natively

37. Quick(er) to launch & update most features

38. Easy(er) to track metrics

40. PhoneGap

41. RhoMobile

42. Appcelerator

43. Etc…

44. So should you use them?

45. They serve a purpose, but with limitations (still maturing, not perfect)

46. Introduce another layer of abstraction (good and bad)

48. Some think that native apps are here to stay

50. John Ciancutti, VP of 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

52. Choose the right tool for the job!

53. Use simple HTML, CSS, JS to build the simple stuff

54. Use HTML5 to build more complicated features and push them out cross-platform

55. Use native code for the most complicated/low level features Photo viewer built with DHTML/JS Entire page built with HTML & CSS Photo upload built natively

56. Photo viewer & Photo upload

58. Android – Allows you to change your user agent

59. iOS – Does not allow you to change your user agent

60. But wait! In iOS the webView does have a different user agent than mobile safari.

61. Doh… what if another hybrid app looks at your web page?

62. Best solution we have found for iOS? A cookie (who doesn’t love a cookie?)

63. Set the cookie on the web view every time the app opens

64. Then there is Windows Phone 7 – doesn’t allow you to set a cookie natively on the web view

67. iOS – UIWebView – shouldStartLoadWithRequest:

68. Android – WebViewClient - shouldOverrideUrlLoading()

69. Example: location services on webOS

70. Not currently supported by the webOS browser

71. Instead we navigate the web view to a URL with dummy values which gets intercepted by the native wrapperhttp://www.tripadvisor.com?latitude=LAT&longitude=LNG turns into http://www.tripadvisor.com?latitude=42.313156&longitude=-71.21274

74. Place data in the page you return from the server in JavaScript variables

75. On page load pull out the data with the native wrapper and put it to good usePin data gets pulled out and rendered natively WebView loads and contains location pin data in a JS variable

76. Questions? Stephen Bourdeau Mobile Tech Lead TripAdvisor, LLC

78. Lots of interesting mobile projects in the pipeline

79. Lots of interesting social projects in the pipeline (what could you do with 1.2 billion geographic place pins from our Facebook users?)