html 5 vs. native mobile applications

HTML 5 vs. Native

Sasha Aickin Search Team Lead, Redfin

The time: Yesterday

The Place: Moscone West

Um, WTF?

We often cast technology platform wars as "religious", but

it's rare that we get actual monks involved.

Who doesn't love a little religious war?

And why are mommy and daddy fighting?

So...

How did we get to this place?

What should we as developers do about it?

Who doesn't love a little religious war?

And why are Google and Apple fighting?

So...

How did we get to this place?

What should we as developers do about it?

But first...

and the lessons we (should have?) learned

A Brief History of the Mobile Internet


Phase one: The Sync-ternet (1997-2001)


Phase one: The Sync-ternet (1997-2001)

Lesson the First:

Mobile without wireless is just this side of useless.

A Brief History of the Mobile InternetPhase Two: WAP! (2000-2006)

They promised:


They delivered:

FAIL


Lesson the Second:

Mobile without good user interface is not much better.

A Brief History of the Mobile InternetPhase Three: the Actual Internet (2007)


"Perhaps it’s playing well in the mainstream press, but here at WWDC, Apple’s “you can write great apps for the iPhone: they’re called ‘web sites’” — message went over like a lead balloon....

– John Gruber, June 2007 WWDC 2007 Keynote Notes

If all you have to offer is a s*** sandwich, just say it. Don’t tell us how lucky we are and that it’s going to taste delicious."


Lesson the Third:

Mobile that's a second-class citizen also does not fly.

A Brief History of the Mobile InternetPhase Four: Apps! The Internet without HTML (2008-?)

A Brief History of the Mobile InternetPhase Four: Apps! The Internet without HTML (2008-?)

Lesson the Fourth:

Users will pay for mobile that works.

A Brief History of the Mobile InternetPhase Five: HTML5, the revenge of the standard (2009-?)

VS.

SPOILER ALERTHTML5 wins.

Um, eventually.

Case study on the desktop: CoolIrisCoolIris developed a browser plugin over the course of several years which displays images and videos in a 3D wall.

A random guy did a similar thing in HTML5 in a few weeks.

HTML FTW

HTML5 is awesome!

It's a standard.

It's got massively widespread support.

It works on many different devices.

Your developers already know it.

Case closed, right?

Er, no. Eventually is the key here.

The bankruptcy courts of Silicon Valley are littered with the corpses of wireless Internet companies who thought that the wireless Internet was at hand before the technology and market caught up.

So if you have to build a mobile app now:

What should you do?

Try to go HTML5, but first consider four questions.

The first (and easiest) question is:

What will the app do?

There's a lot that can't be done in HTML5.

Running in the background

Accessing media files

Taking video

Taking pictures

Accelerometer

Gyroscope

Vibration

Notifications

But there's a shocking amount that can be:

GPS and Compass

Local SQL Storage

Web App Cache

Vector and bitmap 2D graphics

3D with OpenGL

Touch and gesture recognition

Native video tag

Native audio tag

Functionality Case study: Hand of Greed

The first question

What will the app do?

If the answer is "something only supported natively", go native.

Otherwise, move on to...

The second (and squirrelliest) question is:

How will the app feel?

Look & Feel

If you want a web app to look like a native app, you have two choices:

1. Use iUI/SproutCore/iWebKit/jqTouch framework and write your app with native-ish controls in HTML/CSS/JavaScript

... and painstakingly fix the bugs and issues and weirdnesses...

... and end up with an app that still doesn't really look or feel like a native app.

Look & Feel

If you want a web app to look like a native app, you have two choices:

2. Give up and realize it was a bad idea to begin with.

The Weirdness of the Web

There are bunch of web conventions that are page-like, not app-like:

Bookmarks

Back Button

Refresh Button

Page Flash

Passed Links

Performance

"Speed kills."

Performance is where abstractions go to die.

Performance case study: Amazon

Performance case study: Google Maps

The second question

How will the app feel?

If you prototype it in HTML5, and you can't stand how it feels, go native.


The third (and to some, the most important) question is:

How on earth will you make money?

<TODO: insert clichéd Jerry Maguire reference here>

More money, more problems?

If you are ad-based, HTML vs. native is more or less a toss-up.

Er, unless you're developing on iOS. You can only send user or device data to:

"an independent advertising service provider whose primary business is serving mobile ads (for example, an advertising service provider owned by or affiliated with a developer or distributor of mobile devices, mobile operating systems or development environments other than Apple would not qualify as independent)"

– Apple iPhone Dev Terms of Service(as quoted on allthingsd.com)


If you are ad-based, HTML vs. native is more or less a toss-up.

Er, unless you're developing on iOS. You can only send user or device data to:

"an independent advertising service provider whose CEO's name does not rhyme with Chmidt"

– my co-worker's re-stating of Apple Terms of Service


If you want users to pay you directly, though, you are essentially hosed in the HTML5 world.

Yes, PayPal has a mobile API, as does Google. Have you ever tried to USE PayPal in a phone browser? Exactly.

P.S. This is not PayPal's fault! All the mobile HTML5 payment experiences kind of suck.

The third question

How on earth will you make money?

If you get paid for the app or in-app purchases, go native.


The fourth (and hardest) question is:

How will users find your app?

Google is awesome!

But not really for finding mobile web apps.

Sometimes launching in an app store can feel like being a small fish in a big pond.

But being a mobile webapp just out on the Internet is like being a small protozoa in an infinite universe.

Marketing on the App Stores is Gold

You simply cannot underestimate the power of app store marketing.

LaunchPromoted on App

Store

We need a good directory of HTML5 apps

And it's maybe sorta kinda coming with the Chrome App Store.

But maybe not. :(

The Mom Test

My mom, like many moms, is (a) awesome and (b) not good at technology.

Many, many apps.

My mom has apps installed on her iPhone.

The Dark Side of the Apple App StoreRemember those bankruptcy courts in Silicon Valley that were full of mobile web companies?

They are now full of iPhone softcore porn app companies, or tethering app companies, or telephony app companies.

Redfin has had nothing but good experiences with Apple, but there is a business risk to depending on all your revenue going through them.

The fourth question

How will users find your app?

If you don't have a solid strategy for getting users to your app (and you can stomach the dangers in Apple's store), go native.

To conclude...

If you aren't doing anything in your app that is outside HTML

AND

If you're OK with the level of performance and feel of HTML

AND

If you don't need to accept payments for or inside your app

AND

You know how you can get users to your app...

Go HTML5!

Otherwise...

As much as it pains me to say it...

Go Native.

Moving to the Open Web

In a perfect world, we'd be able to say: "go HTML5 all the way!"

How do we get there?

Here's the plan, see...

1.Add more features to HTML5. Camera? Accelerometer? Gyro? Yes. Back to work, Hixie.

2.Make faster devices and faster browsers. Luckily, Google and Apple are in a death race to do just this.

3.Make payment in HTML5 easy. No one has solved this or even seems to be working on it.

4.Smooth discovery and installation of web apps. The Chrome web app store is a step down this path.

That's it

Good luck creating your app, whether it be written in HTML5 or natively, and let's work towards a

more HTML-y world.

Questions? Praise? [email protected]

html 5 vs. native mobile applications

Technology