Nouveautés JavaScript dans le monde Microsoft

Nouveautés JavaScript dans
le monde Microsoft
Etienne MARGRAFF - @meulta
Technical Evangelist – Microsoft France
David ROUSSET - @davrous
Sr Program Manager – Microsoft Corp

JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
Merci à tous les participants
Et surtout…
Jean-Pierre
Vincent

#jsod JavaScript Open Day
TEASING

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

En faisant table rase du passé
Nouveau moteur :
S’assurer d’une compatibilité cross-navigateurs et pas
uniquement à la spec W3C
Nouvel UA

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/

Nouveauté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

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

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é

Un graph à base de nœuds audio

Création du contexte audio
var canUseWebAudio = false;
try {
if (typeof AudioContext !== 'undefined') {
audioContext = new AudioContext();
canUseWebAudio = true;
} else if (typeof webkitAudioContext !== 'undefined') {
audioContext = new webkitAudioContext();
canUseWebAudio = true;
}
} catch (e) {
console.error("Web Audio: " + e.message);
}

#jsod JavaScript Open Day
DEMO

Mélanger des sons facilement

Analyser le son

Basé sur OpenAL (Open Audio Library)
La plupart des calculs sont faits automatiquement
Son omnidirectionnels ou directionnels
Spatialiser

Oscillators
Sons procéduraux
Filtres
Effets via les convolvers (reverb, cathédrale, téléphone,
etc.)
Compression dynamique
Et bien d’autres choses encore!

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!

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

● Avant, on utilisait des "versions"
o
o
o
o
● Maintenant, des features sont livrées quand
terminées
o

● Ce qui peut être ‘polyfilled’
o
● Les nouvelles syntaxes
o
transpile

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

let
// ‘tmp’ n’est pas défini ici
if ( swapxy ) {
let tmp = y;
y = x
x = tmp;
}
// ‘tmp’ n’est plus défini ici

const
Un meilleur moyen de déclarer des ‘non-variables’
pour qu’elles ne soient pas modifiées par accident:
const maConstante = true;

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 …
}

Seulement le binding est const
const a = [];
a.push("Hello"); // fine
a.length = 0; // fine too
a = ["Dave"]; // error

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

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

function* count() {
yield 1;
yield 2;
yield 3;
}
var counter = count();
counter.next(); // {value: 1, 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);
}

var sum = (num1, num2) => { return num1 + num2; }
// ==
var sum = function(num1, num2) {
return num1 + num2;
};
Arrow functions

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

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

Combien de fois avez vous vu ceci?
$("#result").append(
"Il y a " + basket.count + " " +
"éléments dans votre panier, " +
"" + basket.onSale +
" sont en solde!"
);

Maintenant vous pouvez faire ça:
$("#result").append(`
Il y a ${basket.count} éléments
dans votre panier, ${basket.onSale}
sont en solde!
`);

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

Nouveautés JavaScript dans le monde Microsoft

Contenu connexe

Tendances (18)

En vedette (20)

Similaire à Nouveautés JavaScript dans le monde Microsoft (20)

Plus de davrous (20)

Nouveautés JavaScript dans le monde Microsoft

Notes de l'éditeur