Rebooting the EU App Economy / Fraunhofer HHI, Berlin, Germany / 13th November 2013 Dimitris Michalakos, Web Technology Lead, VisionMobile "How Can Web Devs Reach the Mobile Market?" Dimitris Michalakos is the web technology lead at VisionMobile. At VisionMobile, Dimitris is in charge of the Developer Economics portal and also leads the company’s research on web technologies. Dimitris is a developer and entrepreneur. As a developer he is fluent with HTML5, JavaScript, Node.js, SQL, Git, J2EE and PHP - including tinkering with JS visualisations. Dimitris is an engineer at heart. He enjoys breaking things apart to see how the work, except of course for his precious Firefox OS phone.

2. 1. INtrODUCTION, WHO AM I, bla bla bla
2. ROUTES TO MARKET
3. UNDERLYING TECHNOLOGIES + TOOLS
4. HTML5 VS NATIVE (things to consider)
5. QUICK SUMMARY
6. questions

3. Part 1
introduction, WHO AM I,
bla bla bla

6. VisionMobile | THE LEADERS IN APP ECONOMY RESEARCH
Developer Economics
Mobile Innovation Economics
Trends watch
The biggest, most global developer
research platform
Thought-leading economics for
managing disruption and reinventing
your business
Tracking app and developer trends
Tier-1 clients
Digital ecosystem experts
Media coverage
trusted by the top brand names in
mobile
Thought leaders in the economics of
ecosystems and telecoms in the
software era
Global media reach

7. 3600 expertise in DIGITAL ecosystems | EXAMPLES
client:
Major
platform
owner
project:
Ecosystem
benchmarking,
app
store
gap
analysis
and
opportunity
mapping
mobile
platforms
app
demand &
supply
client:
Tier-­‐1
telco
group
project:
Software
and
HTML5
strategy
7
ecosystem
strategy
client:
Tier-­‐1
handset
OEM
project:
Evaluate
Windows
Phone
platform
developer
ecosystems
developer
tools
client:
AT&T,
Nokia,
Mozila
project:
Custom
developer
research
(Developer
Economics)
client:
Tier-­‐1
handset
OEM
project:
Gap
and
competitive
analysis
of
developer
tools
for
launching
a
new
platform

8. TIER-1 Clients
trusted by the top brand names in mobile

9. HOW CAN HTML5 compete with Native?
September 2013
Produced by
In collaboration with

10. The ham & cheese report in numbers
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 5th Developer Economics survey
42
HTML5 tools mapped across Architectural frameworks,
UI frameworks, Gaming engines, Web wrappers, Webto-native converters, Native Javascript APIs;
32
developers, industry experts and tool vendors
interviewed, from Angular.js to FT

11. interviews with industry experts and tool vendors

12. Part 2
ROUTES TO MARKET

13. FUNDAMENTAL WEB TECHNOLOGIES
www
TCP/IP
HTML5
HTTP
HTML
CSS
JavaScript
• Haml
• Jade
• Etc.
• LESS
• SASS
• Etc.
• CoffeeScript
• TypeScript
• Etc.

14. ROUTES TO MARKET
How can a web developer reach the mobile market?
Input
Distribution
channel
Output
Mobile browser
HTML, CSS,
JavaScript
WWW
Web document
Web wrapper
HTML, CSS,
JavaScript
App store
Hybrid package
JavaScript
App store
Native package
HTML, CSS,
JavaScript
App store
Native package
Web-to-native converter
Native JavaScript API
Key players

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.

16. ROUTES TO MARKET: THE MOBILE BROWSER
API depth
Reach
Perfomance
Monetization
Ease of development
ü Apps/games run on the device’s browser, e.g. iOS Safari.
ü They are available on the web, discoverable through search engines, links &
advertisements.

17. ROUTES TO MARKET: THE WEB WRAPPER
API depth
Reach
Perfomance
Monetization
Ease of development
ü Apps/games run in a chromeless browser with access to the device’s hardware
APIs and services.
ü They are distributed via an app store.

18. ROUTES TO MARKET: THE WEB-TO-NATIVE CONVERTER
API depth
Reach
Perfomance
Monetization
Ease of development
ü Apps/games are compiled from JavaScript to native code with access to the
device’s hardware APIs and services.
ü They are distributed via an app store.

19. ROUTES TO MARKET: THE NATIVE JAVASCRIPT API
API depth
Reach
Perfomance
Monetization
Ease of development
ü Apps/games run on Operating Systems that expose their services and hardware
components through native JavaScript APIs.
ü They are distributed via an app store.

20. ROUTES TO MARKET: A COMPARISON TABLE
Performance
Mobile browser
Web wrapper
(hybrid app)
Web-to-native
converter
Native
JavaScript API
Reach
API depth
Monetization
Ease of
development

21. Part 3
UNDERLYING TECHNOLOGIES + TOOLS

22. Not all routes are equally popular
Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April – May 2013 | n = 2275≈

23. The MOBILE BROWSER involves A MULTITUDE of technologies
Mobile Browser Route
Architectural
Frameworks
Backbone.js
Angular.js
Ember
UI Frameworks
CSS
Bootstrap
Foundation
Topcoat
Gaming
Engines
JavaScript 2D
jQuery Mobile
Sencha Touch
KendoUI
3D

24. CHROME IS THE MOST POPULAR BROWSER FOR DEVELOPMENT
Chrome dev tools
65%
Firebug
39%
Firefox developer tools
31%
IE developer tools
18%
Other
9%
Firebug Lite
9%
Blackberry Web Inspector
8%
Opera Dragonfly
5%
0%
20%
40%
60%
% of developers using HTML5 mobile
Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April – May 2013 | n = 1334
80%
100%

25. Don’t you just love APPLE?
ü Apple does not allow external browser engines in their platform.
ü Every other browser in iOS is running Webview under the hood, the
same rendering engine that powers Apple’s Safari.
ü Non-Apple browsers only have access to a slower JavaScript engine
than Safari.

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

27. TOUGH COMPETITION IN ARCHITECTURAL FRAMEWORKS
100%
80%
60%
40%
20%
0%
Google trends
Github stars
External links
Company
Developers
License
Backbone
68%
100%
100%
Jeremy Ashkenas
10
Open Source
Ember
25%
50%
46%
Tilde
6
Open Source
Angular
100%
73%
77%
Google
10
Open Source

28. Architectural frameworks ARE moving into mobile apps
“We are definitely planning to support mobile apps. We
are also looking to implement web components in the
future.”
Peter Wagenet, Author of Ember.js, Tilde
“Touch events and mobile device support has already
landed in our experimental branch and we expect it to
move into production soon enough.”
Misko Hevery, Author of Angular.js, Google

29. BOOTSTRAP IS UNDISPUTED LEADER IN CSS UI FRAMEWORKS
100%
80%
60%
40%
20%
0%
Google trends
Github stars
External links
Company
Developers
License
Bootstrap
100%
100%
100%
Twitter
2
Open Source
Foundation
14%
23%
25%
Zurb
5
Open Source
Topcoat
0%
5%
1%
Adobe
6
Open Source
Junior
1%
3%
1%
Justin Martin
1
Open Source

30. JQUERY MOBILE IS UNDISPUTED LEADER IN JS UI FRAMEWORKS
100%
80%
60%
40%
20%
0%
jQuery Mobile
Google trends
Github stars
External links
Company
Developers
License
Kendo UI
Mobile
Zepto
Sencha Touch
EnyoJS
100%
100%
100%
15%
0%
2%
1%
62%
19%
18%
0%
10%
5%
19%
9%
jQuery
Foundation
Teleric
Thomas Fuchs
Sencha
LG
10
20
2
N/A
4
Open Source
Commercial
Open Source
Dual
Open Source

31. PHONEGAP IS UNDISPUTED LEADER IN THE WEB WRAPPER ROUTE
100%
80%
60%
40%
20%
0%
CocoonJS
Google trends
1%
External links
2%
Company
Ludei
Developers
15
License
Commercial
Sencha Cmd
Phonegap
20%
70%
Sencha
N/A
Commercial
99%
100%
Adobe
N/A
Open Source
Marmalade
MoSync
Reload
Intel XDK
1%
12%
Marmalade
N/A
Commercial
2%
6%
MoSync
23
Dual
2%
1%
Intel
25
Commercial

32. APPCELERATOR IS UNDISPUTED LEADER IN WEB-TO-NATIVE ROUTE
100%
Games focused
80%
60%
40%
20%
0%
Google trends
Gitbub stars
External links
Company
Developers
License
Appcelerator
100%
100%
98%
Appcelerator
22
Dual
Ejecta
2%
27%
6%
Dominic Szablewski
1
Open Source
Cocos2dx-html5
0%
41%
9%
Cocos2d
5
Open Source
Game Closure
6%
59%
2%
Game Closure
2
Dual

33. Percentage (%) of web developers
taking the Native JS API route
BLACKBERRY 10 IS LEADING THE NATIVE JAVASCRIPT API ROUTE
100.00%
80.00%
60.00%
40.00%
20.00%
0.00%
Mindshare
Google trends
External links
Company
License
BlackBerry 10
61.90%
17%
44%
Blackberry
Firefox OS
19.60%
73%
1%
Mozilla
Windows 8
34.00%
Commercial
Open Source
Commercial
91%
Microsoft
Tizen
5.40%
39%
2%
Tizen
Association
Dual
Chrome OS
21.20%
100%
Google
N/A

34. Constant supply of Games critical to a mobile ecosystem
Games account for 42% of total iPhone downloads and
41% of total Android downloads, hence games are very
important to a mobile ecosystem.
Android
iPhone
Games
41%
Games
42%
Apps
58%
Apps
59%

35. IMPACT & PIXI.JS ARE LEADING THE 2D GAMING ENGINES
100%
80%
60%
40%
20%
0%
Google trends
Github stars
External links
Company
Developers
License
Cocos2dxhtml5
ImpactJS
CraftyJS
Pixi.js
MelonJS
Isogenic
37%
30%
38%
100%
0%
100%
29%
41%
46%
31%
100%
2%
28%
27%
20%
0%
0%
18%
Dominic
Szablewski
1
Commercial
Louis
Stowasser
5
Open Source
Cocos2d
5
Open Source
Mathew
Groves
2
Open Source
MelonJS
3
Open Source
Irrelon
Software
1
Commercial

36. THREE.JS IS UNDISPUTED LEADER IN 3d gaming engines
100%
80%
60%
40%
20%
0%
PlayCanvas
Google trends
0%
Github stars
0%
External links
33%
Company
Developers
License
Goo Engine
0%
0%
17%
Babylon.js
0%
1%
0%
Gladius
0%
1%
1%
PhiloGL
0%
4%
16%
Three.js
100%
100%
100%
PlayCanvas
Goo
Technologies
David Catuhe
Mozilla
Sencha
Ricardo C.
Miguel
1
N/A
1
2
1
15
Commercial
Commercial
Open Source
Open Source
Open Source
Open Source

37. Part 4
HTML5 VS NATIVE (things to consider)

38. WHAT STOPS MOBILE DEVELOPERS FROM USING HTML5?
Performance issues
45.72%
APIs
37.34%
Limited access to hardware APIs
Difficulty to integrate native elements
29.18%
Can't create cutting edge UI/UX
Performance
28.30%
Lack of mature frameworks
Tools
20.53%
Steep learning curve for quality apps
Lack of large app stores
13.52%
3rd party APIs plugins are outdated
Education
13.53%
12.00%
Limited monetization options
Not as profitable as Native
Other
0.00%
Marketing
9.55%
6.00%
5.21%
20.00%
40.00%
Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April – May 2013 | n = 1518
60.00%
80.00%
100.00%

39. What DRIVES mobile developers TO using HTML5?
Source: Visionmobile, Developer Economics 2013 Q1 | Survey conducted in January 2013 | n = 1974

40. APIs ARE MORE IMPORTANT THAN LANGUAGES
“Learning a (programming) language nowadays is not
very hard, they all look the same… literally. What you
really have to learn is the API.”
Jean-Jacques Dubray , Founder of Convergence Modeling

41. app categories IN GOOGLE PLAY (us)
music & video
medical & fitness
utilities
business &
productivity tools
communications &
social networking
education &
reference
media
enterprise
maps, navigation &
lbs
entertainment
games
30,339 apps and games in Google Play – June 2013

42. THE IMPORTANCE OF APIs per app category IN GOOGLE PLAY (US)
API
app category
utilities
calendar
music & video
medical & fitness
media
bluetooth
maps, navigation & lbs
games
entertainment
battery
enterprise
education & reference
audio settings
communications & social
networking
business & productivity tools
0%
20%
40%
60%
80%
% of apps per category in Google Play US store
100%

43. THE IMPORTANCE OF APIs per app category IN GOOGLE PLAY (US)
API
app category
utilities
geolocation
music & video
medical & fitness
media
filesystem
maps, navigation & lbs
games
entertainment
contacts
enterprise
education & reference
camera
communications & social
networking
business & productivity tools
0%
20%
40%
60%
80%
% of apps per category in Google Play US store
100%

44. THE IMPORTANCE OF APIs per app category IN GOOGLE PLAY (US)
API
app category
utilities
power management
music & video
medical & fitness
media
nfc
maps, navigation & lbs
games
entertainment
network
enterprise
education & reference
mic
communications & social
networking
business & productivity tools
0%
20%
40%
60%
80%
100%
% of apps per category in Google Play US store

45. THE IMPORTANCE OF APIs per app category IN GOOGLE PLAY (US)
API
app category
utilities
wifi
music & video
medical & fitness
media
vibration
maps, navigation & lbs
games
entertainment
telephony
enterprise
education & reference
sms
communications & social
networking
business & productivity tools
0%
20%
40%
60%
80%
% of apps per category in Google Play US store
100%

46. WHICH ARE THE MOST USED APIs IN GOOGLE PLAY (US)?
90%
network
filesystem
64%
power management
33%
wifi
29%
vibration
28%
geolocation
26%
camera
10%
0%
20%
40%
60%
80%
% of Android apps in Google Play US store using the specific API
100%

47. 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.
37.22%
Mobile browser
Web wrapper
48.62%
63.41%
Web-to-native converter
Native JavaScript API
0.00%
97.76%
20.00%
40.00%
60.00%
80.00%
% of Android apps in Google Play US store
100.00%

48. HTML5 API coverage, for each app category
Mobile browser
Business &
productivity tools
Communications &
social networking
Education &
reference
Enterprise
Entertainment
Games
Web wrapper
Web-to-native
converter
Native
JavaScript API

49. HTML5 API coverage, for each app category
Mobile browser
Maps, navigation &
LBS
Media
Medical & fitness
Music & video
Utilities
Total
Web wrapper
Web-to-native
converter
Native
JavaScript API

50. WHICH ARE the most important APIs to fix?
Which API, if implemented, would make the greatest difference in the
number of android apps, for each route to market?
WiFi
Power
management
Power
management
21%
13%
Calendar
12%
1.4%
Mobile browser
Web wrapper
Web-to-native
converter
Native
JavaScript API

51. PR
CR
LCWD
Standardization Status
the gaps between W3C APIs and browser adoption
Over-standardised
Under-standardised
WD
ED
None
Number of adopting browsers
0
1
§ ED: Early Draft
§ WD: Working Draft
2
3
4
§ LCWD: Last Candidate
Working Draft
5
6
7
§ CR: Candidate Release
§ PR: Production Release

52. PR
CR
LCWD
WD
Standardization Status
the gaps between W3C APIs and browser adoption
◦ Geolocation
◦ Vibration
◦ Battery
◦ Compass
◦ Network
◦ Microphone
◦ Camera
◦ Notifications
◦ SMS
◦ Calendar
◦ Filesystem
◦ Telephony
◦ Contacts
◦ NFC ◦ WiFi
None ◦ Power management
◦ Audio Settings
◦ Bluetooth
ED
0
1
§ ED: Early Draft
§ WD: Working Draft
◦ Motion
Number of adopting browsers
2
3
4
§ LCWD: Last Candidate
Working Draft
5
6
7
§ CR: Candidate Release
§ PR: Production Release

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

54. 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 5x slower than native. Asm.js promises approx. 1.3x 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.

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

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

57. HTML5 GAPS: DEVELOPMENT TOOLS
“The biggest issue for HTML5 is the
maturity of tools.”
Robert Shilston, Director of FT labs, Financial Times
Existing tools are not
good enough
“Right now, HTML5 is missing a toolchain,
from prototyping to publishing […] it lacks
the one-package onboarding that comes
with Native SDKs.”
HTML5 is missing a
toolchain, not just
individual tools
Andrea Trasatti, Developer Evangelist, Nokia

58. 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 HTML5’s
capabilities

59. Part 5
QUICK SUMMARY

60. SUMMARY
ü There are 4 routes to market, the most popular being the
mobile browser;
ü The mobile browser can only produce 37% of Android
apps in Google Play (US);
ü The most important APIs in Google Play (US), currently
missing from HTML5, are WiFi and Power Management;
ü JavaScript performance is mostly a matter of tools and
the ability to measure and improve;
ü Browser politics play a key role to web development;

61. MY MESSAGE FOR YOU TODAY
1. There is no one solution to everything. You are @&#Y@#
software developers – Think! You know the options. Make
the right choice;
2. Try to push Vendors into doing the right thing. Support
the ones you have to support. Our choices echo to eternity.
3. Fly you fools.

62. Get your free copy at
www.DeveloperEconomics.com
Part 6
Questions