People don't give a f**k of JavaScript - 4Developers 2015

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. PEOPLE DON'T GIVE A
   F**K OF JAVASCRIPT
   Aurelio De Rosa
   Warsaw, Poland - 20 April 2015
   

   View Slide

2. WEB & APP DEVELOPER
   CONTRIBUTE(D) TO
   ...
   jQuery
   CanIUse
   PureCSS
   WRITE(D) FOR
   ...
   SitePoint
   Tuts+
   .NET megazine
   php [architect] megazine
   Telerik
   Web & PHP magazine
   

   View Slide

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

   View Slide

4. View Slide

5. WHO ARE YOUR USERS?
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

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

    View Slide

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

    View Slide

12. View Slide

13. TASK
    

    View Slide

14. EXPERIENCE
    

    View Slide

15. “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

16. “There are only two kinds of languages: the ones
    people complain about and the ones nobody
    uses”
    — Bjarne Stroustrup
    

    View Slide

17. “Pick one that feels right to you, and start
    building things. That's all that matters.”
    — Jeffrey Way
    

    View Slide

18. View Slide

19. LET'S WRITE BETTER
    JAVASCRIPT
    

    View Slide

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

    View Slide

21. ...Better for Developers
    

    View Slide

22. PERFORMANCE
    MATTERS!
    

    View Slide

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

    View Slide

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

    View Slide

25. “A Bing study found that a 10ms increase in page
    load time costs the site $250K in revenue
    annually.”
    — Rob Trace, David Walp
    Reference: http://blogs.msdn.com/b/ie/archive/2014/10/08/http-2-the-long-awaited-sequel.aspx
    

    View Slide

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

    View Slide

27. HOW WE USE TO TEST PERFORMANCE
    

    View Slide

28. DON'T BELIEVE ME? LOOK AT THIS SNIPPET
    var startTime = Date.now();
    // A time consuming function
    foo();
    var test1 = Date.now();
    // Another time consuming function
    bar();
    var test2 = Date.now();
    // Prints the results
    console.log("Test1: " + (test1 ‐ startTime));
    console.log("Test2: " + (test2 ‐ test1));
    

    View Slide

29. 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

30. OK, I GOT IT. NOW WHAT?
    

    View Slide

31. HIGH RESOLUTION TIME
    API
    

    View Slide

32. WHAT IT DOES?
    Allows to accurately retrieve the number of milliseconds from
    the navigationStart attribute (belongs to the
    ).
    Navigation
    Timing API
    

    View Slide

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

    View Slide

34. METHODS
    The only method exposed is now().
    

    View Slide

35. EXAMPLE
    var startTime = performance.now();
    // A time consuming function
    foo();
    var test1 = performance.now();
    // Another time consuming function
    bar();
    var test2 = performance.now();
    // Print results
    console.log("Test1: " + (test1 ‐ startTime));
    console.log("Test2: " + (test2 ‐ test1));
    

    View Slide

36. BROWSERS SUPPORT
    

    View Slide

37. DESKTOP BROWSERS SUPPORT
    Explorer Chrome Safari Firefox Opera
    10+ 20+ (-webkit)
    24+
    8+ 15+ 15+
    Data updated to 18th April 2015
    

    View Slide

38. MOBILE BROWSERS SUPPORT
    Explorer Android Chrome Safari Firefox Opera*
    10+ 4.4+ 24+ 8
    8.1+ (None)
    15+ None
    Data updated to 18th April 2015
    *In this case Opera stands for Opera Mini
    

    View Slide

39. HOW TO USE IT NOW
    window.performance = window.performance || {};
    performance.now = performance.now ||
    function() { return Date.now(); };
    

    View Slide

40. DEMO
    Test 1: Count until 100000
    Test 2: Count until 1000000
    Run demo
    All demos can be found at and are part of my .
    HTML5 API demos repository
    

    View Slide

41. TOO MANY VARS!
    

    View Slide

42. USER TIMING API
    

    View Slide

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

    View Slide

44. USE CASES
    Performance testing
    

    View Slide

45. PROPERTIES
    name
    entryType
    startTime
    duration
    

    View Slide

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

    View Slide

47. EXAMPLE 1/2
    // store the start and the end time of foo()
    performance.mark('startTime1');
    foo();
    performance.mark('endTime1')
    // store the start and the end time of bar()
    performance.mark('startTime2');
    bar();
    performance.mark('endTime2');
    // store the differences of the timings
    performance.measure('durationTime1', 'startTime1', 'endTime1');
    performance.measure('durationTime2', 'startTime2', 'endTime2');
    

    View Slide

48. EXAMPLE 2/2
    perfMeasures = performance.getEntriesByType('measure');
    // Prints the measures calculated
    for (var i = 0; i < perfMeasures.length; i++) {
    console.log(
    'Name: ' + perfMeasures[i].name + ' ‐ ' +
    'Duration: ' + perfMeasures[i].duration
    );
    }
    

    View Slide

49. BROWSERS SUPPORT
    

    View Slide

50. DESKTOP BROWSERS SUPPORT
    Explorer Chrome Safari Firefox Opera
    10+ 25+ None None 15+
    Data updated to 18th April 2015
    

    View Slide

51. MOBILE BROWSERS SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    10+ 4.4+ 25+ None None None
    Data updated to 18th April 2015
    

    View Slide

52. HOW TO USE IT NOW
    usertiming.js
    

    View Slide

53. DEMO
    Test 1: Count until 100000
    Test 2: Count until 1000000
    Run demo
    All demos can be found at and are part of my .
    HTML5 API demos repository
    

    View Slide

54. IS IT ONLY THAT?
    Navigation Timing API
    Resource Timing API
    Frame Timing
    and much more Editor's Drafts
    

    View Slide

55. DEMO NAVIGATION TIMING API
    TIMING INFO
    navigationStart: 1432396846180
    unloadEventStart: 1432396846189
    unloadEventEnd: 1432396846189
    redirectStart: 0
    redirectEnd: 0
    fetchStart: 1432396846181
    domainLookupStart: 1432396846181
    domainLookupEnd: 1432396846181
    connectStart: 1432396846181
    connectEnd: 1432396846181
    secureConnectionStart: 0
    

    View Slide

56. DEMO RESOURCE TIMING API
    initiatorType: img
    redirectStart: 0
    redirectEnd: 0
    fetchStart: 83.92900001490489
    domainLookupStart: 83.92900001490489
    domainLookupEnd: 83.92900001490489
    connectStart: 83.92900001490489
    connectEnd: 83.92900001490489
    secureConnectionStart: 0
    requestStart: 140.37000003736466
    responseStart: 144.170000043232
    responseEnd: 151.20600000955164
    name: http://localhost/people-dont-give-a-fuck-of-
    

    View Slide

57. ...Better for Devices
    

    View Slide

58. PAGE VISIBILITY API
    

    View Slide

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

    View Slide

60. 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

61. PROPERTIES
    hidden
    visibilityState (hidden, visible, prerender, unloaded)
    

    View Slide

62. EVENTS
    The only event exposed is visibilitychange.
    

    View Slide

63. EXAMPLE
    var views = 0;
    function countViews() {
    if (!document.hidden) {
    views++;
    console.log('Visit ' + views);
    }
    }
    // Runs the function the first time
    countViews();
    // Listens for visibilitychange
    document.addEventListener('visibilitychange', countViews);
    

    View Slide

64. BROWSERS SUPPORT
    

    View Slide

65. DESKTOP BROWSERS SUPPORT
    Explorer Chrome* Safari Firefox Opera*
    10+ 14+ (-webkit)
    33+
    6.1+ 10+ (-moz)
    18+
    12.10+
    15+ (-webkit)
    20+
    Data updated to 18th April 2015
    

    View Slide

66. MOBILE BROWSERS SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    10+ 4.4+ (-webkit) 13+ (-webkit)
    33+
    7.0+ 10+ (-moz)
    18+
    None
    Data updated to 18th April 2015
    

    View Slide

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

    View Slide

68. DEMO
    Run demo
    All demos can be found at and are part of my .
    HTML5 API demos repository
    

    View Slide

69. BATTERY STATUS API
    

    View Slide

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

    View Slide

71. 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

72. METHODS
    The only method exposed is getBattery().
    

    View Slide

73. PROPERTIES
    charging
    chargingTime
    dischargingTime
    level
    

    View Slide

74. EVENTS
    chargingchange
    chargingtimechange
    dischargingtimechange
    levelchange
    

    View Slide

75. EXAMPLE
    navigator.getBattery().then(function(battery) {
    // Print if battery is charging or not
    console.log("The device's battery is " +
    (battery.charging ? "" : "not") + " charging");
    // Print the current battery level
    console.log("The level of the battery is " +
    (battery.level * 100) + "%");
    });
    

    View Slide

76. BROWSERS SUPPORT
    

    View Slide

77. DESKTOP BROWSERS SUPPORT
    Explorer Chrome Safari Firefox Opera
    None 37*
    38+
    None 10+** (-moz)
    16+**
    25+
    Data updated to 18th April 2015
    *You have to activate the flag Experimental Web Platform features
    **Implements an old version of the specifications that didn't use promises but exposed the information through
    window.navigator.battery.
    

    View Slide

78. MOBILE BROWSERS SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    None 40+ 37*
    38+
    None 10+** (-moz)
    16+**
    None
    Data updated to 18th April 2015
    *You have to activate the flag Experimental Web Platform features
    **Implements an old version of the specifications that didn't use promises but exposed the information through
    window.navigator.battery.
    

    View Slide

79. HOW TO USE IT NOW
    NO POLYFILL AVAILABLE
    

    View Slide

80. DEMO
    Run demo
    All demos can be found at and are part of my .
    HTML5 API demos repository
    

    View Slide

81. ...Better for Users
    

    View Slide

82. VIBRATION API
    

    View Slide

83. WHAT IT DOES?
    Provides tactile feedback
    

    View Slide

84. USE CASES
    

    View Slide

85. Vibrate on an explosion in a movie
    

    View Slide

86. Vibrate when someone punches you in a fighting game
    

    View Slide

87. Vibrate when in a racing game a car crashes
    

    View Slide

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

    View Slide

89. EXAMPLE
    // Vibrate once for 1 second
    navigator.vibrate(1000);
    // Vibrate twice. One time for 1 second,
    // then a pause of half a second,
    // and then vibrate for 2 seconds
    navigator.vibrate([1000, 500, 2000]);
    // Cancelling Vibrations
    navigator.vibrate(0);
    // Alternatively
    navigator.vibrate([]);
    

    View Slide

90. BROWSERS SUPPORT
    

    View Slide

91. DESKTOP BROWSERS SUPPORT
    Explorer Chrome Safari Firefox Opera
    None 30+*
    32+
    None 11+ (-moz)
    16+
    17+*
    19+
    Data updated to 18th April 2015
    *You have to activate the flag Experimental Web Platform features
    

    View Slide

92. MOBILE BROWSERS SUPPORT
    Explorer Android Chrome Safari Firefox Opera
    None 4.4+ 30+*
    32+
    None 11+ (-moz)
    16+
    None
    Data updated to 18th April 2015
    *You have to activate the flag Experimental Web Platform features
    

    View Slide

93. HOW TO USE IT NOW
    NO POLYFILL AVAILABLE
    

    View Slide

94. TO BE HONEST...
    mozVibrate-polyfill
    

    View Slide

95. DEMO
    Vibrate Once Vibrate Thrice Stop
    All demos can be found at and are part of my .
    HTML5 API demos repository
    

    View Slide

96. GETUSERMEDIA API
    

    View Slide

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

    View Slide

98. USE CASES
    

    View Slide

99. Real-time communication (chat)
    

    View Slide

100. Recording tutorial or lesson for online courses
     

     View Slide

101. Home or work surveillance
     

     View Slide

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

     View Slide

103. EXAMPLE
     
     var video = document.getElementById("video");
     navigator.getUserMedia(
     {
     video: true,
     audio: true
     },
     function(stream) {
     video.src = stream;
     video.play();
     },
     function(error) {
     console.log("Error: " + error.code);
     }
     );
     

     View Slide

104. BROWSERS SUPPORT
     

     View Slide

105. DESKTOP BROWSERS SUPPORT
     Explorer Chrome Safari Firefox Opera
     None 21+ (-webkit) None 17+ (-moz) 12+
     15+ (None)
     18+ (-webkit)
     Data updated to 18th April 2015
     

     View Slide

106. MOBILE BROWSERS SUPPORT
     Explorer Android Chrome Safari Firefox Opera
     None 40+ 21+ (-webkit) None 24+ (-moz) None
     Data updated to 18th April 2015
     

     View Slide

107. HOW TO USE IT NOW
     getUserMedia.js
     

     View Slide

108. DEMO
     0:00
     Play demo Stop demo
     All demos can be found at and are part of my .
     HTML5 API demos repository
     

     View Slide

109. MORE EXAMPLES?
     

     View Slide

110. AMBIENT LIGHT API
     Provides information about the ambient light level in terms of lux
     units, as measured by a light sensor of a device.
     0 ≤ value < 50: Dark environment, use light colors on a dark
     background
     50 ≤ value < 10000: Normal environment
     value ≥ 10000: Very bright environment, use dark colors on a
     light background
     

     View Slide

111. EXAMPLE
     Images courtesy of Patrick Catanzariti ( )
     @thatpatrickguy
     

     View Slide

112. PROXIMITY API
     Events that provide information about the distance between a
     device and an object, as measured by a proximity sensor.
     

     View Slide

113. USE CASE
     You're driving while listening to music using a web service. You
     can stop the music with a gesture.
     EXAMPLE
     

     View Slide

114. SO...
     

     View Slide

115. DO YOU LIKE APIS? OF COURSE YOU DO!
     Device Orientation API
     Geolocation API
     Network Information API
     Speech Synthesis API
     Wake Lock API
     Web Alarms API
     Web Notification API
     Web Speech API
     ...
     

     View Slide

116. TO LEARN MORE...
     ABOUT THESE AND OTHER APIS
     HTML5 API DEMOS
     https://github.com/AurelioDeRosa/HTML5-API-demos
     A repository I created and maintain where you can find
     information about many JavaScript and HTML5 APIs.
     

     View Slide

117. 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

118. THANK YOU!
     

     View Slide

119. QUESTIONS?
     

     View Slide

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

     View Slide