Nouveautés JavaScript dans
le monde Microsoft
Etienne MARGRAFF - @meulta
Technical Evangelist – Microsoft France
David ROU...
JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
Merci à tous les participants
Et surtout…
Jean-Pierr...
#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éveloppe...
JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
En faisant table rase du passé
Nouveau moteur :
S’as...
JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
Quelques trucs cool qui arrivent
Le support les plus...
JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
Le dernier stade de l’evolution auditive du web!
<bg...
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 audi...
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Rendu sur un thread séparé
Les codecs supportés sont ceux du n...
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Un graph à base de nœuds audio
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Création du contexte audio
var canUseWebAudio = false;
try {
i...
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Mélanger des sons facilement
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Analyser le son
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Basé sur OpenAL (Open Audio Library)
La plupart des calculs so...
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Oscillators
Sons procéduraux
Filtres
Effets via les convolvers...
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Géré par l’IETF et basé sur SPDY/3
Purement retro-compatible a...
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsodTitre session pied de page
Le cœur de JavaScript est défini par le standard
ECMA-262
Le langage ai...
JavaScript Open Day#jsod
● Avant, on utilisait des "versions"
o
o
o
o
● Maintenant, des features sont livrées quand
termin...
JavaScript Open Day#jsod
● Ce qui peut être ‘polyfilled’
o
● Les nouvelles syntaxes
o
transpile
JavaScript Open Day#jsod
let
Un vrai scope dans les blocs de code pour les
variables!
// Impossible d’utiliser i avant la ...
JavaScript Open Day#jsod
let
// ‘tmp’ n’est pas défini ici
if ( swapxy ) {
let tmp = y;
y = x
x = tmp;
}
// ‘tmp’ n’est pl...
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsod
const
Un meilleur moyen de déclarer des ‘non-variables’
pour qu’elles ne soient pas modifiées par...
JavaScript Open Day#jsod
const
Peut être (re)défini à l’intérieur d’une boucle:
for ( let i = 0; i < elems.length; i++ ) {...
JavaScript Open Day#jsod
Seulement le binding est const
const a = [];
a.push("Hello"); // fine
a.length = 0; // fine too
a...
JavaScript Open Day#jsod
Les bugs empêchés par const
var greet = ["Hello", "Dave"];
$("#greeting").data("greeting", greet)...
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
function Mesh(name) {
// call the superclass constructor
BABYL...
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
fs.readFile('config.json',
function (error, text) {
if (error)...
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
var duties = ['one', 'two', 'three'];
Array.prototype._someLib...
JavaScript Open Day#jsod
function NumberIterator(arr) {
this['@@iterator'] = function () {
var index = 0;
return {
next: f...
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
function* count() {
yield 1;
yield 2;
yield 3;
}
var counter =...
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
var sum = (num1, num2) => { return num1 + num2; }
// ==
var su...
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
Arrow functions
var PageHandler = {
id: "123456",
init: functi...
#jsod JavaScript Open Day
DEMO
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...
JavaScript Open Day#jsod
Combien de fois avez vous vu ceci?
$("#result").append(
"Il y a <b>" + basket.count + "</b> " +
"...
JavaScript Open Day#jsod
Maintenant vous pouvez faire ça:
$("#result").append(`
Il y a <b>${basket.count}</b> éléments
dan...
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
var loggable = function(obj) {
return Proxy.create({
get: func...
#jsod JavaScript Open Day
JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
#jsod JavaScript Open Day
DEMO
JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
JavaScript Open Day#jsod
Icône faites avec http://www.freepik.com par
http://www.flaticon.com est licensié sous
http://cre...
JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
Prochain SlideShare
Chargement dans…5
×

Nouveautés JavaScript dans le monde Microsoft

2 077 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

Nouveautés JavaScript dans le monde Microsoft

  1. 1. Nouveautés JavaScript dans le monde Microsoft Etienne MARGRAFF - @meulta Technical Evangelist – Microsoft France David ROUSSET - @davrous Sr Program Manager – Microsoft Corp
  2. 2. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft Merci à tous les participants Et surtout… Jean-Pierre Vincent
  3. 3. #jsod JavaScript Open Day TEASING
  4. 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. 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. 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. 7. 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
  8. 8. 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
  9. 9. 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é
  10. 10. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE Un graph à base de nœuds audio
  11. 11. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE 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); }
  12. 12. #jsod JavaScript Open Day DEMO
  13. 13. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE Mélanger des sons facilement
  14. 14. #jsod JavaScript Open Day DEMO
  15. 15. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE Analyser le son
  16. 16. #jsod JavaScript Open Day DEMO
  17. 17. 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
  18. 18. #jsod JavaScript Open Day DEMO
  19. 19. 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!
  20. 20. 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!
  21. 21. #jsod JavaScript Open Day DEMO
  22. 22. 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
  23. 23. JavaScript Open Day#jsod ● Avant, on utilisait des "versions" o o o o ● Maintenant, des features sont livrées quand terminées o
  24. 24. JavaScript Open Day#jsod ● Ce qui peut être ‘polyfilled’ o ● Les nouvelles syntaxes o transpile
  25. 25. 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
  26. 26. 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
  27. 27. #jsod JavaScript Open Day DEMO
  28. 28. 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;
  29. 29. 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 … }
  30. 30. JavaScript Open Day#jsod Seulement le binding est const const a = []; a.push("Hello"); // fine a.length = 0; // fine too a = ["Dave"]; // error
  31. 31. 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");
  32. 32. #jsod JavaScript Open Day DEMO
  33. 33. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE function Mesh(name) { // call the superclass constructor BABYLON.AbstractMesh.call(this, name); // initialize instance properties this.color = BABYLON.Vector3.Color3(); ... }; // inherit behavior from Mesh Mesh.prototype = Object.create(BABYLON.AbstractMesh.prototype); Mesh.prototype.constructor = Mesh; // define an overridden update() method Mesh.prototype.render = function() { ... // call base version of same method BABYLON.AbstractMesh.prototype. render.call(this); }; Classes class Mesh extends BABYLON.AbstractMesh { constructor(name) { super(name); this.color = BABYLON.Vector3.Color3(); } render() { ... super.render(); } }
  34. 34. #jsod JavaScript Open Day DEMO
  35. 35. 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); });
  36. 36. 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); }
  37. 37. 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); }
  38. 38. 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); }
  39. 39. 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
  40. 40. 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); } };
  41. 41. #jsod JavaScript Open Day DEMO
  42. 42. 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
  43. 43. 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!" );
  44. 44. 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! `);
  45. 45. 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
  46. 46. #jsod JavaScript Open Day
  47. 47. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
  48. 48. #jsod JavaScript Open Day DEMO
  49. 49. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
  50. 50. 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
  51. 51. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft

×