State of the Mobile Browser

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

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

    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