Devoxx France 2015 - Développement web en 2015
-
Upload
romain-linsolas -
Category
Internet
-
view
1.270 -
download
3
Transcript of Devoxx France 2015 - Développement web en 2015
-
@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