4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa

PEOPLE DON'T GIVE A
F**K OF JAVASCRIPT
Aurelio De Rosa
Warsaw, Poland - 20 April 2015

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

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

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?

“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

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

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

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

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

“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

LESSON:
TEST AND IMPROVE YOUR WEBSITE'S
PERFORMANCE

HOW WE USE TO TEST PERFORMANCE

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));

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

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

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

METHODS
The only method exposed is now().

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));

DESKTOP BROWSERS SUPPORT
Explorer Chrome Safari Firefox Opera
10+ 20+(-webkit)
24+
8+ 15+ 15+
Dataupdatedto18thApril2015

MOBILE BROWSERS SUPPORT
Explorer Android Chrome Safari Firefox Opera*
10+ 4.4+ 24+ 8
8.1+(None)
15+ None
*InthiscaseOperastandsforOperaMini

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

DEMO
Test 1: Count until 100000
Test 2: Count until 1000000
Run demo
Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository

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

PROPERTIES
name
entryType
startTime
duration

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

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');

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
   );
}

10+ 25+ None None 15+

Explorer Android Chrome Safari Firefox Opera
10+ 4.4+ 25+ None None None

HOW TO USE IT NOW
usertiming.js

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

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

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-

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

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

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

EVENTS
The only event exposed is visibilitychange.

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);

Explorer Chrome* Safari Firefox Opera*
10+ 14+(-webkit)
33+
6.1+ 10+(-moz)
18+
12.10+
15+(-webkit)
20+

10+ 4.4+(-webkit) 13+(-webkit)
33+
7.0+ 10+(-moz)
18+
None

HOW TO USE IT NOW
visibly.js
Visibility.js

DEMO
Run demo

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

USE CASES
Slow down a process
Save changes more frequently to prevent data loss
Deny to start a critical and time consuming process

METHODS
The only method exposed is getBattery().

PROPERTIES
charging
chargingTime
dischargingTime
level

EVENTS
chargingchange
chargingtimechange
dischargingtimechange
levelchange

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) + "%");
});

None 37*
38+
None 10+**(-moz)
16+**
25+
*YouhavetoactivatetheflagExperimentalWebPlatformfeatures
**Implementsanoldversionofthespecificationsthatdidn'tusepromisesbutexposedtheinformationthrough
window.navigator.battery.

None 40+ 37*
38+
None 10+**(-moz)
16+**
None
**Implementsanoldversionofthespecificationsthatdidn'tusepromisesbutexposedtheinformationthrough
window.navigator.battery.

HOW TO USE IT NOW
NO POLYFILL AVAILABLE

WHAT IT DOES?
Provides tactile feedback

Vibrate on an explosion in a movie

Vibrate when someone punches you in a fighting game

Vibrate when in a racing game a car crashes

METHODS
The only method exposed is vibrate().

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([]);

None 30+*
32+
None 11+(-moz)
16+
17+*
19+

None 4.4+ 30+*
32+
None 11+(-moz)
16+
None

TO BE HONEST...
mozVibrate-polyfill

DEMO
Vibrate Once Vibrate Thrice Stop

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

Real-time communication (chat)

Recording tutorial or lesson for online courses

METHODS
The only method exposed is getUserMedia().

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);
   }
);

None 21+(-webkit) None 17+(-moz) 12+
15+(None)
18+(-webkit)

None 40+ 21+(-webkit) None 24+(-moz) None

HOW TO USE IT NOW
getUserMedia.js

DEMO
0:00
Play demo Stop demo

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

EXAMPLE
ImagescourtesyofPatrickCatanzariti( )@thatpatrickguy

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

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

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

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.

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

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

4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to 4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa

Similar to 4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa (20)

Recently uploaded

Recently uploaded (20)

4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa