Présentation delivrée le 19 mars 2015 lors du JavaScript Open Day: http://www.meetup.com/Javascript-Open-Day/events/220087351/
Au programme: les nouveautés du moteur du projet Spartan comme Web Audio ou ECMAScript 6
1. Nouveautés JavaScript dans
le monde Microsoft
Etienne MARGRAFF - @meulta
Technical Evangelist – Microsoft France
David ROUSSET - @davrous
Sr Program Manager – Microsoft Corp
4. JavaScript Open Day#jsod
Un nouveau moteur de rendu et JS
WebAudio
HTTP/2
ECMAScript 6
TypeScript
Outils pour le développeur: F12
Nouveautés JavaScript dans le monde Microsoft
5. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
En faisant table rase du passé
Nouveau moteur :
S’assurer d’une compatibilité cross-navigateurs et pas
uniquement à la spec W3C
Nouvel UA
6. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
Quelques trucs cool qui arrivent
Le support les plus avancés d’ES6
Web Audio
Media Capture API et Web RTC 1.1 (ORTC)
Touch Events
asm.js
… et quelques autres belles surprises en stock
Suivez: https://status.modern.ie/
7.
8. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
Le dernier stade de l’evolution auditive du web!
<bgsound>
flash
<audio>
Web Audio API
Learn Web Audio API
9. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Accès complet au stream du son
Basé sur un graph de nœuds audio
Contrôle précis du son :
En résumé
Temps
Filtres
Gain
Analyse spectrale
Convolvers
Accès par JS
Spatialisation 3D
10. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Rendu sur un thread séparé
Les codecs supportés sont ceux du navigateur, en
général au minimum MP3 et WAV
Scénarios : jeux, logiciels de musique en ligne,
reconnaissance et synthèse vocale, etc.
En résumé
18. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Basé sur OpenAL (Open Audio Library)
La plupart des calculs sont faits automatiquement
Son omnidirectionnels ou directionnels
Spatialiser
20. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Oscillators
Sons procéduraux
Filtres
Effets via les convolvers (reverb, cathédrale, téléphone,
etc.)
Compression dynamique
Et bien d’autres choses encore!
21. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Géré par l’IETF et basé sur SPDY/3
Purement retro-compatible avec l’ancien : mêmes
méthodes, entêtes, codes d’erreurs.
Conçu pour être plus rapide et efficace grâce
notamment au multiplexage ou du push depuis le
serveur
Dépoussiérons ce vieux HTTP 1.1 de 1999!
23. JavaScript Open Day#jsodTitre session pied de page
Le cœur de JavaScript est défini par le standard
ECMA-262
Le langage ainsi défini se nomme ECMAScript
Très proche de TypeScript
24. JavaScript Open Day#jsod
● Avant, on utilisait des "versions"
o
o
o
o
● Maintenant, des features sont livrées quand
terminées
o
26. JavaScript Open Day#jsod
let
Un vrai scope dans les blocs de code pour les
variables!
// Impossible d’utiliser i avant la boucle
for ( let i = 0; i < 5; i++ ) {
// utilisez i comme vous voulez
}
// impossible d’utiliser i après la boucle
27. JavaScript Open Day#jsod
let
// ‘tmp’ n’est pas défini ici
if ( swapxy ) {
let tmp = y;
y = x
x = tmp;
}
// ‘tmp’ n’est plus défini ici
29. JavaScript Open Day#jsod
const
Un meilleur moyen de déclarer des ‘non-variables’
pour qu’elles ne soient pas modifiées par accident:
const maConstante = true;
30. JavaScript Open Day#jsod
const
Peut être (re)défini à l’intérieur d’une boucle:
for ( let i = 0; i < elems.length; i++ ) {
const elem = elems[i];
// … faire des choses …
}
31. JavaScript Open Day#jsod
Seulement le binding est const
const a = [];
a.push("Hello"); // fine
a.length = 0; // fine too
a = ["Dave"]; // error
32. JavaScript Open Day#jsod
Les bugs empêchés par const
var greet = ["Hello", "Dave"];
$("#greeting").data("greeting", greet);
// Ceci ne met pas à jour l’objet data!
greet = ["Goodbye", "Dave"];
// Ceci fonctionne
greet.splice(0, 1, "Goodbye");
36. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
fs.readFile('config.json',
function (error, text) {
if (error) {
console.error('Error while reading config file');
} else {
try {
var obj = JSON.parse(text);
console.log(JSON.stringify(obj, null, 4));
} catch (e) {
console.error('Invalid JSON in file');
}
}
});
Promises
readFilePromisified('config.json')
.then(function (text) {
var obj = JSON.parse(text);
console.log(JSON.stringify(obj, null, 4));
})
.catch(function (reason) {
// File read error or JSON SyntaxError
console.error('An error occurred', reason);
});
37. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
var duties = ['one', 'two', 'three'];
Array.prototype._someLibraryAddedThis =
{};
for (var col in duties) {
if (arr.hasOwnProperty(call)) {
console.log(arr[call]);
}
}
Iterators
var duties = ['one', 'two', 'three'];
Array.prototype._someLibraryAddedThis =
{};
for (var col of duties) {
console.log(call);
}
38. JavaScript Open Day#jsod
function NumberIterator(arr) {
this['@@iterator'] = function () {
var index = 0;
return {
next: function () {
if (index >= arr.length) {
return {done: true};
} else {
return {
value: parseInt(arr[index++]),
done: false
}
}
}
}
};
}
Nouveautés du moteur de rendu de IE
Iterators
for (var i of new NumberIterator([1, 2, "3"])) {
console.log(i);
}
39. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
function* count() {
yield 1;
yield 2;
yield 3;
}
var counter = count();
counter.next(); // {value: 1, done: false}
counter.next(); // {value: 2, done: false}
counter.next(); // {value: 3, done: false}
counter.next(); // {done: true, value: undefined}
Generators
function* range(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}
for (let i of range(5, 8)) {
console.log(i);
}
40. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
var sum = (num1, num2) => { return num1 + num2; }
// ==
var sum = function(num1, num2) {
return num1 + num2;
};
Arrow functions
41. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Arrow functions
var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // Erreur
}, false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click",
event => this.doSomething(event.type), false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
43. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
var x = [1, 2];
var y = [3, 4];
x.push(...y); // x is [1, 2, 3, 4]
var addToStore = function(category, ...items) {
store[category].push(...items);
};
Spread operator
44. JavaScript Open Day#jsod
Combien de fois avez vous vu ceci?
$("#result").append(
"Il y a <b>" + basket.count + "</b> " +
"éléments dans votre panier, " +
"<em>" + basket.onSale +
"</em> sont en solde!"
);
45. JavaScript Open Day#jsod
Maintenant vous pouvez faire ça:
$("#result").append(`
Il y a <b>${basket.count}</b> éléments
dans votre panier, <em>${basket.onSale}</em>
sont en solde!
`);
46. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
var loggable = function(obj) {
return Proxy.create({
get: function get(receiver, prop) {
console.log('Getting ' + prop);
return obj[prop];
},
set: function set(receiver, prop, value) {
console.log('Setting ' + prop + ' to ' + value + '; was ' + obj[prop]);
obj[prop] = value;
});
};
var person = { name: ‘Sylvie', age: 25 };
person = loggable(person);
person.age += 1;
Proxies
51. JavaScript Open Day#jsod
Icône faites avec http://www.freepik.com par
http://www.flaticon.com est licensié sous
http://creativecommons.org/licenses/by/3.0/ CC BY
3.0
Freepik
Démo babel + démo TypeScript
Démo music lounge, classes TS -> JS, montre le JS, debug depuis VS le TS et debug le TS dans Chrome avec F12
On parle des sourcemap. Etienne
