HTML5 vs. Native
Real life lessons from both worlds
Slide 2
Slide 2 text
Moi
• Passionate technologist
• Building web and mobile products since 2000
• Founded Netcraft in 2003 (later acquired by Tapuz)
• To (partially) be blamed for FED
• Founded Everything (formerly DoAT) in 2010
Slide 3
Slide 3 text
Everything
• Changing the usage of apps on
smartphones
• Apps can be used from the phone or
from the cloud
• Cloud apps are instant and intent-
based
• Building the dynamic phone - what
you need rather than what you
installed
• Apps become - discoverable by intent,
instant and inherently shareable
Slide 4
Slide 4 text
Everything #2
• Multi-disciplinary team:
• Data & Algorithms
• Backend & Infrastructure
• Web
• Native Mobile Clients
• We’ve built over a 100 html5 mobile apps
• And a bunch of native ones
Slide 5
Slide 5 text
Everything #3
• We’ve built over a 100 html5 mobile apps
• And a bunch of native ones
Slide 6
Slide 6 text
Goal - make HTML5
useful for your mobile
product
Slide 7
Slide 7 text
When you say HTML5
• A single term that wraps several different advancements:
• New HTML capabilities (e.g. video)
• New Javascript APIs (e.g. geolocation)
• New styling capabilities (aka CSS3)
• Some vendor-specific additions (iOS touch icon meta
tag)
Slide 8
Slide 8 text
Mobile apps have
different flavors
HTML5 Native
Wrapper
Hybrid
Generated
Slide 9
Slide 9 text
HTML5
Skills Web development, FED at
least, server-side optional
Delivery method A site accessed by a web
browser
Release Cycle Whenever
Slide 10
Slide 10 text
Native
Skills
Platform SDK, iOS/
Objective-C, Android/Java,
WP/.Net
Delivery method
An executable ran on a
device
Release Cycle App submission process
Slide 11
Slide 11 text
Wrapper
Skills
Advanced HTML5,
intermediate Native
Delivery method
An executable ran on a
device which launches a
browser to render app
Release Cycle
Whe App submission
process for wrapper,
ongoing for HTML5 never
Slide 12
Slide 12 text
Hybrid
Skills
Advanced HTML5 and
Advanced Native
Delivery method
An executable ran on a
device with some browser
rendered app portions
Release Cycle
App submission process
for client, ongoing HTML5
portions
Slide 13
Slide 13 text
How we built our app(s)
Slide 14
Slide 14 text
DoAT v1.0 - Native
• Launched at TCD,
May 2011
• All native
• Shows results inside
a browser (webview)
Slide 15
Slide 15 text
Why Native?
• Had to go native
• Needed to deal with
low-level networking
optimizations (read -
we were slow)
Slide 16
Slide 16 text
Everything v0.1 - HTML5
• The first in many
iterations of our new
interface
• Started as an HTML
image-map with links
to other screens
• Later developed as a
full blown HTML5
app
Slide 17
Slide 17 text
Why HTML5?
• We wanted to get
mockups in the
hands of users
• We had the available
skills (or lacked the
iOS ones)
• We wanted to move
FAST, without native
release friction
Slide 18
Slide 18 text
Everything v0.2 - Hybrid
• v0.1 HTML5 interface
wrapped within a
browser (loaded
from our servers)
• Ability to launch
apps in their own
separate browser
(HTML5
communicating with
Native code)
Slide 19
Slide 19 text
Why Hybrid?
• We wanted to have a
different experience for
launching apps
(separate browsers)
• We wanted to go full
screen
• We wanted to leverage
our existing HTML5
investment
Slide 20
Slide 20 text
Everything beta - Full
blown HTML5 app
• Launched and still
runs under
everything.me
• Our main product
testbed for 4-6
months
• Cross platform
(Android 2.2+ / iOS
5+)
Slide 21
Slide 21 text
Why HTML5?
• Awesome flexibility in
experimenting with UI
and product tweaks
• Releasing early and
often, sometimes even
5+ times a day
• Allowed us to use
external testing
services such as
UserTesting
Slide 22
Slide 22 text
Everything iOS App -
Hybrid
• A native iOS app that
uses HTML5 to
render some of its
views
Slide 23
Slide 23 text
Everything iOS App -
Hybrid
• Some really
important features
rely on HTML5
• Feed - rendered
with HTML5
• Snapping process,
templates are
powered by
HTML5
• Heavy use of offline
for native’ish feel
Slide 24
Slide 24 text
Why Hybrid?
• Parallel work done on 2
teams - iOS and Web,
allowing for quicker
delivery and
responsiveness
• We work iteratively,
HTML5 helped us
handle changes better
• The right tool for the
job
Slide 25
Slide 25 text
Why Hybrid? #2
• Ability to have short
release cycles
• No expedited review for
bug fixing FTW!
Slide 26
Slide 26 text
Cut to the chase
Native
Hybrid
HTM
L5
W
rapper
Native capabilities
Change rate
Slide 27
Slide 27 text
But wait, isn’t HTML5 bad for
your stock?
Slide 28
Slide 28 text
It’s not a question of
one winner
The web is here to stay, and on mobile it’s HTML5
Slide 29
Slide 29 text
You need to be
where your users are
Facebook has x2 more traffic on their web app
than their native apps combined
Slide 30
Slide 30 text
“Beast don’t look, it’s HTML5”
Slide 31
Slide 31 text
HTML5 is part of the
mobile future
Talk to the Mozillians here about FirefoxOS
Samsung/Intel are building Tizen
Slide 32
Slide 32 text
Thanks!
@joeysim
[email protected]
W
e’re
Hiring!
http://corp.everything.me/jobs