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

State of the Mobile Browser

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

More Decks by Paul Kinlan

Other Decks in Programming

Transcript

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

    View Slide

  2. Overview

    View Slide

  3. > 1 Billion
    users have a
    modern
    browser.

    View Slide

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

    View Slide

  5. The browser
    is still the
    most used
    application.

    View Slide

  6. View Slide

  7. Rounded Corners

    View Slide

  8. Naive Look

    View Slide

  9. What is
    your
    mobile
    traffic?

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. > 50%
    "We now have more
    users engaging with
    Google+ from mobile
    than desktop." - IO
    2012

    View Slide

  14. Mobile
    The
    important
    bits

    View Slide

  15. 2
    THINGS

    View Slide

  16. Performance
    Where do you
    look?

    View Slide

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

    View Slide

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

    View Slide

  19. Lumpiness
    =
    Less
    Engagement

    View Slide

  20. View Slide

  21. They have to hack it up like crazy
    Its no longer your father's HTML.
    ● Just a

    View Slide

  22. Where are the bottlenecks?
    ● Javascript?
    ● DOM manipulation?
    ● Paint?

    View Slide

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

    View Slide

  24. View Slide

  25. View Slide

  26. Go home
    and measure
    [email protected]

    View Slide

  27. Inconsistencies

    View Slide

  28. Wot
    Consistent
    Platform?

    View Slide

  29. 100% Support
    Mostly boring
    stuff

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. Native
    developers
    build online in

    View Slide

  34. Web
    developers
    build offline in

    View Slide

  35. Adding offline
    is a lot harder
    than online

    View Slide

  36. Camera Access

    Demo
    http://jsbin.com/avawaj/1
    86%

    View Slide

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

    View Slide

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

    View Slide

  39. WebSQL Database
    86%

    View Slide

  40. IndexedDB
    3%
    Reaching 3% of the
    web you might as
    well use any API you
    want....

    View Slide

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

    View Slide

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

    View Slide

  43. View Slide

  44. Device Orientation
    onmobile.iwanttouse.com/#deviceorientation
    67%
    window.ondeviceorientation = function(event) {
    // process event.alpha, event.beta and event.gamma
    };
    jsbin.com/ofeces/1

    View Slide

  45. FileReader
    66%

    View Slide

  46. requestAnimationFrame
    44%

    View Slide

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

    View Slide

  48. The following
    might look
    depressing

    View Slide

  49. But it's really
    exciting

    View Slide

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

    View Slide

  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);
    });

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. CSS Custom Shaders
    0%

    View Slide

  56. The mobile
    web is a rich
    platform

    View Slide

  57. Go and do
    moar
    Awesome

    View Slide