"How Can Web Devs Reach the Mobile Market?" by Dimitris Michalakos, Web Technology Lead,...

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


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.


API depth

Monetization


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.


API depth

Monetization


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

Google

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


games

entertainment

enterprise


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


games

entertainment

enterprise




API app category


0% 20% 40% 60% 80% 100%

mic

network

nfc

power management utilities

music & video

medical & fitness

media


games

entertainment

enterprise




API app category


0% 20% 40% 60% 80% 100%

sms

telephony

vibration

wifi

utilities

music & video

medical & fitness

media


games

entertainment

enterprise




API app category


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%


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


Business & productivity tools

Communications & social networking

Education & reference

Enterprise

Entertainment

Games

HTML5 API coverage, for each app category



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?



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

"How Can Web Devs Reach the Mobile Market?" by Dimitris Michalakos, Web Technology Lead,...

Technology

Transcript of "How Can Web Devs Reach the Mobile Market?" by Dimitris Michalakos, Web Technology Lead,...