Pro Yearly is on sale from $80 to $50! »

People don't give a f**k of JavaScript - WebTech Conference 2014

People don't give a f**k of JavaScript - WebTech Conference 2014

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

8b01a8b4d7a0a9079a4e97b1ddedbe56?s=128

Aurelio De Rosa

October 28, 2014
Tweet

Transcript

  1. None
  2. WEB & APP DEVELOPER CONTRIBUTE(D) TO ... jQuery CanIUse PureCSS

    WRITE FOR SitePoint Tuts+ ModernWeb Telerik php [architect] Web & PHP magazine
  3. AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS

    (Shameless self-promotion!)
  4. None
  5. WHO ARE YOUR USERS?

  6. None
  7. None
  8. None
  9. None
  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?
  11. ...BUT I'M A DEVELOPER!

  12. None
  13. TASK

  14. EXPERIENCE

  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
  16. “There are only two kinds of languages: the ones people

    complain about and the ones nobody uses” — Bjarne Stroustrup
  17. “Pick one that feels right to you, and start building

    things. That's all that matters.” — Jeffrey Way
  18. None
  19. LET'S WRITE BETTER JAVASCRIPT

  20. PATTERN OF THE NEXT PART What Use Cases Methods, Properties

    and Events Example Browsers Support (Desktop and Mobile) Use it today (Polyfills) Demo
  21. ...Better for Developers

  22. PERFORMANCE MATTERS!

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

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

  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
  26. LESSON: TEST AND IMPROVE YOUR WEBSITE'S PERFORMANCE

  27. HOW WE USE TO TEST PERFORMANCE

  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));
  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
  30. OK, I GOT IT. NOW WHAT?

  31. HIGH RESOLUTION TIME API

  32. WHAT IT DOES? Allows to accurately retrieve the number of

    milliseconds from the navigationStart attribute (belongs to the ). Navigation Timing API
  33. USE CASES Work with animation at high FPS rate Ensure

    a perfect audio-video synchronization
  34. METHODS The only method exposed is now().

  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));
  36. BROWSERS SUPPORT

  37. DESKTOP BROWSERS SUPPORT Explorer Chrome* Safari Firefox Opera* 10+ 20+

    (-webkit) 24+ None 15+ 15+ Data updated to 24th October 2014 *Before the last version of Chrome (38) and Opera (25), released a couple of weeks ago, performance.now() on Windows returned a time near the very start or the very end of a millisecond ( ). Issue #158234
  38. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera* 10+

    4.4+ 24+ None 15+ None Data updated to 24th October 2014 *In this case Opera stands for Opera Mini
  39. HOW TO USE IT NOW window.performance = window.performance || {};

    performance.now = performance.now || function() { return Date.now(); };
  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
  41. TOO MANY VARS!

  42. USER TIMING API

  43. WHAT IT DOES? Allows to accurately measure and store performance

    of a JavaScript code
  44. USE CASES Performance testing

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

  46. PROPERTIES name entryType startTime duration

  47. EXAMPLE 1/2 // store the start and the end of

    foo() performance.mark('startTime1'); foo(); performance.mark('endTime1') // store the start and the end 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');
  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 ); }
  49. BROWSERS SUPPORT

  50. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera 10+ 25+

    None None 15+ Data updated to 24th October 2014
  51. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera 10+

    4.4+ 25+ None None None Data updated to 24th October 2014
  52. HOW TO USE IT NOW usertiming.js

  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
  54. IS IT ONLY THAT? Navigation Timing API Resource Timing API

    Resource Priorities and much more Editor's Drafts
  55. DEMO NAVIGATION TIMING API TIMING INFO loadEventEnd: 0 loadEventStart: 1414848263133

    domComplete: 1414848263133 domContentLoadedEventEnd: 1414848262937 domContentLoadedEventStart: 1414848262925 domInteractive: 1414848262925 domLoading: 1414848262739 responseEnd: 1414848262731 responseStart: 1414848262731 requestStart: 1414848262729 secureConnectionStart: 0
  56. DEMO RESOURCE TIMING API responseEnd: 112.18399996869266 responseStart: 111.94899992551655 requestStart: 110.21299997810274

    secureConnectionStart: 0 connectEnd: 83.80299992859364 connectStart: 83.80299992859364 domainLookupEnd: 83.80299992859364 domainLookupStart: 83.80299992859364 fetchStart: 83.80299992859364 redirectEnd: 0 redirectStart: 0 initiatorType: img duration: 28.381000040099025
  57. ...Better for Devices

  58. PAGE VISIBILITY API

  59. WHAT IT DOES? Provides information about the page visibility's status

    Fires events about changes of the page visibility's status
  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
  61. PROPERTIES hidden visibilityState (hidden, visible, prerender, unloaded)

  62. EVENTS The only event exposed is visibilitychange.

  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);
  64. BROWSERS SUPPORT

  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 24th October 2014 *While updating this presentation I found a bug in Chrome 38 for Desktop ( ). Issue #422163
  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 24th October 2014
  67. HOW TO USE IT NOW visibly.js Visibility.js

  68. DEMO Run demo All demos can be found at and

    are part of my . HTML5 API demos repository
  69. BATTERY STATUS API

  70. WHAT IT DOES? Provides information about the system's battery charge

    level Fires events about changes of the battery level or status
  71. USE CASES Slow down a process Save changes more frequently

    to prevent data loss Deny to start a critical and time consuming process
  72. PROPERTIES charging chargingTime dischargingTime level

  73. EVENTS chargingchange chargingtimechange dischargingtimechange levelchange

  74. EXAMPLE var battery = navigator.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) + "%");
  75. BROWSERS SUPPORT

  76. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None None

    None 10+ (-moz) 16+ None Data updated to 24th October 2014
  77. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None

    None None None 10+ (-moz) 16+ None Data updated to 24th October 2014
  78. HOW TO USE IT NOW NO POLYFILL AVAILABLE

  79. DEMO Run demo All demos can be found at and

    are part of my . HTML5 API demos repository
  80. ...Better for Users

  81. VIBRATION API

  82. WHAT IT DOES? Provides tactile feedback

  83. USE CASES

  84. Vibrate on an explosion in a movie

  85. Vibrate when someone punches you in a fighting game

  86. Vibrate when in a racing game a car crashes

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

  88. 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([]);
  89. BROWSERS SUPPORT

  90. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None 30+*

    32+ None 11+ (-moz) 16+ 17+* 19+ Data updated to 24th October 2014 *You have to activate the flag Experimental Web Platform features
  91. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None

    4.4+ 30+* 32+ None 11+ (-moz) 16+ None Data updated to 24th October 2014 *You have to activate the flag Experimental Web Platform features
  92. HOW TO USE IT NOW NO POLYFILL AVAILABLE

  93. TO BE HONEST... mozVibrate-polyfill

  94. DEMO Vibrate Once Vibrate Thrice Stop All demos can be

    found at and are part of my . HTML5 API demos repository
  95. GETUSERMEDIA API

  96. WHAT IT DOES? Provides access to multimedia streams (video, audio,

    or both) from local devices
  97. USE CASES

  98. Real-time communication (chat)

  99. Recording tutorial or lesson for online courses

  100. Home or work surveillance

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

  102. EXAMPLE <video id="video" autoplay="autoplay" controls></video> 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); } );
  103. BROWSERS SUPPORT

  104. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None 21+

    (-webkit) None 17+ (-moz) 12+ 15+ (None) 18+ (-webkit) Data updated to 24th October 2014
  105. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None

    None 21+ (-webkit) None 24+ (-moz) None Data updated to 24th October 2014
  106. HOW TO USE IT NOW getUserMedia.js

  107. DEMO 0:00 Play demo Stop demo All demos can be

    found at and are part of my . HTML5 API demos repository
  108. MORE EXAMPLES?

  109. 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
  110. EXAMPLE Images courtesy of Patrick Catanzariti ( ) @thatpatrickguy

  111. PROXIMITY API Events that provide information about the distance between

    a device and an object, as measured by a proximity sensor.
  112. USE CASE You're driving while listening to music using a

    web service. You can stop the music with a gesture.
  113. SO...

  114. 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 ...
  115. 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.
  116. 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
  117. THANK YOU!

  118. QUESTIONS?

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