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
Part 1 introduction, WHO AM I, bla bla bla
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
3600 expertise in DIGITAL ecosystems | EXAMPLES
mobile platforms
developer ecosystems
developer tools
ecosystem strategy
app demand &
supply
client: Tier-‐1 handset OEM project: Evaluate Windows Phone platform
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
client: Tier-‐1 telco group project: Software and HTML5 strategy
client: Major platform owner project: Ecosystem benchmarking, app store gap analysis and opportunity mapping
7
TIER-1 Clients trusted by the top brand names in mobile
HOW CAN HTML5 compete with Native?
September 2013 Produced by In collaboration with
The ham & cheese report in numbers
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, Web-to-native converters, Native Javascript APIs;
32 developers, industry experts and tool vendors interviewed, from Angular.js to FT
METHODOLOGY: HOW WE BACKED OUR RESEARCH
interviews with industry experts and tool vendors
Part 2 ROUTES TO MARKET
FUNDAMENTAL WEB TECHNOLOGIES
www
HTML5 HTTP TCP/IP
JavaScript HTML CSS
• Haml • Jade • Etc.
• LESS • SASS • Etc.
• CoffeeScript • TypeScript • Etc.
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
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.
API depth
Monetization
Ease of development Perfomance
Reach
ü Apps/games run on the device’s browser, e.g. iOS Safari. ü They are available on the web, discoverable through search engines, links &
advertisements.
ROUTES TO MARKET: THE MOBILE BROWSER
ROUTES TO MARKET: THE WEB WRAPPER
ü Apps/games run in a chromeless browser with access to the device’s hardware APIs and services.
ü They are distributed via an app store.
API depth
Monetization
Ease of development Perfomance
Reach
ROUTES TO MARKET: THE WEB-TO-NATIVE CONVERTER
ü 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.
API depth
Monetization
Ease of development Perfomance
Reach
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
ROUTES TO MARKET: A COMPARISON TABLE
Performance Reach API depth Monetization Ease of development
Mobile browser
Web wrapper (hybrid app)
Web-to-native converter
Native JavaScript API
Part 3 UNDERLYING TECHNOLOGIES + TOOLS
Not all routes are equally popular
Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April – May 2013 | n = 2275≈
The MOBILE BROWSER involves A MULTITUDE of technologies
Mobile Browser Route
Architectural Frameworks
UI Frameworks Gaming Engines
CSS JavaScript 2D 3D Backbone.js Angular.js Ember
Bootstrap Foundation Topcoat
jQuery Mobile Sencha Touch KendoUI
CHROME IS THE MOST POPULAR BROWSER FOR DEVELOPMENT
5%
8%
9%
9%
18%
31%
39%
65%
0% 20% 40% 60% 80% 100%
Opera Dragonfly
Blackberry Web Inspector
Firebug Lite
Other
IE developer tools
Firefox developer tools
Firebug
Chrome dev tools
% of developers using HTML5 mobile
Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April – May 2013 | n = 1334
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.
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
Backbone Ember Angular Google trends 68% 25% 100% Github stars 100% 50% 73% External links 100% 46% 77%
0%
20%
40%
60%
80%
100%
TOUGH COMPETITION IN ARCHITECTURAL FRAMEWORKS
Company Jeremy Ashkenas Tilde Google Developers 10 6 10 License Open Source Open Source Open Source
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
Bootstrap Foundation Topcoat Junior Google trends 100% 14% 0% 1% Github stars 100% 23% 5% 3% External links 100% 25% 1% 1%
0%
20%
40%
60%
80%
100%
BOOTSTRAP IS UNDISPUTED LEADER IN CSS UI FRAMEWORKS
Company Twitter Zurb Adobe Justin Martin Developers 2 5 6 1 License Open Source Open Source Open Source Open Source
jQuery Mobile Kendo UI Mobile Zepto Sencha Touch EnyoJS
Google trends 100% 15% 1% 18% 5% Github stars 100% 0% 62% 0% 19% External links 100% 2% 19% 10% 9%
0%
20%
40%
60%
80%
100%
JQUERY MOBILE IS UNDISPUTED LEADER IN JS UI FRAMEWORKS
Company jQuery Foundation Teleric Thomas Fuchs Sencha LG
Developers 10 20 2 N/A 4
License Open Source Commercial Open Source Dual Open Source
CocoonJS Sencha Cmd Phonegap Marmalade MoSync Reload Intel XDK
Google trends 1% 20% 99% 1% 2% 2% External links 2% 70% 100% 12% 6% 1%
0%
20%
40%
60%
80%
100%
PHONEGAP IS UNDISPUTED LEADER IN THE WEB WRAPPER ROUTE
Company Ludei Sencha Adobe Marmalade MoSync Intel Developers 15 N/A N/A N/A 23 25 License Commercial Commercial Open Source Commercial Dual Commercial
Appcelerator Ejecta Cocos2dx-html5 Game Closure Google trends 100% 2% 0% 6% Gitbub stars 100% 27% 41% 59% External links 98% 6% 9% 2%
0%
20%
40%
60%
80%
100%
APPCELERATOR IS UNDISPUTED LEADER IN WEB-TO-NATIVE ROUTE
Company Appcelerator Dominic Szablewski Cocos2d Game Closure Developers 22 1 5 2 License Dual Open Source Open Source Dual
Games focused
BlackBerry 10 Firefox OS Windows 8 Tizen Chrome OS Mindshare 61.90% 19.60% 34.00% 5.40% 21.20% Google trends 17% 73% 39% External links 44% 1% 91% 2% 100%
0.00%
20.00%
40.00%
60.00%
80.00%
100.00%
Per
cent
age
(%)
of w
eb d
evel
oper
s ta
king
the
Nat
ive
JS A
PI
rout
e
BLACKBERRY 10 IS LEADING THE NATIVE JAVASCRIPT API ROUTE
Company Blackberry Mozilla Microsoft Tizen Association
License Commercial Open Source Commercial Dual N/A
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.
Games 42%
Apps 58%
iPhone
Games 41%
Apps 59%
Android
Cocos2dx-html5 ImpactJS CraftyJS Pixi.js MelonJS Isogenic
Google trends 37% 100% 29% 31% 28% 0% Github stars 30% 0% 41% 100% 27% 0% External links 38% 100% 46% 2% 20% 18%
0%
20%
40%
60%
80%
100%
IMPACT & PIXI.JS ARE LEADING THE 2D GAMING ENGINES
Company Cocos2d Dominic Szablewski
Louis Stowasser
Mathew Groves MelonJS Irrelon
Software Developers 5 1 5 2 3 1 License Open Source Commercial Open Source Open Source Open Source Commercial
THREE.JS IS UNDISPUTED LEADER IN 3d gaming engines
PlayCanvas Goo Engine Babylon.js Gladius PhiloGL Three.js Google trends 0% 0% 0% 0% 0% 100% Github stars 0% 0% 1% 1% 4% 100% External links 33% 17% 0% 1% 16% 100%
0%
20%
40%
60%
80%
100%
Company PlayCanvas Goo Technologies David Catuhe Mozilla Sencha Ricardo C.
Miguel Developers 1 N/A 1 2 1 15 License Commercial Commercial Open Source Open Source Open Source Open Source
Part 4 HTML5 VS NATIVE (things to consider)
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
What DRIVES mobile developers TO using HTML5?
Source: Visionmobile, Developer Economics 2013 Q1 | Survey conducted in January 2013 | n = 1974
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
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
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
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)
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)
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)
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
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
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
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
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?
Mobile browser Web wrapper Web-to-native converter
Native JavaScript API
13%
Power management Power
management
WiFi
Calendar
12%
21%
1.4%
the gaps between W3C APIs and browser adoption
Number of adopting browsers
0 1 2 3 4 5 6 7
ED
WD
CR
PR
Stan
dard
izat
ion
Stat
us
None
LCWD
§ ED: Early Draft § WD: Working Draft
§ LCWD: Last Candidate Working Draft
§ CR: Candidate Release § PR: Production Release
Over-standardised
Under-standardised
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
Stan
dard
izat
ion
Stat
us
None
LCWD
§ ED: Early Draft § WD: Working Draft
§ LCWD: Last Candidate Working Draft
§ CR: Candidate Release § PR: Production Release
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
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.
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
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
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
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
Part 5 QUICK SUMMARY
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;
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.
Get your free copy at www.DeveloperEconomics.com
Part 6 Questions
Top Related