SlideShare une entreprise Scribd logo
Nouveautés JavaScript dans
le monde Microsoft
Etienne MARGRAFF - @meulta
Technical Evangelist – Microsoft France
David ROUSSET - @davrous
Sr Program Manager – Microsoft Corp
JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
Merci à tous les participants
Et surtout…
Jean-Pierre
Vincent
#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éveloppeur: F12
Nouveautés JavaScript dans le monde Microsoft
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
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/
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
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
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é
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 {
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);
}
#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 sont faits automatiquement
Son omnidirectionnels ou directionnels
Spatialiser
#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 (reverb, cathédrale, téléphone,
etc.)
Compression dynamique
Et bien d’autres choses encore!
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!
#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 ainsi défini se nomme ECMAScript
Très proche de TypeScript
JavaScript Open Day#jsod
● Avant, on utilisait des "versions"
o
o
o
o
● Maintenant, des features sont livrées quand
terminées
o
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 boucle
for ( let i = 0; i < 5; i++ ) {
// utilisez i comme vous voulez
}
// impossible d’utiliser i après la boucle
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
#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 accident:
const maConstante = true;
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 …
}
JavaScript Open Day#jsod
Seulement le binding est const
const a = [];
a.push("Hello"); // fine
a.length = 0; // fine too
a = ["Dave"]; // error
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");
#jsod JavaScript Open Day
DEMO
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();
}
}
#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) {
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);
});
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);
}
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);
}
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);
}
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
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);
}
};
#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, 4]
var addToStore = function(category, ...items) {
store[category].push(...items);
};
Spread operator
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!"
);
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!
`);
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
#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://creativecommons.org/licenses/by/3.0/ CC BY
3.0
Freepik
JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft

Contenu connexe

Tendances

Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)
Julien CROUZET
 
Javascript pour le développeur Java
Javascript pour le développeur JavaJavascript pour le développeur Java
Javascript pour le développeur Java
jollivetc
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projet
jollivetc
 
Formation VBA Excel
Formation VBA ExcelFormation VBA Excel
Formation VBA Excel
Olivier Le Goaër
 
Guide javascript
Guide javascriptGuide javascript
Guide javascript
jollivetc
 
Change mind about JS
Change mind about JSChange mind about JS
Change mind about JS
Damien Simonin Feugas
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
Abdoulaye Dieng
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
Abdoulaye Dieng
 
Cpp2 : classes et objets
Cpp2 : classes et objetsCpp2 : classes et objets
Cpp2 : classes et objets
Abdoulaye Dieng
 
Les Promises en Javascript
Les Promises en JavascriptLes Promises en Javascript
Les Promises en Javascript
Benoit Zohar
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
Abdoulaye Dieng
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
JavaScript pour le développeur Java
JavaScript pour le développeur JavaJavaScript pour le développeur Java
JavaScript pour le développeur Java
jollivetc
 
Python For Data Science - French Course
Python For Data Science - French CoursePython For Data Science - French Course
Python For Data Science - French Course
Haytam EL YOUSSFI
 
Introduction à scala
Introduction à scalaIntroduction à scala
Introduction à scala
SOAT
 

Tendances (18)

Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)
 
Javascript pour le développeur Java
Javascript pour le développeur JavaJavascript pour le développeur Java
Javascript pour le développeur Java
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projet
 
Formation VBA Excel
Formation VBA ExcelFormation VBA Excel
Formation VBA Excel
 
Guide javascript
Guide javascriptGuide javascript
Guide javascript
 
Change mind about JS
Change mind about JSChange mind about JS
Change mind about JS
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Cpp2 : classes et objets
Cpp2 : classes et objetsCpp2 : classes et objets
Cpp2 : classes et objets
 
Les Promises en Javascript
Les Promises en JavascriptLes Promises en Javascript
Les Promises en Javascript
 
La programmation fonctionnelle en javascript / PF
La programmation fonctionnelle en javascript / PFLa programmation fonctionnelle en javascript / PF
La programmation fonctionnelle en javascript / PF
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
JavaScript pour le développeur Java
JavaScript pour le développeur JavaJavaScript pour le développeur Java
JavaScript pour le développeur Java
 
Python For Data Science - French Course
Python For Data Science - French CoursePython For Data Science - French Course
Python For Data Science - French Course
 
Introduction à scala
Introduction à scalaIntroduction à scala
Introduction à scala
 

En vedette

Autocomplete con AngularJs
Autocomplete con AngularJs Autocomplete con AngularJs
Autocomplete con AngularJs
Scio Consulting
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
Rodrigo Branas
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
Sébastien Ollivier
 
DER BESTE MP3 YP-S3 VORSCHAU.1
DER BESTE MP3 YP-S3 VORSCHAU.1DER BESTE MP3 YP-S3 VORSCHAU.1
DER BESTE MP3 YP-S3 VORSCHAU.1
damai789
 
cajón de maipo
cajón de maipocajón de maipo
cajón de maipo
calupus84
 
Martinique dani hugo
Martinique dani hugoMartinique dani hugo
Martinique dani hugopacitina
 
Alfabeto emocional
Alfabeto emocionalAlfabeto emocional
Alfabeto emocional
Leila Cura
 
El enojo y sus consecuencias
El enojo y sus consecuenciasEl enojo y sus consecuencias
El enojo y sus consecuencias
USET
 
Le Diagnostic Mobile
Le Diagnostic MobileLe Diagnostic Mobile
Le Diagnostic Mobile
Florence consultant
 
Ochi tag
Ochi tagOchi tag
Ochi tagYPEPTH
 
Présentation Finexkap 2015 03-05
Présentation Finexkap 2015 03-05Présentation Finexkap 2015 03-05
Présentation Finexkap 2015 03-05Sylvain Tillon
 
SlideShare
SlideShareSlideShare
SlideShare
Shellbell3073
 
Hacia un pensamiento complejo capaz de relacionar
Hacia un pensamiento complejo capaz de relacionarHacia un pensamiento complejo capaz de relacionar
Hacia un pensamiento complejo capaz de relacionar
monicaeq
 
John Dewar
John DewarJohn Dewar
John Dewar
Kaye David
 
Feria de mecatrónica
Feria de mecatrónicaFeria de mecatrónica
Feria de mecatrónica
Alain Cruz
 
Para mejorar la habilidades sociales de nuestros alumnos en tareas grupales...
Para mejorar la habilidades sociales de nuestros alumnos en tareas grupales...Para mejorar la habilidades sociales de nuestros alumnos en tareas grupales...
Para mejorar la habilidades sociales de nuestros alumnos en tareas grupales...
lgonzalezcabrera
 
Die epiphanie.ppt
Die epiphanie.pptDie epiphanie.ppt
Die epiphanie.pptYPEPTH
 

En vedette (20)

Autocomplete con AngularJs
Autocomplete con AngularJs Autocomplete con AngularJs
Autocomplete con AngularJs
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
 
DER BESTE MP3 YP-S3 VORSCHAU.1
DER BESTE MP3 YP-S3 VORSCHAU.1DER BESTE MP3 YP-S3 VORSCHAU.1
DER BESTE MP3 YP-S3 VORSCHAU.1
 
cajón de maipo
cajón de maipocajón de maipo
cajón de maipo
 
Martinique dani hugo
Martinique dani hugoMartinique dani hugo
Martinique dani hugo
 
Alfabeto emocional
Alfabeto emocionalAlfabeto emocional
Alfabeto emocional
 
El enojo y sus consecuencias
El enojo y sus consecuenciasEl enojo y sus consecuencias
El enojo y sus consecuencias
 
Le Diagnostic Mobile
Le Diagnostic MobileLe Diagnostic Mobile
Le Diagnostic Mobile
 
Ochi tag
Ochi tagOchi tag
Ochi tag
 
Présentation Finexkap 2015 03-05
Présentation Finexkap 2015 03-05Présentation Finexkap 2015 03-05
Présentation Finexkap 2015 03-05
 
SlideShare
SlideShareSlideShare
SlideShare
 
Hacia un pensamiento complejo capaz de relacionar
Hacia un pensamiento complejo capaz de relacionarHacia un pensamiento complejo capaz de relacionar
Hacia un pensamiento complejo capaz de relacionar
 
Jacob
JacobJacob
Jacob
 
John Dewar
John DewarJohn Dewar
John Dewar
 
El meu avi és jardiner
El meu avi és jardinerEl meu avi és jardiner
El meu avi és jardiner
 
Feria de mecatrónica
Feria de mecatrónicaFeria de mecatrónica
Feria de mecatrónica
 
Para mejorar la habilidades sociales de nuestros alumnos en tareas grupales...
Para mejorar la habilidades sociales de nuestros alumnos en tareas grupales...Para mejorar la habilidades sociales de nuestros alumnos en tareas grupales...
Para mejorar la habilidades sociales de nuestros alumnos en tareas grupales...
 
Die epiphanie.ppt
Die epiphanie.pptDie epiphanie.ppt
Die epiphanie.ppt
 
Communiqué de presse Application iPhone National Citer
Communiqué de presse Application iPhone National CiterCommuniqué de presse Application iPhone National Citer
Communiqué de presse Application iPhone National Citer
 

Similaire à Nouveautés JavaScript dans le monde Microsoft

Découverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanDécouverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet Spartan
Microsoft
 
Patterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptPatterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScript
Microsoft Technet France
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech daysJean-Pierre Vincent
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?
Ruau Mickael
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
Dr Samir A. ROUABHI
 
HTML5 en projet
HTML5 en projetHTML5 en projet
HTML5 en projet
Normandy JUG
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovyguest6e3bed
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation GroovyJS Bournival
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
Jean-Pierre Vincent
 
Dynamic Languages
Dynamic LanguagesDynamic Languages
Dynamic Languages
Tugdual Grall
 
JavaScript pour les développeurs .NET
JavaScript pour les développeurs .NETJavaScript pour les développeurs .NET
JavaScript pour les développeurs .NET
Thomas Conté
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
Jean-Pierre Vincent
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
Xavier MARIN
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Aurélien Maury
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
Valtech
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejsnaholyr
 
Future of java script web version
Future of java script web versionFuture of java script web version
Future of java script web version
Sébastien Pertus
 
Javascript Json artchitecture
Javascript  Json artchitecture Javascript  Json artchitecture
Javascript Json artchitecture
zaghir
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hoodsvuillet
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
5pidou
 

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

Découverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanDécouverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet Spartan
 
Patterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptPatterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScript
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
 
HTML5 en projet
HTML5 en projetHTML5 en projet
HTML5 en projet
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
 
Dynamic Languages
Dynamic LanguagesDynamic Languages
Dynamic Languages
 
JavaScript pour les développeurs .NET
JavaScript pour les développeurs .NETJavaScript pour les développeurs .NET
JavaScript pour les développeurs .NET
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejs
 
Future of java script web version
Future of java script web versionFuture of java script web version
Future of java script web version
 
Javascript Json artchitecture
Javascript  Json artchitecture Javascript  Json artchitecture
Javascript Json artchitecture
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 

Plus de davrous

Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016
davrous
 
Create fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audioCreate fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audio
davrous
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.js
davrous
 
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esCreating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
davrous
 
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSIntroduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
davrous
 
Babylon.js WebGL Paris
Babylon.js  WebGL ParisBabylon.js  WebGL Paris
Babylon.js WebGL Paris
davrous
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Source
davrous
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGL
davrous
 
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsNGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
davrous
 
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsRéaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
davrous
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
davrous
 
Pointer events
Pointer eventsPointer events
Pointer events
davrous
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
davrous
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
davrous
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
davrous
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
davrous
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
davrous
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
davrous
 

Plus de davrous (20)

Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016
 
Create fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audioCreate fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audio
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.js
 
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esCreating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
 
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSIntroduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
 
Babylon.js WebGL Paris
Babylon.js  WebGL ParisBabylon.js  WebGL Paris
Babylon.js WebGL Paris
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Source
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGL
 
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsNGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
 
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsRéaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Pointer events
Pointer eventsPointer events
Pointer events
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
 

Dernier

OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 

Dernier (6)

OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 

Nouveautés JavaScript dans le monde Microsoft

  • 1. Nouveautés JavaScript dans le monde Microsoft Etienne MARGRAFF - @meulta Technical Evangelist – Microsoft France David ROUSSET - @davrous Sr Program Manager – Microsoft Corp
  • 2. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft Merci à tous les participants Et surtout… Jean-Pierre Vincent
  • 3. #jsod JavaScript Open Day TEASING
  • 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. 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. 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.
  • 8. 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
  • 9. 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
  • 10. 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é
  • 11. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE Un graph à base de nœuds audio
  • 12. 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); }
  • 14. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE Mélanger des sons facilement
  • 16. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE Analyser le son
  • 18. 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
  • 20. 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!
  • 21. 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!
  • 23. 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
  • 24. JavaScript Open Day#jsod ● Avant, on utilisait des "versions" o o o o ● Maintenant, des features sont livrées quand terminées o
  • 25. JavaScript Open Day#jsod ● Ce qui peut être ‘polyfilled’ o ● Les nouvelles syntaxes o transpile
  • 26. 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
  • 27. 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
  • 29. 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;
  • 30. 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 … }
  • 31. JavaScript Open Day#jsod Seulement le binding est const const a = []; a.push("Hello"); // fine a.length = 0; // fine too a = ["Dave"]; // error
  • 32. 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");
  • 34. 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(); } }
  • 36. 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); });
  • 37. 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); }
  • 38. 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); }
  • 39. 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); }
  • 40. 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
  • 41. 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); } };
  • 43. 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
  • 44. 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!" );
  • 45. 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! `);
  • 46. 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
  • 48. JavaScript Open Day#jsodNouveautés du moteur de rendu de IE
  • 50. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft
  • 51. 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
  • 52. JavaScript Open Day#jsodNouveautés JavaScript dans le monde Microsoft

Notes de l'éditeur

  1. Together as a team
  2. David
  3. Etienne
  4. David
  5. Etienne
  6. David
  7. David
  8. David
  9. David
  10. David
  11. David : Démo de chargement et lecture d’un son avec play(0) et play dans le temps.
  12. David : Démo avec 2 sons synchronisés, un masterGain, chacun son gain et des sliders pour jouer sur les volumes.
  13. David : Création du graph du slide avec 2 son, 3 gain et 3 analyser.
  14. David: http://www.babylonjs-playground.com/#2AH4YH Etienne : Music Lounge
  15. David
  16. Etienne
  17. Etienne : https://http2.golang.org/gophertiles?latency=0
  18. David
  19. David
  20. Etienne
  21. Etienne
  22. Etienne
  23. Etienne : « Let it be »
  24. David
  25. David
  26. David
  27. DAvid
  28. David : « constituation »
  29. Démo babel.js
  30. 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
  31. David
  32. David
  33. David
  34. Etienne
  35. David
  36. David
  37. David: music lounge
  38. Etienne
  39. David
  40. David
  41. Etienne
  42. David & Etienne
  43. David & Etienne
  44. David : définir la demo