State of the Mobile Browser

State of the Mobile Browser google.com/+PaulKinlan goo.gl/3LyMW

Overview

> 1 Billion users have a modern browser.

Every device has to have a "decent" browser.

The browser is still the most used application.

Rounded Corners

Naive Look

What is your mobile traffic?

> 50% "We now have more users engaging with Google+
from mobile than desktop." - IO 2012

Mobile The important bits

2 THINGS

Performance Where do you look?

Developers look at the .... Network (time to glass)

I also think UI Jank (time to frustration)

Lumpiness = Less Engagement

They have to hack it up like crazy Its no
longer your father's HTML. • Just a <body /> • Busting DOM Trees into iframes to create layers http://goo.gl/P90PK

Where are the bottlenecks? • Javascript? • DOM manipulation? •
Paint?

It's not just the JS + Re-Layouts. + Re-paints +
Decode time X X

Go home and measure paulkinlan@google.com

Inconsistencies

Wot Consistent Platform?

100% Support Mostly boring stuff

Media Queries 100% onmobile.iwanttouse.com/#css-mediaqueries

Geolocation 86% http://onmobile.iwanttouse.com/#geolocation

Offline http://onmobile.iwanttouse.com/#offline-apps 86%

Native developers build online in

Web developers build offline in

Adding offline is a lot harder than online

Camera Access <input type=file accept=image/jpeg capture> Demo http://jsbin.com/avawaj/1 86%

SVG 80% It would be 100% if not for Android
< 3

Flex Box It would be 100% if not for Android
< 3 80%

WebSQL Database 86%

IndexedDB 3% Reaching 3% of the web you might as
well use any API you want....

Thinking about storage in terms of API's is wrong

WebSockets 86% On mobile use wss (secure sockets)

Device Orientation onmobile.iwanttouse.com/#deviceorientation 67% window.ondeviceorientation = function(event) { // process
event.alpha, event.beta and event.gamma }; jsbin.com/ofeces/1

FileReader 66%

requestAnimationFrame 44%

Web Audio onmobile.iwanttouse.com/#audio-api 40%

The following might look depressing

But it's really exciting

Shadow DOM onmobile.iwanttouse.com/#shadowdom 3%

getUserMedia onmobile.iwanttouse.com/#stream 2% jsbin.com/iyekuc/3/quiet navigator.getUserMedia( {audio:true, video: true}, function(stream) {
videoEl.src = URL.createObjectURL(stream); });

WebRTC onmobile.iwanttouse.com/#streams 1% apprtc-m.appspot.com

WebGL http://onmobile.iwanttouse.com/#webgl 1% Demo: dungeonfury.playcanvas.com

CSS Filters http://onmobile.iwanttouse.com/#css-filters 43%? <style> img { -webkit-filter: blur(30px); }
</style> http://jsbin.com/orekeb/2/

CSS Custom Shaders 0%

The mobile web is a rich platform

Go and do moar Awesome

State of the Mobile Browser

State of the Mobile Browser

More Decks by Paul Kinlan

Other Decks in Programming

Featured

Transcript