Trip advsiorhybridpresentation
•Download as PPTX, PDF•
1 like•824 views
This document discusses hybrid mobile app development. It defines hybrid apps as combining the best of mobile web apps and native apps by developing basic features with HTML, CSS, and JavaScript and leveraging native APIs for more advanced features. This allows for quicker development and updates across platforms while still accessing device-level capabilities. The document outlines several techniques hybrid apps can use such as URL modification and interception to trigger native functionality from web views and pass data between web and native components. It promotes choosing the right development approach for each feature rather than relying solely on web or native.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Trip advsiorhybridpresentation
Similar to Trip advsiorhybridpresentation (20)
Trip advsiorhybridpresentation
- 1. Hybrid App DevelopmentMoMo Mobile 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 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
- 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?
- 16. Types of Mobile AppsMobile web app
- 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
- 30. Tougher to track metricsA dark corner…Then there is a dark corner where native apps are actually web apps in disguise
- 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
- 34. What is a Hybrid app?Hybrid Apps combine the best of both worlds
- 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
- 39. Wrap them up together and shake well before drinkingMobile FrameworksThere are many frameworks out there to help ease the cross-platform pain of native development
- 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)
- 47. Hybrid apps can be considered as an alternative cross-platform solutionHTML5 vs Native appsThere is a big debate over what the future holds for mobile
- 48. Some think that native 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, 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
- 51. Hybrid App StrategyWith a hybrid app you are free to implement whatever works best
- 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/JSEntire page built with HTML & CSSPhoto upload built natively
- 56. Photo viewer & Photo upload
- 57. In the end…You want 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 – 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
- 65. But we can set 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 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=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 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!Hybrid Technique #3: The JavaScript dropSome platforms allow you to execute JavaScript against the web view
- 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 nativelyWebView loads and contains location pin data in a JS variable
- 76. Questions?Stephen BourdeauMobile Tech LeadTripAdvisor, LLC
- 77. Shameless “We are hiring!” plugHiring like crazy!
- 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?)
Editor's Notes
- 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!