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

State of the Mobile Browser

B590f0fb3aba34aee093cfa1406eac0b?s=47 Paul Kinlan
April 25, 2013
Programming
3
160

State of the Mobile Browser

What is the state of the Mobile Browser? Find out in this presentation for State of the Browser.

B590f0fb3aba34aee093cfa1406eac0b?s=128

Paul Kinlan

April 25, 2013
Tweet

More Decks by Paul Kinlan

See All by Paul Kinlan
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
0
65
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
2
190
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
4
200
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
5
52k
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
5
58k
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
3
350
B590f0fb3aba34aee093cfa1406eac0b?s=48 paulkinlan
32
6.7k

Other Decks in Programming

See All in Programming
98df8bb11748bb59fef1aa1e474e8e02?s=48 komofr
0
130
Dd280d6d98be3c13dfa14d63dde92299?s=48 fuga0618
0
260
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
0
4.2k
5f5d4605866c2db411d5e8d3c4859ab4?s=48 haruguchi
0
230
Fe1782174fa3f0a2d07011df414a1267?s=48 evils
0
230
527c1db50811ca320e8de57c79a3e15c?s=48 shugostr
0
430
7a0892afffbcbd35fd84d46508b3a914?s=48 dropout009
2
790
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho
0
280
491bde095856f2097f08f8034dabd998?s=48 tajimathememer
0
260
Aa254f26f91d4776b9cd19a7ce632867?s=48 ciniml
2
140
4f2867b43e88bf4fbb6cf9f371dc9501?s=48 guni1192
1
300
Ba655e3712aaabfbca289fe136f85fe4?s=48 qnighy
0
190

Featured

See All Featured
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
43
4.9k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
10k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2.1k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.2k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
88
5.3k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
120
7.4k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
122
8.3k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
235
960k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
210
11k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
29
5.1k

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 paulkinlan@google.com

  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