How Can HTML Compete with Native?

22,329 views
21,536 views

Published on

A research report by VisionMobile, in collaboration with Telefonica, exploring HTML5 development and investigating its pros and cons versus native development. There is a lot of discussion around HTML5 vs. Native, and it’s usually polarized. But most people express opinion, rather than facts. In this report, our aim is to answer some of the key questions with hard data.
Download the full report at http://www.developereconomics.com/downloads/can-html5-compete-native/

Published in: Technology, Design
1 Comment
30 Likes
Statistics
Notes
  • Thanks for the report.

    I can offer two perspectives on how HTML5 can compete with Native:

    1) Technology
    Try this HTML5 game on your mobile device: bit.ly/banana-jungle

    It runs at 60 FPS on modern iOS, Android and Windows Phone devices. We've come a long way from 2009, when HTML5 was first announced. It's 2014, and everything works great. Major players like Apple and Google are the key drivers in adopting this.

    2) Cost of development and distribution
    The cost of developing and launching a native app is ~ 20,000 USD. With HTML, it's possible to reduce it to around 5,000 USD.

    I wrote a blog post detailing this:
    www.marketjs.com/blog/would-a-brand-spend-$20000-to-acquire-10000-users

    To summarize, businesses and brands are increasingly expecting cross-platform technologies at affordable costs, and HTML5 is able to meet that expectation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
22,329
On SlideShare
0
From Embeds
0
Number of Embeds
5,919
Actions
Shares
0
Downloads
0
Comments
1
Likes
30
Embeds 0
No embeds

No notes for slide

How Can HTML Compete with Native?

  1. HOW CAN HTML5 compete with Native? September 2013 Page 1 Produced by In collaboration with
  2. Page 2
  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 3
  4. <Part 1 /> EXEC SUMMARY Page 4
  5. HOW CAN HTML5 compete with Native? There is too much F.U.D, too many opinionated rants on how HTML5 apps fair 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 5
  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 6
  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% of Android apps (US) cannot be implemented via the mobile browser due to lack of APIs. + Page 7 21% 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.
  8. HOW CAN HTML5 compete with Native? 39% 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). 49% of Android US apps can be developed using hybrid tools, 63% using web to native converters, and 98% using native JavaScript APIs. Page 8
  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 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 (Google) to Financial Times Page 9
  10. <Part 2 /> THE LANDSCAPE of HTML5 tech Page 10
  11. HTML5 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 Page 11 Key players
  12. NOT ALL ROUTES TO MARKET ARE EQUAL 61% of HTML5 mobile developers go direct to browser Page 12 Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April – May 2013 | n = 2275
  13. KEY PLAYERS IN HTML5 tech What are the most important HTML5 development tools? Architectural frameworks JavaScript UI frameworks Web wrappers Web-to-Native Converters Page 13 CSS UI frameworks Native Javascript APIs 2D Gaming Engines 3D Gaming Engines
  14. 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 14
  15. 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. Page 15
  16. 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. Page 16
  17. 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. Page 17
  18. 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. Page 18
  19. <Part 3 /> HTML5 VS NATIVE WHAT ARE THE GAPS? Page 19
  20. 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 20
  21. 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% Page 21 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%
  22. What DRIVES mobile developers TO using HTML5? Page 22 Source: Visionmobile, Developer Economics 2013 Q1 | Survey conducted in January 2013 | n = 1974
  23. ANALYZING API USAGE: Android vs HTML5 APPS The story of an app store analysis in terms of app categories and APIs 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. Page 23
  24. 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 Page 24
  25. 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% Page 25 20% 40% 60% 80% % of apps per category in Google Play US store 100%
  26. 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% Page 26 20% 40% 60% 80% % of apps per category in Google Play US store 100%
  27. 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% Page 27 20% 40% 60% 80% 100% % of apps per category in Google Play US store
  28. 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% Page 28 20% 40% 60% 80% % of apps per category in Google Play US store 100%
  29. 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 Page 29 100%
  30. 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 Page 30 100.00%
  31. 61% of HTML5 DEVELOPERS ARE CONSTRAINED TO 37% OF APPS Page 31 Source: Visionmobile, Developer Economics 2013 Q3 | Survey conducted in April – May 2013 | n = 2275
  32. HTML5 API coverage, for each app category Mobile browser Business & productivity tools Communications & social networking Education & reference Enterprise Entertainment Games Page 32 Web wrapper Web-to-native converter Native JavaScript API
  33. HTML5 API coverage, for each app category Mobile browser Maps, navigation & LBS Media Medical & fitness Music & video Utilities Total Page 33 Web wrapper Web-to-native converter Native JavaScript API
  34. 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? WiFi Power management Power management 21% 13% Calendar 12% 1.4% Mobile browser Page 34 Web wrapper Web-to-native converter Native JavaScript API
  35. 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 Page 35 2 3 4 "  LCWD: Last Candidate Working Draft 5 6 7 "  CR: Candidate Release "  PR: Production Release
  36. 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 Page 36 ◦Motion Number of adopting browsers 2 3 4 "  LCWD: Last Candidate Working Draft 5 6 7 "  CR: Candidate Release "  PR: Production Release
  37. HTML5 GAPS: Performance IS THE MOST COMMON COMPLAINT “JavaScript will be always slower due to it’s 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 Page 37 HTML5 is slower by definition Performance as a value proposition for tool vendors Developers choose Native SDKs for performance reasons
  38. 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 38
  39. 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 Page 39 Use developers as lobbyists
  40. HTML5 GAPS: DEVELOPMENT TOOLS “Hearing Mark Zuckenberg 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 Page 40 Profiling and debugging tools are missing from HTML5
  41. 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 Page 41
  42. 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 Page 42 Need to educate the market on HTML5’s capabilities
  43. <Part 4 /> INSIGHTS & RECOMMENDATIONS Page 43
  44. Power management and wifi APIs: BIGGEST CHANGE DRIVERS 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. Page 44
  45. PACKAGED WEB APPS: fragmentation delays adoption 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. Page 45
  46. Device identity API: A BETTER SOLUTION TO COOKIES !  Identity is critical to advertising and search business models. !  It’s 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. Page 46
  47. THE HTML5 BRAND suffers from F.U.D. 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 Page 47
  48. HTML5 TOOLS: A CAR without a Dashboard 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. Page 48
  49. BROWSER POLITICS 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. Page 49
  50. Thanks for listening! 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.com12 November 2010 Updated: Page 50 Copyright VisionMobile 2011
  51. <APPENDIX> Who is VisionMobile? Page 51
  52. 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 Page 52

×