Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Nouveautés JavaScript dans le monde Microsoft

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
Cours JavaScript
Cours JavaScript
Chargement dans…3
×

Consultez-les par la suite

1 sur 52 Publicité

Nouveautés JavaScript dans le monde Microsoft

Télécharger pour lire hors ligne

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

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

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (19)

Les utilisateurs ont également aimé (20)

Publicité

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

Plus par davrous (20)

Publicité

Plus récents (20)

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

Notes de l'éditeur

  • 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

×