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
310
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
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
Avatar for Masayuki Izumi izumin5210
12
6.3k
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
Avatar for kasacchiful kasacchiful
0
180
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
Avatar for Kei Oyama oyamakei
0
1k
生成AI時代のフルスタック開発
Avatar for Kenn Ejima kenn
10
2.7k
型安全なDrag and Dropの設計を考える
Avatar for yudppp yudppp
5
650
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
Avatar for nrs nrslib
5
890
バリデーションライブラリ徹底比較
Avatar for Yuta Tanaka nayuta999999
1
410
Feature Flag 自動お掃除のための TypeScript プログラム変換
Avatar for azarashi azrsh
PRO
4
620
鯛変だったRubyKaigi 2025 ── それでも楽しかった！
Avatar for なっちゃん pndcat
0
130
推論された型の移植性エラーTS2742に挑む
Avatar for teamLab teamlab
PRO
0
150
「MCPを使ってる人」が より詳しくなるための解説
Avatar for Kota-Yamaguchi yamaguchidesu
0
570
iOSアプリ開発もLLMで自動運転する
Avatar for Yuya Hirayama hiragram
6
2.1k

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
123
52k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Designing for Performance
Avatar for Lara Hogan lara
608
69k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
840
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
34
2.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.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