"How Can Web Devs Reach the Mobile Market?" by Dimitris Michalakos, Web Technology Lead, VisionMobile
1 like•872 views
The document analyzes the challenges and opportunities for web developers in the mobile market, emphasizing routes to market, underlying technologies, and the competitive landscape between HTML5 and native applications. It presents data from extensive research including app usage, developer surveys, and trends in mobile ecosystems. Key considerations include performance, ease of development, and access to hardware APIs, along with insights into popular tools and frameworks in the industry.
![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](https://image.slidesharecdn.com/eurapp-howcanwebdevsreachthemobilemarket-131120100358-phpapp02/85/How-Can-Web-Devs-Reach-the-Mobile-Market-by-Dimitris-Michalakos-Web-Technology-Lead-VisionMobile-57-320.jpg)
"How Can Web Devs Reach the Mobile Market?" by Dimitris Michalakos, Web Technology Lead, VisionMobile
- 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
- 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