If you can't read please download the document
Upload
romain-linsolas
View
1.270
Download
3
Embed Size (px)
Citation preview
@romaintaz#DvxFrWeb2015
Dveloppement WebCe qui nous attend en 2015
@romaintaz#DvxFrWeb2015
Romain Linsolas
@romaintaz
Socit GnraleDveloppeur Java & Web
FrameworksWeb
@romaintaz#DvxFrWeb2015
Petit panorama du web en 2015
Catgorie Valeur sre laquelle nous n'chapperons pas en 2015
ECMAScript 6
@romaintaz#DvxFrWeb2015
Petit historique d'ECMAScript
19971998
1999
2009
2015
ES 1ES 2
ES 3
ES 5
ES 6
ES 4
@romaintaz#DvxFrWeb2015
ECMAScript 6, les classes
class DevoxxFrance extends Conference {
constructor(name) {this.name = name;
}
welcome() {return "Welcome to " + this.name;
}}
@romaintaz#DvxFrWeb2015
ECMAScript 6, "let" & "const"var a = 42, b = 42;if (true) {
var a = 0;let b = 0; // Porte limite au scope if {}console.log(a); // 0console.log(b); // 0
}console.log(a); // 0console.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
@romaintaz#DvxFrWeb2015
ECMAScript 6, "String interpolation"
var answer = 42;
console.log(`La rponse est ${answer}`);// La rponse est 42
function where() {return "Devoxx France";
}
console.log(`Bienvenue ${where()}!`);// Bienvenue Devoxx France!
@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 problme avec this, 1000);
}
@romaintaz#DvxFrWeb2015
ECMAScript 6, autres
Promesses Syntaxe forof Modules Structure de donnes Etc.
@romaintaz#DvxFrWeb2015
ECMAScript 6, le support des navigateurs
https://kangax.github.io/compat-table/es6/
@romaintaz#DvxFrWeb2015
Transpilons !
6to5 ("Babel") - https://babeljs.io
Traceur (Google)
https://github.com/addyosmani/es6-tools
Catgorie Autre valeur sre laquelle nous n'chapperons pas en 2015
Web Components
@romaintaz#DvxFrWeb2015
Pourquoi les Web Components ?
@romaintaz#DvxFrWeb2015
Pourquoi les Web Components ?
Onglet 1
Onglet 2
Contenu 1
Contenu 2
@romaintaz#DvxFrWeb2015
Pourquoi les Web Components ?
Onglet 1
Onglet 2
Contenu 1
Contenu 2
Contenu 1
Contenu 2
@romaintaz#DvxFrWeb2015
Les standards Web Components
Shadow DOM Template HTML Import Custom Elements
@romaintaz#DvxFrWeb2015
Crer ses Web Components
GooglePolymer
Bosonic
MozillaX-Tag
IBMDelite
@romaintaz#DvxFrWeb2015
Les Web Components prts pour la prod?
Standards encore (un peu) en volution Implmentations trs changeantes Compatibilit des navigateurs
http://jonrimmer.github.io/are-we-componentized-yet/
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
Catgorie Valeur peu prs sre mais que de toutes faons tout le monde va en parler, donc autant s'y prparer
Angular v2
@romaintaz#DvxFrWeb2015
Bref historique
20092010
20112012
20132014
20152016
1e release
1.0 1.11.2
1.31.4 1.5
2.0
@romaintaz#DvxFrWeb2015
Angular, un succs !
@romaintaz#DvxFrWeb2015
Adieu, concepts de la v1 ! angular.module $scope Controllers Directive Definition Objects jqLite
@romaintaz#DvxFrWeb2015
La v2, une refonte complte
Dependency injection Templating Routing Logging Persistence Decorators Benchmarking / monitoring Etc.
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
Catgorie Pas si vieux, mais qui va faire encore pas mal parler de lui
React
@romaintaz#DvxFrWeb2015
React
Projet par acebook Sorti en 2013 Soccupe uniquement de la partie vue (MV*) JavaScript isomorphique (serveur & client) React Native pour des applications mobiles natives
@romaintaz#DvxFrWeb2015
React Principaux avantages
Dataflow uni-directionnel :o voir React comme une fonction (tat) (DOM)o le mme tat donne toujours le mme rendu
DOM virtuel :o Manipulation plus rapideo Modifications minimales
@romaintaz#DvxFrWeb2015
Le JSX de React
...
React.render(
Hello Devoxx!,document.getElementById("message")
);
...
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
Catgorie Franchement c'est pas mal, a commence bien marcher
Ionic Framework
@romaintaz#DvxFrWeb2015
Ionic Framework
SDK destin aux applis mobiles hybrides Dveloppement avec Angular Support Angular 2 prvu
@romaintaz#DvxFrWeb2015
Dmarrer un projet Ionic
$ npm install g cordova ionic$ ionic start $ ionic platform add ios$ ionic serve$ ionic emulate ios
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
Catgorie On y croit. Pour au moins 6 mois, ce qui n'est dj pas mal !
Aurlia
@romaintaz#DvxFrWeb2015
Aurelia
Vise le long terme :o bas sur ECMAScript 6 (et 7)o utilise le web components
Compltement modulable
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
Rsumons
@romaintaz#DvxFrWeb2015
Conclusion
{{ 2015 }} Excitation : plein de nouveaux frameworks :o) Frustration : plein de nouveaux frameworks :o(
Quelques tendances :o ECMAScript 6o Web components
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
Q & A
http://bit.ly/dvxfr15-web