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

Transcript

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!)
5. WHO ARE YOUR USERS?
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!
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
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