Вы находитесь на странице: 1из 53

Page 1

HOW CAN HTML5 compete with Native?


September 2013 Produced by In collaboration with
Page 2
Page 3
CONTENTS
<Part 1 />
EXECUTIVE SUMMARY

<Part 2 />
THE LANDSCAPE Of HTML5 tech

<Part 3 />
HTML5 VS NATIVE: WHAT ARE THE GAPS?

<Part 4 />
INSIGHTS & RECOMMENDATIONS


Page 4
<Part 1 />
EXEC SUMMARY
Page 5
HOW CAN HTML5 compete with Native?
There is too much F.U.D, too many opinionated rants on how HTML5
apps fare against native apps. Things are painted too much in black and
white.

The question is how can HTML5 compete by closing the gap with
native?

Rather than opinion, we address this question with research,
interviews and hard data.

As part of the process we also challenge three myths of HTML5 mobile.
Page 6
HTML5 mobile: Myth vs reality
Myth Reality
Performance is slow
It is not about performance, it is about tools and the ability to
measure performance and improve.
Technology gets better (asm.js), but browser vendors choose to
ignore it. Better performance depends on browser politics.
Lack of APIs
37% of Android apps could be implemented using HTML5 via the
Mobile browser, 49% via Phonegap, 63% via Appcelerator and 98%
via Firefox OS.
The APIs that would make the biggest difference in app addressable
market are not even on the browser roadmap.
Ease of development
Instrumentation tools, especially debugging and memory profiling
are sorely missing.
Page 7
More findings from our research
61%
of HTML5 mobile developers go direct to browser when
developing a mobile website or app. The browser is the most
popular route to the mobile market. Yet
63%
+21%
of Android apps (US) cannot be implemented via the mobile
browser due to lack of APIs.

is the rise in the number of apps that can be created with
HTML5 if W3C and browsers supported a Power
Management and WiFi API.

Page 8
HOW CAN HTML5 compete with Native?
49%
of HTML5 mobile developers go beyond the browser. There
are 3 other routes to market that HMTL5 mobile developers
are using: hybrid tools (e.g. PhoneGap), web to native
converters (e.g. Appcelerator) and native JavaScript APIs
(e.g. Firefox OS, Windows 8).
of Android US apps can be developed using hybrid tools,
63% using web to native converters, and 98% using native
JavaScript APIs.

39%
Page 9
METHODOLOGY: HOW WE BACKED OUR RESEARCH
30,339
Android apps from Google Play (US) analyzed in terms
of categories and API permissions;
6,000+
mobile developers worldwide surveyed in April May
2013 as part of the 5
th
Developer Economics survey
42
HTML5 tools mapped across Architectural frameworks,
UI frameworks, Gaming engines, Web wrappers, Web-
to-native converters, Native Javascript APIs;
32
developers, industry experts and tool vendors
interviewed, from Angular.js (Google) to Financial Times
Page 10
HTML5 mobile: Myth vs reality
Myth Reality
Openness is everything
Unlike the browser wars of the 2000s, mobile platforms dont
compete in terms of openness. They compete on onboarding and
retaining users, developers, as well as carriers and handset makers.
HTML5 competes with
native
HTML5 compliments Native.
HTML5 is black or
white
HTML5 has traction in enterprise, media and education.
Page 11
<Part 2 />
THE LANDSCAPE
of HTML5 tech
Page 12
HTML5 ROUTES TO MARKET
How can a web developer reach the mobile market?
Input
Distribution
channel
Output Key players
Mobile browser
HTML, CSS,
JavaScript
WWW Web document
Web wrapper
HTML, CSS,
JavaScript
App store Hybrid package
Web-to-native converter JavaScript App store Native package
Native JavaScript API
HTML, CSS,
JavaScript
App store Native package
Page 13
NOT ALL ROUTES TO MARKET ARE EQUAL
Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April May 2013 | n = 2275
61% of HTML5 mobile developers go direct to browser
Page 14
KEY PLAYERS IN HTML5 tech
What are the most important HTML5 development tools?
Architectural
frameworks
CSS
UI frameworks
JavaScript
UI frameworks
Web wrappers
Web-to-Native
Converters
Native
Javascript APIs
2D
Gaming Engines
3D
Gaming Engines
Page 15
ROUTES TO MARKET: HOW THEY DIFFER?
1. Performance
UI responsiveness & computational load.
2. Reach
Reach of multiple platforms.
3. API depth
Efficient API access to hardware components and services.
4. Monetization
Availability of 1-click billing, ads, in-app purchases, etc.
5. Ease of development
A measure of how easy it is for a web developer to get started.
Page 16
API depth
Monetization
Ease of development Perfomance
Reach
! Apps/games run on the devices browser, e.g. iOS Safari.
! They are available on the web, discoverable through search engines, links &
advertisements.
ROUTES TO MARKET: THE MOBILE BROWSER
Page 17
ROUTES TO MARKET: THE WEB WRAPPER
! Apps/games run in a chromeless browser with access to the devices hardware
APIs and services.
! They are distributed via an app store.
API depth
Monetization
Ease of development Perfomance
Reach
Page 18
ROUTES TO MARKET: THE WEB-TO-NATIVE CONVERTER
! Apps/games are compiled from JavaScript to native code with access to the
devices hardware APIs and services.
! They are distributed via an app store.
API depth
Monetization
Ease of development Perfomance
Reach
Page 19
ROUTES TO MARKET: THE NATIVE JAVASCRIPT API
! Apps/games run on Operating Systems that expose their services and hardware
components through native JavaScript APIs.
! They are distributed via an app store.
API depth
Monetization
Ease of development Perfomance
Reach
Page 20
<Part 3 />
HTML5 VS NATIVE
WHAT ARE THE GAPS?
Page 21
HTML5 GAPS
Where does HTML5 fall short in comparison to Native SDKs?
1. APIs
Access to hardware components and services.
2. Performance
UI responsiveness and computational load.
3. Tools
Tools for debugging, editing and profiling.
4. Education
Developer education on the advantages and best practices of HTML5.
5. Marketing
App stores, monetization options and profits.
Page 22
WHAT STOPS MOBILE DEVELOPERS FROM USING HTML5?
5.21%
6.00%
9.55%
12.00%
13.52%
13.53%
20.53%
28.30%
29.18%
37.34%
45.72%
0.00% 20.00% 40.00% 60.00% 80.00% 100.00%
Other
Not as profitable as Native
Limited monetization options
3rd party APIs plugins are outdated
Lack of large app stores
Steep learning curve for quality apps
Lack of mature frameworks
Can't create cutting edge UI/UX
Difficulty to integrate native elements
Limited access to hardware APIs
Performance issues
Tools
Marketing
APIs
Performance
Education
Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April May 2013 | n = 1518
Page 23
What DRIVES mobile developers TO using HTML5?
Source: Visionmobile, Developer Economics 2013 Q1 | Survey conducted in January 2013 | n = 1974
Page 24
ANALYZING API USAGE: Android vs HTML5 APPS
In June 2013 we analyzed 30,339 apps from Google Play (US) store to
determine the usage of APIs.
The question we aimed to answer was: Which APIs are the most popular
within Android apps?
We then compared missing HTML5 APIs with popular Android APIs to
conclude on the most important APIs to fix.
The story of an app store analysis in terms of app categories and APIs
Page 25
app categories IN GOOGLE PLAY (us)
business &
productivity tools
communications &
social networking
education &
reference
enterprise
entertainment
games
maps, navigation &
lbs
media
medical & fitness
music & video
utilities
30,339 apps and games in Google Play June 2013
Page 26
THE IMPORTANCE OF APIs per app category IN GOOGLE PLAY (US)
0% 20% 40% 60% 80% 100%
audio settings
battery
bluetooth
calendar
utilities
music & video
medical & fitness
media
maps, navigation & lbs
games
entertainment
enterprise
education & reference
communications & social
networking
business & productivity tools
% of apps per category in Google Play US store
API app category
Page 27
0% 20% 40% 60% 80% 100%
camera
contacts
filesystem
geolocation
utilities
music & video
medical & fitness
media
maps, navigation & lbs
games
entertainment
enterprise
education & reference
communications & social
networking
business & productivity tools
% of apps per category in Google Play US store
API app category
THE IMPORTANCE OF APIs per app category IN GOOGLE PLAY (US)
Page 28
0% 20% 40% 60% 80% 100%
mic
network
nfc
power management
utilities
music & video
medical & fitness
media
maps, navigation & lbs
games
entertainment
enterprise
education & reference
communications & social
networking
business & productivity tools
% of apps per category in Google Play US store
API app category
THE IMPORTANCE OF APIs per app category IN GOOGLE PLAY (US)
Page 29
0% 20% 40% 60% 80% 100%
sms
telephony
vibration
wifi
utilities
music & video
medical & fitness
media
maps, navigation & lbs
games
entertainment
enterprise
education & reference
communications & social
networking
business & productivity tools
% of apps per category in Google Play US store
API app category
THE IMPORTANCE OF APIs per app category IN GOOGLE PLAY (US)
Page 30
WHICH ARE THE MOST USED APIs IN GOOGLE PLAY (US)?
10%
26%
28%
29%
33%
64%
90%
0% 20% 40% 60% 80% 100%
camera
geolocation
vibration
wifi
power management
filesystem
network
% of Android apps in Google Play US store using the specific API
Page 31
ONLY 37% OF ANDROID APPS CAN BE DEVELOPED FOR a mobile browser
% of apps in Google Play US store that can be implemented with each HTML5 route to market, that utilise
APIs available through that HTML5 route to market alone.
97.76%
63.41%
48.62%
37.22%
0.00% 20.00% 40.00% 60.00% 80.00% 100.00%
Native JavaScript API
Web-to-native converter
Web wrapper
Mobile browser
% of Android apps in Google Play US store
Page 32
61% of HTML5 DEVELOPERS ARE CONSTRAINED TO 37% OF APPS
Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April May 2013 | n = 2275
Page 33
HTML5 API coverage, for each app category
Mobile browser Web wrapper
Web-to-native
converter
Native
JavaScript API
Business &
productivity tools

Communications &
social networking

Education &
reference

Enterprise
Entertainment
Games
Page 34
HTML5 API coverage, for each app category
Mobile browser Web wrapper
Web-to-native
converter
Native
JavaScript API
Maps, navigation &
LBS

Media
Medical & fitness
Music & video
Utilities
Total
Page 35
WHICH ARE the most important APIs to fix?
Which API, if implemented, would make the greatest difference in the
number of apps, for each route to market?
Mobile browser Web wrapper Web-to-native
converter
Native
JavaScript API
13%
Power
management
Power
management
WiFi
Calendar
12%
21%
1.4%
Page 36
the gaps between W3C APIs and browser adoption
Number of adopting browsers
0 1 2 3 4 5 6 7
ED
WD
CR
PR
S
t
a
n
d
a
r
d
i
z
a
t
i
o
n

S
t
a
t
u
s

None
LCWD
" ED: Early Draft
" WD: Working Draft
" LCWD: Last Candidate
Working Draft
" CR: Candidate Release
" PR: Production Release
Over-standardised
Under-standardised
Page 37
the gaps between W3C APIs and browser adoption
Number of adopting browsers
!Audio Settings
!Battery
!Bluetooth
!Calendar
0 1 2 3 4 5 6 7
!Camera
!Compass
!Contacts
!Filesystem
!Geolocation
!Microphone
!Motion
!Network
!NFC
!Notifications
!SMS
!Telephony
!WiFi
!Vibration
ED
WD
CR
PR
!Power management
S
t
a
n
d
a
r
d
i
z
a
t
i
o
n

S
t
a
t
u
s

None
LCWD
" ED: Early Draft
" WD: Working Draft
" LCWD: Last Candidate
Working Draft
" CR: Candidate Release
" PR: Production Release
Page 38
HTML5 GAPS: Performance IS THE MOST COMMON COMPLAINT
JavaScript will be always slower due to
its nature (high level language).
Max Flirtman, Author - Speaker - Web developer

We put all our efforts in performance and
user experience.
Gabriel Tavridis, Product Manager, Appcelerator

Quality and user experience is top
priority for us. Therefore, we prefer going
with a Native API.
Apostolos Papadopoulos, Author of 4sqwifi
HTML5 is slower by
definition
Performance as a value
proposition for tool
vendors
Developers choose
Native SDKs for
performance reasons
Page 39
HTML5 GAPS: JAVASCRIPT Performance IS ALL ABOUT POLITICS
JavaScript performance is highly debated. Nevertheless
1. CPUs get better;
e.g. iPhone 5S has twice the CPU power of iPhone 5.
2. JavaScript compilers improve;
e.g. JIT is 5 times slower than native performance. Asm.js promises approx. 1.3
times slower.
But the real problem is browser politics.
! Besides Opera, all major browser vendors are mobile OS vendors;
! Google promotes Native Chrome Apps;
! Apple is keen to implement all latest standards but leaves out
performance related APIs, e.g. WebGL.

Page 40
HTML5 GAPS: browser politics
We need to attract more developers to
create a need that will inevitably force the
browser vendors to implement new
standards and improve the performance.
Right now browser vendors have all the
power and we need to somehow entice
them create the demand.
Ran Ben Aharon, Head of Front End Development,
Everything.me

Use developers
as lobbyists
Page 41
HTML5 GAPS: DEVELOPMENT TOOLS
Hearing Mark Zuckerberg denounce
HTML5 made me angry at first, but then I
looked at some data and realized that the
main reason was not performance or APIs
but the lack of memory management and
debugging tools.
Ran Ben Aharon, Head of Front End Development,
Everything.me

It would be great to have something like
yslow (debugging tool) for game
developers.
Louis Stowasser, Author of CraftyJS

Profiling and debugging
tools are missing from
HTML5
Page 42
HTML5 GAPS: DEVELOPMENT TOOLS
The biggest issue for HTML5 is the
maturity of tools.
Robert Shilston, Director of FT labs, Financial Times

Right now, HTML5 is missing a toolchain,
from prototyping to publishing [] it lacks
the one-package onboarding that comes
with Native SDKs.
Andrea Trasatti, Developer Evangelist, Nokia
Existing tools are not
good enough
HTML5 is missing a
toolchain, not just
individual tools
Page 43
HTML5 GAPS: EDUCATION
Some use cases are not ready for HTML5
to support. For others HTML5 is already
ahead.
Robert Shilston, Director of FT labs, Financial Times

From a business standpoint, there's a lot
of education needed for the acceptance of
HTML5. There's a gap between what we
developers can provide and what the
clients think we can provide.
Ciprian Borodesku, CEO, Web Crumbz

Need to educate the
market on HTML5s
capabilities
Page 44
<Part 4 />
INSIGHTS &
RECOMMENDATIONS
Page 45
Power Management and WiFi are the two most important APIs
currently missing from HTML5.
! The mobile browser is the most popular route to market;
61% of HTML5 mobile devs use the browser to develop a mobile app.
! Yet only 37.22% of Android apps (US) can be implemented with HTML5 via
the mobile browser;
! Implementing Power Management and WiFi APIs in the mobile browser
would result to an astonishing 20.83% rise in the number of apps that can be
created with HTML5;
Recommendation:
- Implement Power Management and WiFi APIs.
Power management and wifi APIs: BIGGEST CHANGE DRIVERS
Page 46
Standardization of packaged web apps (native JS apps) reduces the cost
for HTML5 developers to reach more devices.
! Each vendor currently has its own specification of how native JS apps are
packaged;
e.g. Firefox OS, Blackberry Webworks, Windows 8, Tizen, etc.
! Standardization would set the foundation for HTML5 to reach more devices;
Apps created for Firefox OS or Tizen would be possible to run Windows 8 or
BB WebWorks
Recommendation:
- Standardize packaged web apps.
PACKAGED WEB APPS: fragmentation delays adoption
Page 47
! Identity is critical to advertising and search business models.
! Its also critical for content personalization, device adaptation, user
tracking, user analytics, customer support, bug tracking, campaign
management and many more functions.
! Mozilla already has the Persona identity feature

Recommendation:
Propose a device identity API as a better alternative to cookies that eases
privacy concerns and follows the user across mobile and desktop.
Device identity API: A BETTER SOLUTION TO COOKIES
Page 48
HTML5 has received endless criticism, centered on opinion, not facts.
Best way to address that is with more facts. Best facts are success stories
from high profile HTML5 apps, addressing specific developer concerns.
! Mobile developers identify performance being the #1 reason that stops them
from using HTML5 as a main developer platform;
Stoppers: Performance 45.7%, APIs 37.3%, Tools 20.5%, Monetization 16.1%
! Robert Shilston, director of FT labs, argues the problem is not performance,
but the maturity of [instrumentation] tools.
Recommendation:
- Showcase where HTML5 apps can go (e.g. www.HTML5cando.com);
- Educate around big brands (FT, game publishers) using HTML5;
- Educate developers around HTML5 routes beyond the browser
THE HTML5 BRAND suffers from F.U.D.
Page 49
HTML5 is like a car without a dashboard. Debugging, editing, profiling
and instrumentation tools are missing.
! 34% of mobile developers say HTML5 needs better development environment
to compete with native SDKs;
! Each browser vendor has its own development tools. Chrome dev tools is the
most popular.
Chrome dev tools 65%, Firebug 38.6%, Firefox dev tools 31.2%.
! Developers need more profiling tools like YSlow;
Yslow gives insights on what to fix, not just data on the problem.
Recommendation:
- Implement a Debug API to create a platform for debugging tools.
HTML5 TOOLS: A CAR without a Dashboard
Page 50
Politics play key role to API browser adoption.
! Vibration and Battery API, both in W3C Candidate Release state (pre-final)
are implemented by just a single mobile browser: Firefox;
! Filesystem API, still a W3C Working Draft, is implemented by all 7 popular
mobile browsers.
! Motion API, still in W3C Early Draft state (the very first state an API is
introduced), is implement by 6/7 mobile browsers.
Recommendation:
- Use developers as lobbyists on the need for browser vendors to
implement missing APIs.
- Make sure that missing APIs become a competitive metric for browser
vendors. Create a leaderboard for shaming browsers for missing APIs.
BROWSER POLITICS
Page 51 Copyright VisionMobile 2011
Knowledge. Passion. Innovation.
Questions / comments?
hello@visionmobile.com


Want to follow the discussion?
@visionmobile
@tefdigital

Want to learn more?
visionmobile.com/blog
blog.digital.telefonica.com
Updated: 12 November 2010
Thanks for listening!
Page 52
<APPENDIX>
Who is
VisionMobile?
Page 53
VisionMobile | THE LEADERS IN APP ECONOMY RESEARCH
Developer Economics
The biggest, most global developer
research platform
Mobile Innovation Economics
Thought-leading economics for
managing disruption and reinventing
your business
Trends watch
Tracking app and developer trends
Tier-1 clients
trusted by the top brand names in
mobile
Digital ecosystem experts
Thought leaders in the economics of
ecosystems and telecoms in the
software era
Media coverage
Global media reach

Вам также может понравиться