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

Slides:



Advertisements
Similar presentations
Developing downloadable mobile apps using HTML5 and PhoneGap Apache Callback Ron Perry, CTO, Worklight Inc.
Advertisements

Mobile & Tablet Development for Business. Background and Some Facts IPhone revenue greater than all of Microsoft's Android activations hit 1.3M per day.
New Release Announcements and Product Roadmap Chris DiPierro, Director of Software Development April 9-11, 2014
D4.3 Additional Applications iPad Application – Facebook Integration George Chrysochoidis i-sieve technologies ltd. PATHS Project Review, 12th March 2014,
So. . . According to the Global Developer Survey ’13 conducted by Telerik, over 5000 developers said that they developed apps using HTML5 in 2012 and 90%
Kinesis Survey Technologies Kinesis Webinar January 8 & 9, 2014 Mobile Testing - Best Practices.
Cross Platform Mobile application development HTML5 and JavaScript Chris Connor.
Device Specific vs. Browser Development (A Business and Marketing Perspective) William Volk, CCO, PlayScreen LLC Business, Marketing and Development Aspects.
Platform Independent Frameworks Contents Mobile App Developer’s challenges Platform Independent solutions – Mobile Web Based Apps – Cross.
Development of mobile applications using PhoneGap and HTML 5
1 CS428 Web Engineering Lecture 18 Introduction (PHP - I)
Native vs hybrid vs web mobile Application
LDT mLearning Week 3 Adapted from EDTEC 700 by Dr. Bernie Dodge, PhD – San Diego State University.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 21: Publishing Your Pages on the Web.
The PhoneGap History Doncho Minkov Telerik Academy academy.telerik.com Technical Trainer
Intelligent Tutoring System Mobile Communication Team Drew Boatwright Nakul Dureja Richard Liou.
 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.
Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University
Apps VS Mobile Websites Which is better?. Bizness Apps Survey Bizness Apps surveyed over 500 small business owners with both a mobile app and a mobile.
1 Proprietary & Confidential Andrew Charkin Mobile Engineer TripAdvisor, LLC Mobile is the New Cool HJUG - Wednesday March 30.
Mobile Web Applications
Smartphones Adrián Preciado. Smartphones Index 1.iPhone OS 1.1Pros 1.2Cons 1.3Different iPhones 1.4 App Store 2.Android 2.1Pros 2.2Cons 2.3 Some phones.
Lightning Talk Fred Rodriguez Nguyen Do CPSC 473 May 6, 2012.
Title slide to be used at the start of a module. Developing Mobile Apps Roland Guijt
Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.
Build a Free Website1 Build A Website For Free 2 ND Edition By Mark Bell.
Introduction CIS 136 Building Mobile Apps 1. What is a mobile app? 2  Computer program  Designed for small devices  Smartphones  Tablets  Other handhelds.
UB Mobile Past and present Demo of UB Mobile 2.0 Technologies used (and not used) UB Mobile Advisory Council.
Developing Better PhoneGap Apps Session 608 / DevLearn 2013 Daniel Pfeiffer Lead Developer / Float Mobile Learning.
Java Mobile Apps with GWT & PhoneGap Josh Marinacci, webOS Developer Advocate.
Developing Enterprise Mobile Apps with Xamarin Loren Horsager CEO, Mobile Composer.
HTML5 for Mobile Andrew Kinai. HTML vs HTML5 HTML:A language that describes documents' formatting and content, which is basically composed of static text.
Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University
1 Geospatial and Business Intelligence Jean-Sébastien Turcotte Executive VP San Francisco - April 2007 Streamlining web mapping applications.
Mobile web Sebastian Lopienski IT Technical Forum 29 June 2012.
Introduction & Overview Introduction to PHP - Fort Collins, CO Copyright © XTR Systems, LLC Introduction to & Overview of PHP Instructor: Joseph DiVerdi,
JAVASCRIPT WITH A VIEW Jordan Knight Solution Architect Xamling SESSION CODE: WEB305 (c) 2011 Microsoft. All rights reserved.
Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.
The way of hybrid mobile development Hybrid Mobile Applications Telerik Software Academy
| | Top 4 Benefits of Hybrid Mobile Apps.
1 KaaShiv InfoTech  Presents  INTEL XDK For Inplant Training / Internship, please download the "Inplant training registration form" from our website.
UNDERSTANDING YOUR OPTIONS FOR CLIENT-SIDE DEVELOPMENT IN OFFICE 365 Mark Rackley
 Can access all API’s made available by OS vendor.  SDK’s are platform-specific.  Each mobile OS comes with its own unique tools and GUI toolkit.
If you are thinking about developing mobile application for your customer, this is an important aspect to consider the platform.
Google Web Toolkit for Mobile Applications Development INGENUITY AT ITS BEST……………….
PhoneGap / PhoneGap Build #CreateTheWeb Mihai Corlan / Adobe Web Evangelist
Google Analytics Graham Triggs Head of Repository Systems, Symplectic.
丁建文 國立高雄應用科大資管系副教授 兼任計網中心軟體發展組組長 跨平台行動應用軟體開發技術 : HTML5 & Mobile JavaScript Framework 暨南大學.
COMPARING CROSS-PLATFORM DEVELOPMENT APPROACHES FOR MOBILE APPLICATIONS Henning Heitkötter, Sebastian Hanschke and Tim A. Majchrzak Department of Information.
INTRODUCING HYBRID APP KAU with MICT PARK IT COMPANIES Supported by KOICA
APP DESIGN AND DEVELOPMENT WITH THE IONIC FRAMEWORK Chuck Leone
OTS The Best of Native Apps and the Mobile Web Duncan Cragg.
#SummitNow Alfresco Mobile SDKs in Action 06 November, 2013 Mike Hatfield Lead Engineer Mobile Apps, Alfresco.
Build Cross-Platform Mobile Apps Using Visual Studio A Telerik webinar by Jeffrey T. Fritz March 27, 2014 AND.
Guide To Develop Mobile Apps With Titanium. Agenda Overview Installation of Platform SDKs Pros of Appcelerator Titanium Cons of Appcelerator Titanium.
PhoneGap Cross-Platform Development Company India
A little more App Inventor and Mind the GAP!
PhoneGap, Processing.
Introduction to Xamarin C# Everywhere
ET-570 Smart Phone Apps.
State of the Art in Mobile Development
Apache Cordova Overview
Automatic Mobile App Generation
Chapter: 2 Diving into Mobile: App or Website?
Myth Busting: Hosted Web Apps
Apps XD.
The Application Lifecycle
Office 365 Development.
Frameworks Deploying Online Services
CSC 581: Mobile App Development
Presentation transcript:

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

2 Proprietary & Confidential TripAdvisor is the world’s most popular & largest travel community with.. 40 million unique monthly visitors 20 million registered members 40 million reviews and opinions Present in 18 countries and 26 languages TripAdvisor Mobile Site and Apps 5 million unique monthly visitors We hit 1 million unique monthly visitors the month after we launched Same global coverage Native apps on a variety of platforms iOS (iPad app reached #1 in more than 50 countries) Android Nokia Ovi HP/Palm webOS … and our mobile site only launched 14 months ago (12/7/2009)! How did we get there so fast?

3 Proprietary & Confidential Mobile web app Built using HTML, CSS, JavaScript (maybe some tool kits) Pros Quick to launch and update Easier to track metrics Cons Does not have access to low level features such as camera, accelerometer, etc. Native app Built using a variety of languages such as Objective-C (iOS), Java (Android), J2ME (BB), etc. Pros Has access to lower level features Cons Higher development cost across multiple platforms In some cases (iOS) slower launch/update times due to approval process Tougher to track metrics

4 Proprietary & Confidential Then there is a dark corner where native apps are actually web apps in disguise HP/Palm webOS apps are built with HTML, CSS, and JS just like a web app but have access to native functionality Nokia Ovi does the same thing Provides access to low level features via JS Hmmm… that sounds like a good idea

5 Proprietary & Confidential Hybrid Apps combine the best of both worlds Develop the basic building blocks of the app in HTML, CSS, JS and display through a web view Build features leveraging those low level APIs natively Quick(er) to launch & update most features Easy(er) to track metrics Wrap them up together and shake well before drinking

6 Proprietary & Confidential There are many frameworks out there to help ease the cross-platform pain of native development PhoneGap RhoMobile Appcelerator Etc… So should you use them? They serve a purpose, but with limitations (still maturing, not perfect) Introduce another layer of abstraction (good and bad) Hybrid apps can be considered as an alternative cross-platform solution

7 Proprietary & Confidential There is a big debate over what the future holds for mobile Some think that native apps are here to stay MG Siegler, TechCrunch “…the fact that very few [developers], if any, choose to go HTML5-only is telling…” - Siegler Some think that HTML5 is the way to go John Ciancutti, VP of Personalization Technology, Netflix - Why We Choose HTML5 for User Experiences on DevicesWhy 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

8 Proprietary & Confidential With a hybrid app you are free to implement whatever works best Choose the right tool for the job! Use simple HTML, CSS, JS to build the simple stuff Use HTML5 to build more complicated features and push them out cross-platform Use native code for the most complicated/low level features Entire page built with HTML & CSS Photo viewer built with DHTML/JS Photo upload built natively

9 Proprietary & Confidential

10 Proprietary & Confidential You want to spend your time building cool stuff, not reinventing the wheel for each platform (hello “Owl Cam”)

11 Proprietary & Confidential Is the web site page view from a mobile web browser or app? Android – Allows you to change your user agent iOS – Does not allow you to change your user agent But wait! In iOS the webView does have a different user agent than mobile safari. Doh… what if another hybrid app looks at your web page? Best solution we have found for iOS? A cookie (who doesn’t love a cookie?) Set the cookie on the web view every time the app opens Then there is Windows Phone 7 – doesn’t allow you to set a cookie natively on the web view But we can set it server side…

12 Proprietary & Confidential If you know you are serving a web page inside your hybrid app you can send modified URLs to perform native actions Facebook does (did?) this in their iOS API with a return to their own fake protocol: fb://do-something-useful

13 Proprietary & Confidential From within your native app most web views allow you to listen for a change to the URL iOS – UIWebView – shouldStartLoadWithRequest: Android – WebViewClient - shouldOverrideUrlLoading() Example: location services on webOS Not currently supported by the webOS browser Instead we navigate the web view to a URL with dummy values which gets intercepted by the native wrapper turns into

14 Proprietary & Confidential As an added benefit you can include a link on both the web page and native app that gets intercepted. 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!

15 Proprietary & Confidential Some platforms allow you to execute JavaScript against the web view Place data in the page you return from the server in JavaScript variables On page load pull out the data with the native wrapper and put it to good use WebView loads and contains location pin data in a JS variable Pin data gets pulled out and rendered natively

16 Proprietary & Confidential Stephen Bourdeau Mobile Tech Lead TripAdvisor, LLC Questions?

17 Proprietary & Confidential Hiring like crazy! Lots of interesting mobile projects in the pipeline Lots of interesting social projects in the pipeline (what could you do with 1.2 billion geographic place pins from our Facebook users?)