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

State of the Mobile Browser

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Paul Kinlan Paul Kinlan
April 25, 2013
Programming
3
230

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
150
Progressive Web Apps in 10 minutes - Google for India
Avatar for Paul Kinlan paulkinlan
2
320
Be instant and engaging on the mobile web - Google Mobile for India
Avatar for Paul Kinlan paulkinlan
4
360
The future of the web on mobile? - Coldfront conf
Avatar for Paul Kinlan paulkinlan
5
57k
This is the Web Platform
Avatar for Paul Kinlan paulkinlan
5
66k
The Next Evolution of Chrome Apps - Devoxx 2012
Avatar for Paul Kinlan paulkinlan
3
410
Building Web Apps of the future. Tomorrow, today and yesterday.
Avatar for Paul Kinlan paulkinlan
32
7.4k

Other Decks in Programming

See All in Programming
ふん…おもしれぇ Parser。RubyKaigi 行ってやるぜ
Avatar for Kai aki_pin0
0
120
米国のサイバーセキュリティタイムラインと見る Goの暗号パッケージの進化
Avatar for tom twinkle tomtwinkle
1
340
AIコーディングの理想と現実 2026 | AI Coding: Expectations vs. Reality 2026
Avatar for Tomohisa Takaoka tomohisa
0
780
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜 / Understanding nil in Go Interface Representation and Why nil != nil
Avatar for kuro kuro_kurorrr
3
1.5k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
100
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
110
atmaCup #23でAIコーディングを活用した話
Avatar for ML_Bear ml_bear
4
710
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
190
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
Avatar for nnaka2992 nnaka2992
1
230
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
540
文字コードの話
Avatar for Masaki Hara qnighy
43
16k
TipKitTips
Avatar for Ryomm ktcryomm
0
120

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
2
270
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
660
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.3k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
2.6k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
130
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k

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