Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr
Nouveautés du moteur de
rendu du projet Spartan
David CATUHE – David ROUSSET
@deltakosh
@davrous
tech days•
2015
#mstechdays techdays.microsoft.fr
TEASING
tech.days 2015#mstechdays
Architecture du moteur de rendu
WebAudio
HTTP/2
CSS animations and transitions pour SVG
ECMAScri...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Un long chemin pour un clic
Browser
User
NetworkConnection Pr...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Web Platform Runtime
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Un seul browser – Plusieurs modes
Compatibilite
mshtml.dll
IE...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Le dernier stade de l’evolution auditive du web!
<bgsound>
fl...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Accès complet au stream du son
Basé sur un graph de nœuds aud...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Matériellement accéléré
Les codecs supportés sont ceux du nav...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Un graph à base de nœuds audio
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Création du contexte audio
var canUseWebAudio = false;
try {
...
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Mélanger des sons facilement
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Analyser le son
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Basé sur OpenAL (Open Audio Library)
La plupart des calculs a...
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Oscillators
Sons procéduraux
Filtres
Effets via les convolver...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Géré par l’IETF et basé sur SPDY/3
Purement retro-compatible ...
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysTitre session pied de page
Le cœur de JavaScript est défini par le standard
ECMA-262
Le langage a...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
function Mesh(name) {
// call the superclass constructor
BABY...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
fs.readFile('config.json',
function (error, text) {
if (error...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var arr = ['one', 'two', 'three'];
Array.prototype._someLibra...
tech.days 2015#mstechdays
function NumberIterator(arr) {
this['@@iterator'] = function () {
var index = 0;
return {
next: ...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
function* count() {
yield 1;
yield 2;
yield 3;
}
var counter ...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var sum = (num1, num2) => { return num1 + num2; }
// ==
var s...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Arrow functions
var PageHandler = {
id: "123456",
init: funct...
tech.days 2015#mstechdaysTitre session pied de page
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN")...
tech.days 2015#mstechdaysTitre session pied de page
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Obj...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
function createMonster(name, power) {
return { type: 'Monster...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var x = [1, 2];
var y = [3, 4];
x.push(...y); // x is [1, 2, ...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var a = 5;
var b = 10;
`Donc ca nous fait: ${a + b} euros`
//...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Clef unique et immutable
Utile pour identifier une propriété
...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var loggable = function(obj) {
return Proxy.create({
get: fun...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(wi...
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
Nouveautés du moteur
de rendu de IE
David CATUHE – David ROUSSET
@deltakosh
@davrous
tech.days 2015#mstechdays
Icon made by http://www.freepik.com from
http://www.flaticon.com is licensed under
http://creati...
Prochain SlideShare
Chargement dans…5
×

Découverte du moteur de rendu du projet Spartan

2 076 vues

Publié le

Dans cette session, nous découvrirons l'ensemble des nouveautés du moteur de rendu du dernier navigateur de Microsoft. Vous l'avez peut-être déjà découvert lors de l'évènement du 21 janvier. Venez cette fois-ci découvrir ce qu'il y a sous le capot du point de vue du développeur. Ce sera pour nous l'occasion de vous parler des dernières technologies HTML5 comme ECMAScript 6, des dernières avancées côté WebGL ou bien encore du support de Web Audio. Pour finir, vous verrez également les progrès que nous avons effectué du côté la barre de développement.

Publié dans : Technologie
  • Soyez le premier à commenter

Découverte du moteur de rendu du projet Spartan

  1. 1. AMBIENT INTELLIGENCE tech days• 2015 #mstechdays techdays.microsoft.fr
  2. 2. Nouveautés du moteur de rendu du projet Spartan David CATUHE – David ROUSSET @deltakosh @davrous
  3. 3. tech days• 2015 #mstechdays techdays.microsoft.fr TEASING
  4. 4. tech.days 2015#mstechdays Architecture du moteur de rendu WebAudio HTTP/2 CSS animations and transitions pour SVG ECMAScript 6 Outils pour le développeur: F12 Nouveautés du moteur de rendu de IE
  5. 5. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Un long chemin pour un clic Browser User NetworkConnection Protocol System & Apps Server Settings Auth Content CDN/EdgeWeb Platform Runtime
  6. 6. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Web Platform Runtime
  7. 7. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Un seul browser – Plusieurs modes Compatibilite mshtml.dll IE5 Quirks IE7 Compat View IE8 Standards Mode IE9 Standards Mode IE10 Standards Mode QME Quirks Mode Emulation IE11 Standards Mode EMIE Enterprise Mode Edge Nouveau moteur de rendu edgehtml.dll
  8. 8. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Le dernier stade de l’evolution auditive du web! <bgsound> flash <audio> Web Audio API Learn Web Audio API
  9. 9. tech.days 2015#mstechdaysNouveauté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. 10. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Matériellement accéléré 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é
  11. 11. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Un graph à base de nœuds audio
  12. 12. tech.days 2015#mstechdaysNouveauté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); }
  13. 13. tech days• 2015 #mstechdays techdays.microsoft.fr DEMO
  14. 14. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Mélanger des sons facilement
  15. 15. tech days• 2015 #mstechdays techdays.microsoft.fr DEMO
  16. 16. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Analyser le son
  17. 17. tech days• 2015 #mstechdays techdays.microsoft.fr DEMO
  18. 18. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Basé sur OpenAL (Open Audio Library) La plupart des calculs automatiquement faits Son omnidirectionnels ou directionnels Spatialiser
  19. 19. tech days• 2015 #mstechdays techdays.microsoft.fr DEMO
  20. 20. tech.days 2015#mstechdaysNouveauté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. 21. tech.days 2015#mstechdaysNouveauté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!
  22. 22. tech days• 2015 #mstechdays techdays.microsoft.fr DEMO
  23. 23. tech.days 2015#mstechdaysTitre 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. 24. tech.days 2015#mstechdaysNouveauté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(); } }
  25. 25. tech.days 2015#mstechdaysNouveauté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); });
  26. 26. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE var arr = ['one', 'two', 'three']; Array.prototype._someLibraryAddedThis = {}; for (var i in arr) { if (arr.hasOwnProperty(i)) { console.log(arr[i]); } } Iterators var arr = ['one', 'two', 'three']; Array.prototype._someLibraryAddedThis = {}; for (var i of arr) { console.log(i); }
  27. 27. tech.days 2015#mstechdays 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); }
  28. 28. tech.days 2015#mstechdaysNouveauté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); }
  29. 29. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE var sum = (num1, num2) => { return num1 + num2; } // == var sum = function(num1, num2) { return num1 + num2; }; Arrow functions
  30. 30. tech.days 2015#mstechdaysNouveauté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); } };
  31. 31. tech.days 2015#mstechdaysTitre session pied de page Number.EPSILON Number.isInteger(Infinity) // false Number.isNaN("NaN") // false Math.acosh(3) // 1.762747174039086 Math.hypot(3, 4) // 5 Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2 "abcde".contains("cd") // true "abc".repeat(3) // "abcabcabc" Array.from(document.querySelectorAll('*')) // Retourne un vrai Array Array.of(1, 2, 3) // Similaire avec new Array(...) mais avec plusieurs parametres [0, 0, 0].fill(7, 1) // [0,7,7] [1,2,3].findIndex(x => x == 2) // 1 ["a", "b", "c"].entries() // iterateur [0, "a"], [1,"b"], [2,"c"] ["a", "b", "c"].keys() // iterateur 0, 1, 2 ["a", "b", "c"].values() // iterateur "a", "b", "c" Math, Number, Object, String Built-Ins
  32. 32. tech.days 2015#mstechdaysTitre session pied de page var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } Math, Number, Object, String Built-Ins
  33. 33. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE function createMonster(name, power) { return { type: 'Monster', name: name, power: power }; } Object Literal Enhancements function createMonster(name, power) { return { type: 'Monster', name, power }; } var o = { property([parameters]) {}, get property() {}, set property(value) {}, * generator() {} }; var o = { property: function ([parameters]) {}, get property() {}, set property(value) {}, };
  34. 34. tech.days 2015#mstechdaysNouveauté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
  35. 35. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE var a = 5; var b = 10; `Donc ca nous fait: ${a + b} euros` // Donc ca nous fait 15 euros // Multi ligne console.log(`string text line 1 string text line 2`); Template Strings // Tag var a = 5; var b = 10; function tag(strings, ...values) { console.log(strings[0]); // "Hello " console.log(strings[1]); // " world" console.log(values[0]); // 15 console.log(values[1]); // 50 return "Babylon.js for ever!"; } tag`Hello ${ a + b } world ${ a * b}`; // "Babylon.js for ever!"
  36. 36. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE Clef unique et immutable Utile pour identifier une propriété Symbol("foo") === Symbol("foo"); // false var sym = new Symbol(); // TypeError var obj = {}; obj[Symbol("a")] = "a"; obj[Symbol.for("b")] = "b"; obj["c"] = "c"; obj.d = "d"; for (var i in obj) { console.log(i); // "c" and "d" } Symbols var obj = {}; var a = Symbol('a'); var b = Symbol.for('b'); obj[a] = 'localSymbol'; obj[b] = 'globalSymbol'; var objectSymbols = Object.getOwnPropertySymbols(obj); console.log(objectSymbols.length); // 2 console.log(objectSymbols); // [Symbol(a), Symbol(b)] console.log(objectSymbols[0]); // Symbol(a)
  37. 37. tech.days 2015#mstechdaysNouveauté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
  38. 38. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE var ws = new WeakSet(); var obj = {}; var foo = {}; ws.add(window); ws.add(obj); ws.has(window); // true ws.has(foo); // false ws.delete(window); ws.has(window); // false ws.clear(); Weak Set
  39. 39. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
  40. 40. tech days• 2015 #mstechdays techdays.microsoft.fr DEMO
  41. 41. Nouveautés du moteur de rendu de IE David CATUHE – David ROUSSET @deltakosh @davrous
  42. 42. tech.days 2015#mstechdays Icon made by http://www.freepik.com from http://www.flaticon.com is licensed under http://creativecommons.org/licenses/by/3.0/ CC BY 3.0 Freepik

×