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 036 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
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 036
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 149
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Together as a team
  • David
  • Etienne
  • David
  • Etienne
  • David
  • David
  • David
  • David
  • David
  • David : Démo de chargement et lecture d’un son avec play(0) et play dans le temps.
  • David : Démo avec 2 sons synchronisés, un masterGain, chacun son gain et des sliders pour jouer sur les volumes.
  • David : Création du graph du slide avec 2 son, 3 gain et 3 analyser.
  • David: http://www.babylonjs-playground.com/#2AH4YH
    Etienne : Music Lounge
  • David
  • Etienne
  • Etienne : https://http2.golang.org/gophertiles?latency=0
  • David
  • David
  • Etienne
  • Etienne
  • Etienne
  • Etienne : « Let it be »
  • David
  • David
  • David
  • DAvid
  • David : « constituation »
  • Démo babel.js
  • 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
  • David
  • David
  • David
  • Etienne
  • David
  • David
  • David: music lounge
  • Etienne
  • David
  • David
  • Etienne
  • David & Etienne
  • David & Etienne
  • David : définir la demo
  • 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

    ×