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

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

8b01a8b4d7a0a9079a4e97b1ddedbe56?s=128

Aurelio De Rosa

April 20, 2015
Tweet

Transcript

  1. 1.
  2. 2.

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

    WRITE(D) FOR ... SitePoint Tuts+ .NET megazine php [architect] megazine Telerik Web & PHP magazine
  3. 4.
  4. 6.
  5. 7.
  6. 8.
  7. 9.
  8. 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?
  9. 12.
  10. 13.
  11. 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
  12. 16.

    “There are only two kinds of languages: the ones people

    complain about and the ones nobody uses” — Bjarne Stroustrup
  13. 17.

    “Pick one that feels right to you, and start building

    things. That's all that matters.” — Jeffrey Way
  14. 18.
  15. 20.

    PATTERN OF THE NEXT PART What Use Cases Methods, Properties

    and Events Example Browsers Support (Desktop and Mobile) Use it today (Polyfills) Demo
  16. 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
  17. 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));
  18. 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
  19. 32.

    WHAT IT DOES? Allows to accurately retrieve the number of

    milliseconds from the navigationStart attribute (belongs to the ). Navigation Timing API
  20. 33.

    USE CASES Work with animation at high FPS rate Ensure

    a perfect audio-video synchronization
  21. 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));
  22. 37.

    DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera 10+ 20+

    (-webkit) 24+ 8+ 15+ 15+ Data updated to 18th April 2015
  23. 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
  24. 39.

    HOW TO USE IT NOW window.performance = window.performance || {};

    performance.now = performance.now || function() { return Date.now(); };
  25. 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
  26. 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');
  27. 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 ); }
  28. 50.

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

    None None 15+ Data updated to 18th April 2015
  29. 51.

    MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera 10+

    4.4+ 25+ None None None Data updated to 18th April 2015
  30. 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
  31. 54.

    IS IT ONLY THAT? Navigation Timing API Resource Timing API

    Frame Timing and much more Editor's Drafts
  32. 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
  33. 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-
  34. 59.

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

    Fires events about changes of the page visibility's status
  35. 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
  36. 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);
  37. 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
  38. 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
  39. 68.

    DEMO Run demo All demos can be found at and

    are part of my . HTML5 API demos repository
  40. 70.

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

    level Fires events about changes of the battery level or status
  41. 71.

    USE CASES Slow down a process Save changes more frequently

    to prevent data loss Deny to start a critical and time consuming process
  42. 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) + "%"); });
  43. 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.
  44. 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.
  45. 80.

    DEMO Run demo All demos can be found at and

    are part of my . HTML5 API demos repository
  46. 84.
  47. 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([]);
  48. 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
  49. 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
  50. 95.

    DEMO Vibrate Once Vibrate Thrice Stop All demos can be

    found at and are part of my . HTML5 API demos repository
  51. 98.
  52. 103.

    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); } );
  53. 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
  54. 106.

    MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None

    40+ 21+ (-webkit) None 24+ (-moz) None Data updated to 18th April 2015
  55. 108.

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

    found at and are part of my . HTML5 API demos repository
  56. 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
  57. 112.

    PROXIMITY API Events that provide information about the distance between

    a device and an object, as measured by a proximity sensor.
  58. 113.

    USE CASE You're driving while listening to music using a

    web service. You can stop the music with a gesture. EXAMPLE
  59. 114.
  60. 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 ...
  61. 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.
  62. 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
  63. 118.
  64. 119.