Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
State of the Mobile Browser
Search
Paul Kinlan
April 25, 2013
Programming
3
190
State of the Mobile Browser
What is the state of the Mobile Browser? Find out in this presentation for State of the Browser.
Paul Kinlan
April 25, 2013
Tweet
Share
More Decks by Paul Kinlan
See All by Paul Kinlan
[this.javascript] State of Chrome
paulkinlan
0
110
Progressive Web Apps in 10 minutes - Google for India
paulkinlan
2
230
Be instant and engaging on the mobile web - Google Mobile for India
paulkinlan
4
250
The future of the web on mobile? - Coldfront conf
paulkinlan
5
55k
This is the Web Platform
paulkinlan
5
63k
The Next Evolution of Chrome Apps - Devoxx 2012
paulkinlan
3
380
Building Web Apps of the future. Tomorrow, today and yesterday.
paulkinlan
32
7.1k
Other Decks in Programming
See All in Programming
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
370
使ってみよう Azure AI Document Intelligence
kosmosebi
2
330
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
380
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.2k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.1k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
2 週間で Twitter Bot を作ってみた
contour_gara
0
640
Node.js v22 で変わること
yosuke_furukawa
PRO
10
3.6k
Fast JSX: Don't clone props object #28768
yossydev
1
140
SIMD Parallel Programming with the Vector API
josepaumard
0
200
Elm 0.19.0 Changes
bkuhlmann
0
490
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Bash Introduction
62gerente
604
210k
Designing for Performance
lara
601
67k
Adopting Sorbet at Scale
ufuk
68
8.6k
Designing for humans not robots
tammielis
248
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Design by the Numbers
sachag
274
18k
Designing Experiences People Love
moore
136
23k
Making Projects Easy
brettharned
108
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Transcript
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.
None
Rounded Corners
Naive Look
What is your mobile traffic?
None
None
None
> 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
None
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
None
None
Go home and measure
[email protected]
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)
None
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