People don't give a f**k of JavaScript - Codemotion Madrid 2013

People don't give a f**k of JavaScript. You shouldn't either. We are here to do stuffs, whether you call them websites, web applications, web services or hybrid apps. People want to perform tasks, not listen you talking about your favourite programming language. So, use the one you feel more comfortable with and just release the next big thing. But, if your favourite language is JavaScript, let's write better code. What does better means? Better for developers, better for devices, better for users.

In this talk, I'll describe some of the latest HTML5 APIs, many of which still experimental, that can help you develop great code. In a bunch of minutes, you'll see how to use:

- The High Resolution Time and the User Timing APIs to help yourself testing your code performances
- The Page Visibility and the Battery APIs to take care of devices' resources
- The Vibration and the GetUserMedia APIs to create better User Experiences

Transcript

1. View Slide

2. ABOUT ME
   (THE MOST BORING PART OF THE TALK!)
   

   View Slide

3. WEB & APP DEVELOPER
   Previously employed at the University of Salerno, I decided to go
   freelance about 1 year ago.
   

   View Slide

4. THE LANGUAGES I USE
   

   View Slide

5. WRITE ARTICLES FOR
   

   View Slide

6. AUTHORED BOOKS
   INSTANT JQUERY SELECTORS JQUERY IN ACTION (3RD EDITION)
   (Shameless self-promotion!)
   

   View Slide

7. FOR THOSE WHO AREN'T ALREADY BORED...LET'S START!
   

   View Slide

8. PEOPLE DON'T GIVE A
   F**K OF JAVASCRIPT
   

   View Slide

9. WHO ARE YOUR USERS?
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. 3 QUESTIONS FOR YOU
    1. Do you think they understand programming languages?
    2. Do you think they know what's JavaScript?
    3. Do you think they care about JavaScript?
    

    View Slide

15. ...BUT I'M A DEVELOPER!
    

    View Slide

16. View Slide

17. TASK
    

    View Slide

18. EXPERIENCE
    

    View Slide

19. I'm a Java developer and I don't think I would
    trust a PHP developer enough to teach me
    something about the web
    Anonymous
    

    View Slide

20. View Slide

21. LET'S WRITE BETTER
    JAVASCRIPT
    

    View Slide

22. PATTERN OF THE NEXT PART
    What
    Use Cases
    Methods, Properties and Events
    Example
    Browsers' Support (Desktop and Mobile)
    Use it today (Polyfills)
    Demo (live)
    

    View Slide

23. ...Better for Developers
    

    View Slide

24. PERFORMANCE
    MATTERS!
    

    View Slide

25. Reference: http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
    

    View Slide

26. Reference: http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
    

    View Slide

27. LESSON:
    TEST AND IMPROVE YOUR WEBSITE'S
    PERFORMANCE
    

    View Slide

28. HOW WE USE TO TEST PERFORMANCE
    

    View Slide

29. DON'T BELIEVE ME? LOOK AT THIS SNIPPET
    v
    a
    r s
    t
    a
    r
    t
    T
    i
    m
    e = D
    a
    t
    e
    .
    n
    o
    w
    (
    )
    ;
    /
    / A t
    i
    m
    e c
    o
    n
    s
    u
    m
    i
    n
    g f
    u
    n
    c
    t
    i
    o
    n
    f
    o
    o
    (
    )
    ;
    v
    a
    r t
    e
    s
    t
    1 = D
    a
    t
    e
    .
    n
    o
    w
    (
    )
    ;
    /
    / A
    n
    o
    t
    h
    e
    r t
    i
    m
    e c
    o
    n
    s
    u
    m
    i
    n
    g f
    u
    n
    c
    t
    i
    o
    n
    b
    a
    r
    (
    )
    ;
    v
    a
    r t
    e
    s
    t
    2 = D
    a
    t
    e
    .
    n
    o
    w
    (
    )
    ;
    /
    / P
    r
    i
    n
    t r
    e
    s
    u
    l
    t
    s
    c
    o
    n
    s
    o
    l
    e
    .
    d
    e
    b
    u
    g
    (
    "
    T
    e
    s
    t
    1 t
    i
    m
    e
    : " + (
    t
    e
    s
    t
    1 - s
    t
    a
    r
    t
    T
    i
    m
    e
    )
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    d
    e
    b
    u
    g
    (
    "
    T
    e
    s
    t
    2 t
    i
    m
    e
    : " + (
    t
    e
    s
    t
    2 - t
    e
    s
    t
    1
    )
    )
    ;
    

    View Slide

30. WHAT'S WRONG WITH DATE.NOW()?
    1. It is not monotonically increasing
    2. Milliseconds precision
    3. Precision of this timestamp varies between user agents
    4. Different scope
    

    View Slide

31. OK, I GOT IT. NOW WHAT?
    

    View Slide

32. HIGH RESOLUTION TIME
    API
    

    View Slide

33. WHAT IT DOES?
    Allow to accurately retrieve the number of milliseconds from the
    n
    a
    v
    i
    g
    a
    t
    i
    o
    n
    S
    t
    a
    r
    t
    attribute (belongs to the
    ).
    Navigation Timing API
    

    View Slide

34. USE CASES
    Work with animation at high FPS rate
    Ensure a perfect audio-video synchronization
    

    View Slide

35. METHODS
    The only method exposed is n
    o
    w
    (
    )
    .
    

    View Slide

36. EXAMPLE
    v
    a
    r s
    t
    a
    r
    t
    T
    i
    m
    e = p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    n
    o
    w
    (
    )
    ;
    /
    / A t
    i
    m
    e c
    o
    n
    s
    u
    m
    i
    n
    g f
    u
    n
    c
    t
    i
    o
    n
    f
    o
    o
    (
    )
    ;
    v
    a
    r t
    e
    s
    t
    1 = p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    n
    o
    w
    (
    )
    ;
    /
    / A
    n
    o
    t
    h
    e
    r t
    i
    m
    e c
    o
    n
    s
    u
    m
    i
    n
    g f
    u
    n
    c
    t
    i
    o
    n
    b
    a
    r
    (
    )
    ;
    v
    a
    r t
    e
    s
    t
    2 = p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    n
    o
    w
    (
    )
    ;
    /
    / P
    r
    i
    n
    t r
    e
    s
    u
    l
    t
    s
    c
    o
    n
    s
    o
    l
    e
    .
    d
    e
    b
    u
    g
    (
    "
    T
    e
    s
    t
    1 t
    i
    m
    e
    : " + (
    t
    e
    s
    t
    1 - s
    t
    a
    r
    t
    T
    i
    m
    e
    )
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    d
    e
    b
    u
    g
    (
    "
    T
    e
    s
    t
    2 t
    i
    m
    e
    : " + (
    t
    e
    s
    t
    2 - t
    e
    s
    t
    1
    )
    )
    ;
    

    View Slide

37. BROWSERS' SUPPORT
    

    View Slide

38. DESKTOP BROWSERS' SUPPORT
    Explorer Chrome Safari Firefox Opera
    10+ 20+ (-webkit)
    24+*
    None 15+ 15+
    Data updated to 1st October 2013
    As for now, p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    n
    o
    w
    (
    )
    in Chrome returns a time almost always near the very start or the very end
    of a second ( ).
    issue #158234
    

    View Slide

39. MOBILE BROWSERS' SUPPORT
    Explorer Android Chrome Safari Firefox Opera*
    10+ None 24+ None 15+ None
    Data updated to 1st October 2013
    * Opera Mobile stands for the classic version, not the one based on Blink like Opera for Android
    

    View Slide

40. HOW TO USE IT NOW
    w
    i
    n
    d
    o
    w
    .
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e = w
    i
    n
    d
    o
    w
    .
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e |
    | {
    }
    ;
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    n
    o
    w = p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    n
    o
    w |
    |
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    w
    e
    b
    k
    i
    t
    N
    o
    w |
    |
    f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n D
    a
    t
    e
    .
    n
    o
    w
    (
    )
    ;
    }
    ;
    

    View Slide

41. TOO MANY VARS!
    

    View Slide

42. USER TIMING API
    

    View Slide

43. WHAT IT DOES?
    Allow to accurately measure and store performance of a
    JavaScript code
    

    View Slide

44. USE CASES
    Performance testing
    

    View Slide

45. METHODS
    mark()
    clearMarks()
    measure()
    clearMeasures()
    getEntriesByType()
    getEntriesByName()
    

    View Slide

46. PROPERTIES
    name
    entryType
    startTime
    duration
    

    View Slide

47. EXAMPLE
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    m
    a
    r
    k
    (
    "
    s
    t
    a
    r
    t
    T
    i
    m
    e
    1
    "
    )
    ;
    f
    o
    o
    (
    )
    ;
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    m
    a
    r
    k
    (
    "
    e
    n
    d
    T
    i
    m
    e
    1
    "
    )
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    m
    a
    r
    k
    (
    "
    s
    t
    a
    r
    t
    T
    i
    m
    e
    2
    "
    )
    ;
    b
    a
    r
    (
    )
    ;
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    m
    a
    r
    k
    (
    "
    e
    n
    d
    T
    i
    m
    e
    2
    "
    )
    ;
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    m
    e
    a
    s
    u
    r
    e
    (
    "
    d
    u
    r
    a
    t
    i
    o
    n
    T
    i
    m
    e
    1
    "
    , "
    s
    t
    a
    r
    t
    T
    i
    m
    e
    1
    "
    , "
    e
    n
    d
    T
    i
    m
    e
    1
    "
    )
    ;
    p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    m
    e
    a
    s
    u
    r
    e
    (
    "
    d
    u
    r
    a
    t
    i
    o
    n
    T
    i
    m
    e
    2
    "
    , "
    s
    t
    a
    r
    t
    T
    i
    m
    e
    2
    "
    , "
    e
    n
    d
    T
    i
    m
    e
    2
    "
    )
    ;
    p
    e
    r
    f
    M
    e
    a
    s
    u
    r
    e
    s = p
    e
    r
    f
    o
    r
    m
    a
    n
    c
    e
    .
    g
    e
    t
    E
    n
    t
    r
    i
    e
    s
    B
    y
    T
    y
    p
    e
    (
    "
    m
    e
    a
    s
    u
    r
    e
    "
    )
    ;
    f
    o
    r (
    v
    a
    r i = 0
    ; i < p
    e
    r
    f
    M
    e
    a
    s
    u
    r
    e
    s
    .
    l
    e
    n
    g
    t
    h
    ; i
    +
    +
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    "
    N
    a
    m
    e
    : " + p
    e
    r
    f
    M
    e
    a
    s
    u
    r
    e
    s
    [
    i
    ]
    .
    n
    a
    m
    e + " - " +
    "
    D
    u
    r
    a
    t
    i
    o
    n
    : " + p
    e
    r
    f
    M
    e
    a
    s
    u
    r
    e
    s
    [
    i
    ]
    .
    d
    u
    r
    a
    t
    i
    o
    n + "
    \
    n
    "
    )
    ;
    }
    

    View Slide

48. BROWSERS' SUPPORT
    

    View Slide

49. DESKTOP BROWSERS' SUPPORT
    Explorer Chrome Safari Firefox Opera
    10+ 25+ None None 15+
    Data updated to 1st October 2013
    

    View Slide

50. MOBILE BROWSERS' SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    10+ None 25+ None None None
    Data updated to 1st October 2013
    

    View Slide

51. HOW TO USE IT NOW
    usertiming.js
    

    View Slide

52. ...Better for Devices
    

    View Slide

53. PAGE VISIBILITY API
    

    View Slide

54. WHAT IT DOES?
    Provides information about the page visibility's status
    Fires events about changes of the page visibility's status
    

    View Slide

55. USE CASES
    Stop sending requests to the server for updates
    Pause a video or a song
    Stop the time counter of an intermediate ads page
    

    View Slide

56. PROPERTIES
    hidden
    visibilityState (h
    i
    d
    d
    e
    n
    , v
    i
    s
    i
    b
    l
    e
    , p
    r
    e
    r
    e
    n
    d
    e
    r
    , u
    n
    l
    o
    a
    d
    e
    d
    )
    

    View Slide

57. EVENTS
    The only event exposed is visibilitychange.
    

    View Slide

58. EXAMPLE
    /
    / W
    o
    r
    k
    s o
    n
    l
    y i
    n b
    r
    o
    w
    s
    e
    r
    s w
    i
    t
    h u
    n
    p
    r
    e
    f
    i
    x
    e
    d p
    r
    o
    p
    e
    r
    t
    i
    e
    s a
    n
    d m
    e
    t
    h
    o
    d
    s
    v
    a
    r v
    i
    e
    w
    s = 0
    ;
    v
    a
    r c
    o
    u
    n
    t
    V
    i
    e
    w
    s = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    i
    f (
    d
    o
    c
    u
    m
    e
    n
    t
    .
    h
    i
    d
    d
    e
    n =
    =
    = f
    a
    l
    s
    e
    ) {
    v
    i
    e
    w
    s
    +
    +
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    "
    V
    i
    s
    i
    t " + v
    i
    e
    w
    s
    )
    ;
    }
    }
    ;
    /
    / R
    u
    n t
    h
    e f
    u
    n
    c
    t
    i
    o
    n t
    h
    e f
    i
    r
    s
    t t
    i
    m
    e
    c
    o
    u
    n
    t
    V
    i
    e
    w
    s
    (
    )
    ;
    /
    / L
    i
    s
    t
    e
    n f
    o
    r v
    i
    s
    i
    b
    i
    l
    i
    t
    y
    c
    h
    a
    n
    g
    e
    d
    o
    c
    u
    m
    e
    n
    t
    .
    a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    "
    v
    i
    s
    i
    b
    i
    l
    i
    t
    y
    c
    h
    a
    n
    g
    e
    "
    , c
    o
    u
    n
    t
    V
    i
    e
    w
    s
    , f
    a
    l
    s
    e
    )
    ;
    

    View Slide

59. BROWSERS' SUPPORT
    

    View Slide

60. DESKTOP BROWSERS' SUPPORT
    Explorer Chrome Safari Firefox Opera
    10+ 13+ (-webkit) None 10+ (-moz)
    18+
    12.10+
    15+ (-webkit)
    Data updated to 1st October 2013
    

    View Slide

61. MOBILE BROWSERS' SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    10+ None 13+ (-webkit) None 10+ (-moz)
    18+
    12.10+
    Data updated to 1st October 2013
    

    View Slide

62. HOW TO USE IT NOW
    visibly.js
    Visibility.js
    

    View Slide

63. BATTERY STATUS API
    

    View Slide

64. WHAT IT DOES?
    Provides information about the system's battery charge level
    Fires events about changes of the battery level or status
    

    View Slide

65. USE CASES
    Slow down a process
    Save changes more frequently to prevent data loss
    Deny to start a critical and time consuming process
    

    View Slide

66. PROPERTIES
    charging
    chargingTime
    dischargingTime
    level
    

    View Slide

67. EVENTS
    chargingchange
    chargingtimechange
    dischargingtimechange
    levelchange
    

    View Slide

68. EXAMPLE
    /
    / P
    r
    i
    n
    t i
    f b
    a
    t
    t
    e
    r
    y i
    s c
    h
    a
    r
    g
    i
    n
    g o
    r n
    o
    t
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    "
    T
    h
    e d
    e
    v
    i
    c
    e
    '
    s b
    a
    t
    t
    e
    r
    y i
    s " +
    (
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    b
    a
    t
    t
    e
    r
    y
    .
    c
    h
    a
    r
    g
    i
    n
    g ? "
    " : "
    n
    o
    t
    "
    ) +
    " c
    h
    a
    r
    g
    i
    n
    g
    "
    )
    ;
    /
    / P
    r
    i
    n
    t t
    h
    e c
    u
    r
    r
    e
    n
    t b
    a
    t
    t
    e
    r
    y l
    e
    v
    e
    l
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    "
    T
    h
    e l
    e
    v
    e
    l o
    f t
    h
    e b
    a
    t
    t
    e
    r
    y i
    s " +
    (
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    b
    a
    t
    t
    e
    r
    y
    .
    l
    e
    v
    e
    l ? (
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    b
    a
    t
    t
    e
    r
    y
    .
    l
    e
    v
    e
    l * 1
    0
    0
    ) + "
    %
    " :
    "
    U
    N
    K
    N
    O
    W
    N
    "
    )
    )
    ;
    

    View Slide

69. BROWSERS' SUPPORT
    

    View Slide

70. DESKTOP BROWSERS' SUPPORT
    Explorer Chrome Safari Firefox Opera
    None None None 10+ (-moz)
    16+
    None
    Data updated to 1st October 2013
    

    View Slide

71. MOBILE BROWSERS' SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    None None None None 10+ (-moz)
    16+
    None
    Data updated to 1st October 2013
    

    View Slide

72. HOW TO USE IT NOW
    NO POLYFILL AVAILABLE
    

    View Slide

73. ...Better for Users
    

    View Slide

74. VIBRATION API
    

    View Slide

75. WHAT IT DOES?
    Provide tactile feedback
    

    View Slide

76. USE CASES
    

    View Slide

77. Vibrate on an explosion in a movie
    

    View Slide

78. Vibrate when someone punches you in a fighting game
    

    View Slide

79. Vibrate when in a racing game a car crashes
    

    View Slide

80. METHODS
    The only method exposed is vibrate().
    

    View Slide

81. EXAMPLE
    /
    / V
    i
    b
    r
    a
    t
    e o
    n
    c
    e f
    o
    r 1 s
    e
    c
    o
    n
    d
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    v
    i
    b
    r
    a
    t
    e
    (
    1
    0
    0
    0
    )
    ;
    /
    / V
    i
    b
    r
    a
    t
    e t
    h
    r
    i
    c
    e
    . T
    w
    o t
    i
    m
    e
    s f
    o
    r 1 s
    e
    c
    o
    n
    d
    , w
    i
    t
    h a h
    a
    l
    f
    /
    / s
    e
    c
    o
    n
    d i
    n
    t
    e
    r
    v
    a
    l
    , a
    n
    d t
    h
    e
    n v
    i
    b
    r
    a
    t
    e f
    o
    r 2 s
    e
    c
    o
    n
    d
    s
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    v
    i
    b
    r
    a
    t
    e
    (
    [
    1
    0
    0
    0
    , 5
    0
    0
    , 1
    0
    0
    0
    , 5
    0
    0
    , 2
    0
    0
    0
    ]
    )
    ;
    /
    / C
    a
    n
    c
    e
    l
    l
    i
    n
    g V
    i
    b
    r
    a
    t
    i
    o
    n
    s
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    v
    i
    b
    r
    a
    t
    e
    (
    0
    )
    ;
    

    View Slide

82. BROWSERS' SUPPORT
    

    View Slide

83. DESKTOP BROWSERS' SUPPORT
    Explorer Chrome Safari Firefox Opera
    None 30+* None 11+ (-moz)
    16+
    17+*
    Data updated to 8th October 2013
    * You have to activate the flag Experimental Web Platform features
    

    View Slide

84. MOBILE BROWSERS' SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    None None 30+* None 11+ (-moz)
    16+
    None
    Data updated to 8th October 2013
    * You have to activate the flag Experimental Web Platform features
    

    View Slide

85. HOW TO USE IT NOW
    NO POLYFILL AVAILABLE
    

    View Slide

86. GETUSERMEDIA API
    

    View Slide

87. WHAT IT DOES?
    Provides the access to multimedia streams (video, audio, or both)
    from local devices
    

    View Slide

88. USE CASES
    

    View Slide

89. Real-time communication (chat)
    

    View Slide

90. Recording tutorial or lesson for online courses
    

    View Slide

91. Home or work surveillance
    

    View Slide

92. METHODS
    The only method exposed is getUserMedia().
    

    View Slide

93. EXAMPLE
    <
    v
    i
    d
    e
    o i
    d
    =
    "
    v
    i
    d
    e
    o
    " a
    u
    t
    o
    p
    l
    a
    y
    =
    "
    a
    u
    t
    o
    p
    l
    a
    y
    " c
    o
    n
    t
    r
    o
    l
    s
    =
    "
    t
    r
    u
    e
    "
    >
    <
    /
    v
    i
    d
    e
    o
    >
    <
    s
    c
    r
    i
    p
    t
    >
    v
    a
    r v
    i
    d
    e
    o = d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    "
    v
    i
    d
    e
    o
    "
    )
    ;
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    g
    e
    t
    U
    s
    e
    r
    M
    e
    d
    i
    a
    (
    {
    v
    i
    d
    e
    o
    : t
    r
    u
    e
    ,
    a
    u
    d
    i
    o
    : t
    r
    u
    e
    }
    ,
    f
    u
    n
    c
    t
    i
    o
    n
    (
    s
    t
    r
    e
    a
    m
    ) {
    v
    i
    d
    e
    o
    .
    s
    r
    c = s
    t
    r
    e
    a
    m
    ;
    v
    i
    d
    e
    o
    .
    p
    l
    a
    y
    (
    )
    ;
    }
    ,
    f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    r
    r
    o
    r
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    "
    V
    i
    d
    e
    o c
    a
    p
    t
    u
    r
    e e
    r
    r
    o
    r
    : "
    , e
    r
    r
    o
    r
    .
    c
    o
    d
    e
    )
    ;
    }
    )
    ;
    <
    /
    s
    c
    r
    i
    p
    t
    >
    

    View Slide

94. BROWSERS' SUPPORT
    

    View Slide

95. DESKTOP BROWSERS' SUPPORT
    Explorer Chrome Safari Firefox Opera
    None 21+ (-webkit) None 17+ (-moz) 12+
    15+ (None)
    Data updated to 1st October 2013
    

    View Slide

96. MOBILE BROWSERS' SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    None None 21+ (-webkit) None None 12+
    Data updated to 1st October 2013
    

    View Slide

97. HOW TO USE IT NOW
    getUserMedia.js
    

    View Slide

98. CONCLUSIONS
    Future of web development is bright
    ...but some browsers aren't prepared yet
    Focus on goals, not technologies
    Take care of performances
    Take care of devices' resources
    Take care of your users' experience
    

    View Slide

99. THANK YOU!
    

    View Slide

100. QUESTIONS?
     

     View Slide

101. CONTACTS
     Website:
     Email:
     Twitter:
     www.audero.it
     a.derosa@audero.it
     @AurelioDeRosa
     

     View Slide