Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State of the Mobile Browser

Avatar for Paul Kinlan 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.
Avatar for Paul Kinlan

Paul Kinlan

April 25, 2013
Tweet

More Decks by Paul Kinlan

See All by Paul Kinlan
[this.javascript] State of Chrome
Avatar for Paul Kinlan paulkinlan
0
140
Progressive Web Apps in 10 minutes - Google for India
Avatar for Paul Kinlan paulkinlan
2
300
Be instant and engaging on the mobile web - Google Mobile for India
Avatar for Paul Kinlan paulkinlan
4
320
The future of the web on mobile? - Coldfront conf
Avatar for Paul Kinlan paulkinlan
5
56k
This is the Web Platform
Avatar for Paul Kinlan paulkinlan
5
65k
The Next Evolution of Chrome Apps - Devoxx 2012
Avatar for Paul Kinlan paulkinlan
3
400
Building Web Apps of the future. Tomorrow, today and yesterday.
Avatar for Paul Kinlan paulkinlan
32
7.3k

Other Decks in Programming

See All in Programming
XSLTで作るBrainfuck処理系
Avatar for MakKi makki_d
0
210
型付きアクターモデルがもたらす分散シミュレーションの未来
Avatar for Takatomo Torigoe piyo7
0
800
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
420
CursorはMCPを使った方が良いぞ
Avatar for taiga taigakono
0
150
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
280
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
1
200
A2A プロトコルを試してみる
Avatar for azukiazusa azukiazusa1
2
970
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
Avatar for Yuki Nakata chikuwait chikuwait
0
390
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
Avatar for どすこい daisuketakeda
1
120
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
Avatar for 이가은 gaeun5744
3
300
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
250

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
Done Done
Avatar for chrislema chrislema
184
16k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.4k

Transcript

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

  2. Overview

  3. > 1 Billion users have a modern browser.

  4. Every device has to have a "decent" browser.

  5. The browser is still the most used application.

  6. None

  7. Rounded Corners

  8. Naive Look

  9. What is your mobile traffic?

  10. None
  11. None
  12. None

  13. > 50% "We now have more users engaging with Google+

    from mobile than desktop." - IO 2012

  14. Mobile The important bits

  15. 2 THINGS

  16. Performance Where do you look?

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

  18. I also think UI Jank (time to frustration)

  19. Lumpiness = Less Engagement

  20. None

  21. 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

  22. Where are the bottlenecks? • Javascript? • DOM manipulation? •

    Paint?

  23. It's not just the JS + Re-Layouts. + Re-paints +

    Decode time X X
  24. None
  25. None

  26. Go home and measure [email protected]

  27. Inconsistencies

  28. Wot Consistent Platform?

  29. 100% Support Mostly boring stuff

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

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

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

  33. Native developers build online in

  34. Web developers build offline in

  35. Adding offline is a lot harder than online

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

  37. SVG 80% It would be 100% if not for Android

    < 3

  38. Flex Box It would be 100% if not for Android

    < 3 80%

  39. WebSQL Database 86%

  40. IndexedDB 3% Reaching 3% of the web you might as

    well use any API you want....

  41. Thinking about storage in terms of API's is wrong

  42. WebSockets 86% On mobile use wss (secure sockets)

  43. None

  44. Device Orientation onmobile.iwanttouse.com/#deviceorientation 67% window.ondeviceorientation = function(event) { // process

    event.alpha, event.beta and event.gamma }; jsbin.com/ofeces/1

  45. FileReader 66%

  46. requestAnimationFrame 44%

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

  48. The following might look depressing

  49. But it's really exciting

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

  51. getUserMedia onmobile.iwanttouse.com/#stream 2% jsbin.com/iyekuc/3/quiet navigator.getUserMedia( {audio:true, video: true}, function(stream) {

    videoEl.src = URL.createObjectURL(stream); });

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

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

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

    </style> http://jsbin.com/orekeb/2/

  55. CSS Custom Shaders 0%

  56. The mobile web is a rich platform

  57. Go and do moar Awesome