Hybrid App Development

linencharmMobile - Wireless

Dec 10, 2013 (3 years and 9 months ago)

99 views

1

Proprietary & Confidential

Stephen Bourdeau

Mobile Tech Lead

TripAdvisor, LLC

Hybrid App Development

MoMo

Mobile Camp, February 19
th
, 2011

2

Proprietary & Confidential

Who is TripAdvisor? And what’s with the owl?


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

Types of Mobile Apps


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

A dark corner…


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

What is a Hybrid app?


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

Mobile Frameworks


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

HTML5
vs

Native apps


There is a big debate over what the future holds for mobile


Some think that native apps are here to stay


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…”
-

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 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

Hybrid App Strategy


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

Photo viewer & Photo upload

10

Proprietary & Confidential

In the end…


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



11

Proprietary & Confidential

How do we know where we are?


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

Hybrid Technique #1: URL Modification


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

Hybrid Technique #2: URL Interception


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


http://www.tripadvisor.com?latitude=LAT&longitude=LNG


turns into


http://www.tripadvisor.com?latitude=42.313156&longitude=
-
71.21274



14

Proprietary & Confidential

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.


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

Hybrid Technique #3: The JavaScript drop


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

Shameless “We are hiring!” plug


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?)