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.

1. AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr

2. Nouveautés du moteur de
rendu du projet Spartan
David CATUHE – David ROUSSET
@deltakosh
@davrous

3. tech days•
2015
#mstechdays techdays.microsoft.fr
TEASING

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. 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. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Web Platform Runtime

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. 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. 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. 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. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Un graph à base de nœuds audio

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. tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO

14. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Mélanger des sons facilement

15. tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO

16. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Analyser le son

17. tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO

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. tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO

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. 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. tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE

40. tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO

41. Nouveautés du moteur
de rendu de IE
David CATUHE – David ROUSSET
@deltakosh
@davrous

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