State of the Mobile Browser

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Overview

Slide 3

Slide 3 text

> 1 Billion users have a modern browser.

Slide 4

Slide 4 text

Every device has to have a "decent" browser.

Slide 5

Slide 5 text

The browser is still the most used application.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Rounded Corners

Slide 8

Slide 8 text

Naive Look

Slide 9

Slide 9 text

What is your mobile traffic?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Mobile The important bits

Slide 15

Slide 15 text

2 THINGS

Slide 16

Slide 16 text

Performance Where do you look?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

I also think UI Jank (time to frustration)

Slide 19

Slide 19 text

Lumpiness = Less Engagement

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

They have to hack it up like crazy Its no longer your father's HTML. ● Just a

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Go home and measure [email protected]

Slide 27

Slide 27 text

Inconsistencies

Slide 28

Slide 28 text

Wot Consistent Platform?

Slide 29

Slide 29 text

100% Support Mostly boring stuff

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Native developers build online in

Slide 34

Slide 34 text

Web developers build offline in

Slide 35

Slide 35 text

Adding offline is a lot harder than online

Slide 36

Slide 36 text

Camera Access Demo http://jsbin.com/avawaj/1 86%

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

WebSQL Database 86%

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Thinking about storage in terms of API's is wrong

Slide 42

Slide 42 text

WebSockets 86% On mobile use wss (secure sockets)

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

FileReader 66%

Slide 46

Slide 46 text

requestAnimationFrame 44%

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

The following might look depressing

Slide 49

Slide 49 text

But it's really exciting

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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