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
200
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
130
Progressive Web Apps in 10 minutes - Google for India
paulkinlan
2
270
Be instant and engaging on the mobile web - Google Mobile for India
paulkinlan
4
280
The future of the web on mobile? - Coldfront conf
paulkinlan
5
56k
This is the Web Platform
paulkinlan
5
64k
The Next Evolution of Chrome Apps - Devoxx 2012
paulkinlan
3
390
Building Web Apps of the future. Tomorrow, today and yesterday.
paulkinlan
32
7.2k
Other Decks in Programming
See All in Programming
CSC509 Lecture 09
javiergs
PRO
0
140
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
230
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
距離関数を極める! / SESSIONS 2024
gam0022
0
280
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
140
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
A designer walks into a library…
pauljervisheath
204
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
Facilitating Awesome Meetings
lara
50
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
A better future with KSS
kneath
238
17k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Done Done
chrislema
181
16k
RailsConf 2023
tenderlove
29
900
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
GitHub's CSS Performance
jonrohan
1030
460k
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