SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
4.
@romaintaz#DvxFrWeb2015
Petit panorama du web en 2015
5.
Catégorie « Valeur sûre à laquelle nous
n'échapperons pas en 2015 »
ECMAScript 6
6.
@romaintaz#DvxFrWeb2015
Petit historique d'ECMAScript
1997
1998
1999
…
2009
…
2015
ES 1
ES 2
ES 3
ES 5
ES 6
ES 4
7.
@romaintaz#DvxFrWeb2015
ECMAScript 6, les classes
class DevoxxFrance extends Conference {
constructor(name) {
this.name = name;
}
welcome() {
return "Welcome to " + this.name;
}
}
8.
@romaintaz#DvxFrWeb2015
ECMAScript 6, "let" & "const"
var a = 42, b = 42;
if (true) {
var a = 0;
let b = 0; // Portée limitée au scope if {}
console.log(a); // 0
console.log(b); // 0
}
console.log(a); // 0
console.log(b); // 42
for (let i = 0; i < 10; i++) { ... }
// i undefined
const la_reponse = 42;
la_reponse = 21;
console.log(la_reponse); // retourne 42
9.
@romaintaz#DvxFrWeb2015
ECMAScript 6, "String interpolation"
var answer = 42;
console.log(`La réponse est ${answer}`);
// La réponse est 42
function where() {
return "Devoxx France";
}
console.log(`Bienvenue à ${where()}!`);
// Bienvenue à Devoxx France!
10.
@romaintaz#DvxFrWeb2015
ECMAScript 6, "=>"
var nombres = [1, 2, 3, 4, 5];
var pairs = nombres.filter(n => n % 2 == 0); // retourne [2, 4]
// var pairs = nombres.filter(function (n) {
// return n % 2 == 0;
// });
function compteur() {
this.valeur = 0;
setInterval(
() => { this.valeur++; } // Pas de problème avec this
, 1000);
}
11.
@romaintaz#DvxFrWeb2015
ECMAScript 6, autres
• Promesses
• Syntaxe for…of
• Modules
• Structure de données
• Etc.
12.
@romaintaz#DvxFrWeb2015
ECMAScript 6, le support des navigateurs
https://kangax.github.io/compat-table/es6/
18.
@romaintaz#DvxFrWeb2015
Les standards Web Components
• Shadow DOM
• Template
• HTML Import
• Custom Elements
19.
@romaintaz#DvxFrWeb2015
Créer ses Web Components
Google
Polymer
Bosonic
Mozilla
X-Tag
IBM
Delite
20.
@romaintaz#DvxFrWeb2015
Les Web Components prêts pour la prod?
• Standards encore (un peu) en évolution
• Implémentations très changeantes
• Compatibilité des navigateurs
http://jonrimmer.github.io/are-we-componentized-yet/
28.
Catégorie « Pas si vieux, mais qui va faire
encore pas mal parler de lui »
React
29.
@romaintaz#DvxFrWeb2015
React
• Projet par acebook
• Sorti en 2013
• S’occupe uniquement de la partie vue (MV*)
• JavaScript isomorphique (serveur & client)
• React Native pour des applications mobiles natives
30.
@romaintaz#DvxFrWeb2015
React – Principaux avantages
• Dataflow uni-directionnel :
o voir React comme une fonction (état) à (DOM)
o le même état donne toujours le même rendu
• DOM « virtuel » :
o Manipulation plus rapide
o Modifications minimales
31.
@romaintaz#DvxFrWeb2015
Le JSX de React
...
<div id="message"></div>
<script type="text/jsx">
React.render(
<h1>Hello Devoxx!</h1>,
document.getElementById("message")
);
</script>
...