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
210
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
290
Be instant and engaging on the mobile web - Google Mobile for India
paulkinlan
4
300
The future of the web on mobile? - Coldfront conf
paulkinlan
5
56k
This is the Web Platform
paulkinlan
5
65k
The Next Evolution of Chrome Apps - Devoxx 2012
paulkinlan
3
400
Building Web Apps of the future. Tomorrow, today and yesterday.
paulkinlan
32
7.3k
Other Decks in Programming
See All in Programming
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
2
420
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
160
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
140
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
220
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
PEPCは何を変えようとしていたのか
ken7253
2
150
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
910
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
It's Worth the Effort
3n
184
28k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Docker and Python
trallard
44
3.3k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A Philosophy of Restraint
colly
203
16k
Embracing the Ebb and Flow
colly
84
4.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The World Runs on Bad Software
bkeepers
PRO
67
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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