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
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. 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+ 8+ 15+ 15+ Data updated to 18th April 2015
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
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. PROPERTIES name entryType startTime duration
46. METHODS mark() clearMarks() measure() clearMeasures() getEntriesByType() getEntriesByName()
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');
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 18th April 2015
51. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera 10+ 4.4+ 25+ None None None Data updated to 18th April 2015
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 Frame Timing and much more Editor's Drafts
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
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-
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 18th April 2015
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
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. METHODS The only method exposed is getBattery().
73. PROPERTIES charging chargingTime dischargingTime level
74. EVENTS chargingchange chargingtimechange dischargingtimechange levelchange
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) + "%"); });
76. BROWSERS SUPPORT
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.
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.
79. HOW TO USE IT NOW NO POLYFILL AVAILABLE
80. DEMO Run demo All demos can be found at and are part of my . HTML5 API demos repository
81. ...Better for Users
82. VIBRATION API
83. WHAT IT DOES? Provides tactile feedback
84. USE CASES
85. Vibrate on an explosion in a movie
86. Vibrate when someone punches you in a fighting game
87. Vibrate when in a racing game a car crashes
88. METHODS The only method exposed is vibrate().
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([]);
90. BROWSERS SUPPORT
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
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
93. HOW TO USE IT NOW NO POLYFILL AVAILABLE
94. TO BE HONEST... mozVibrate-polyfill
95. DEMO Vibrate Once Vibrate Thrice Stop All demos can be found at and are part of my . HTML5 API demos repository
96. GETUSERMEDIA API
97. WHAT IT DOES? Provides access to multimedia streams (video, audio, or both) from local devices
98. USE CASES
99. Real-time communication (chat)
100. Recording tutorial or lesson for online courses
101. Home or work surveillance
102. METHODS The only method exposed is getUserMedia().
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); } );
104. BROWSERS SUPPORT
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
106. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None 40+ 21+ (-webkit) None 24+ (-moz) None Data updated to 18th April 2015
107. HOW TO USE IT NOW getUserMedia.js
108. DEMO 0:00 Play demo Stop demo All demos can be found at and are part of my . HTML5 API demos repository
109. MORE EXAMPLES?
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
111. EXAMPLE Images courtesy of Patrick Catanzariti ( ) @thatpatrickguy
112. PROXIMITY API Events that provide information about the distance between a device and an object, as measured by a proximity sensor.
113. USE CASE You're driving while listening to music using a web service. You can stop the music with a gesture. EXAMPLE
114. SO...
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 ...
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.
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
118. THANK YOU!
119. QUESTIONS?
120. CONTACTS Website: Email: Twitter: www.audero.it a.derosa@audero.it @AurelioDeRosa