Devoxx France 2015 - Développement web en 2015

@romaintaz#DvxFrWeb2015
Développement Web
Ce qui nous attend en 2015

Romain Linsolas
@romaintaz
Société Générale
Développeur Java & Web

Petit panorama du web en 2015

Catégorie « Valeur sûre à laquelle nous
n'échapperons pas en 2015 »
ECMAScript 6

Petit historique d'ECMAScript
1997
1998
1999
…
2009
…
2015
ES 1
ES 2
ES 3
ES 5
ES 6
ES 4

ECMAScript 6, les classes
class DevoxxFrance extends Conference {
constructor(name) {
this.name = name;
}
welcome() {
return "Welcome to " + this.name;
}
}

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

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!

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);
}

ECMAScript 6, autres
• Promesses
• Syntaxe for…of
• Modules
• Structure de données
• Etc.

ECMAScript 6, le support des navigateurs
https://kangax.github.io/compat-table/es6/

Transpilons !
• 6to5 ("Babel") - https://babeljs.io
• Traceur (Google)
• https://github.com/addyosmani/es6-tools

Catégorie « Autre valeur sûre à laquelle
nous n'échapperons pas en 2015 »
Web Components

Pourquoi les Web Components ?
<!-‐-‐> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article>
<aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote>
<body> <br> <button> <canvas> <caption> <center> <cite> <code> <col>
<colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div>
<dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer>
<form> <frame> <frameset> <head> <header> <hgroup> <h1> <h2> <h3> <h4>
<h5> <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen>
<label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta>
<meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option>
<output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp>
<script> <section> <select> <small> <source> <span> <strike> <strong>
<style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot>
<th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video>
<wbr>

<div role="tabpanel">

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab1" aria-
controls="tab1" role="tab" data-toggle="tab">Onglet 1</a></li>
<li role="presentation"><a href="#tab2" aria-controls="tab2"
role="tab" data-toggle="tab">Onglet 2</a></li>
</ul>

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">Contenu
1</div>
<div role="tabpanel" class="tab-pane" id="tab2">Contenu 2</div>
</div>
</div>

<div role="tabpanel">

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab1" aria-
controls="tab1" role="tab" data-toggle="tab">Onglet 1</a></li>
<li role="presentation"><a href="#tab2" aria-controls="tab2"
role="tab" data-toggle="tab">Onglet 2</a></li>
</ul>

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">Contenu
1</div>
<div role="tabpanel" class="tab-pane" id="tab2">Contenu 2</div>
</div>
</div>
<tab-pane>
<one-tab title="Onglet 1" active>Contenu 1</one-tab>
<one-tab title="Onglet 2" active>Contenu 2</one-tab>
</tab-pane>

Les standards Web Components
• Shadow DOM
• Template
• HTML Import
• Custom Elements

Créer ses Web Components
Google
Polymer
Bosonic
Mozilla
X-Tag
IBM
Delite

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/

@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !

Catégorie « Valeur à peu près sûre mais
que de toutes façons tout le monde va en
parler, donc autant s'y préparer »
Angular v2

Bref historique
2009
2010
2011
2012
2013
2014
2015
2016
1e release
1.0 – 1.1
1.2
1.3
1.4 – 1.5
2.0
∝ 𝛽

Angular, un succès !

Adieu, concepts de la v1 !
• angular.module
• $scope
• Controllers
• Directive Definition Objects
• jqLite

La v2, une refonte complète
• Dependency injection
• Templating
• Routing
• Logging
• Persistence
• Decorators
• Benchmarking / monitoring
• Etc.

Catégorie « Pas si vieux, mais qui va faire
encore pas mal parler de lui »
React

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

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

Le JSX de React
...
<div id="message"></div>
<script type="text/jsx">
React.render(
<h1>Hello Devoxx!</h1>,
document.getElementById("message")
);
</script>
...

Catégorie « Franchement c'est pas mal,
ça commence à bien marcher »
Ionic Framework

Ionic Framework
• SDK destiné aux applis mobiles hybrides
• Développement avec Angular
• Support Angular 2 prévu

Démarrer un projet Ionic
$ npm install –g cordova ionic
$ ionic start <name> <template>
$ ionic platform add ios
$ ionic serve
$ ionic emulate ios

Catégorie « On y croit. Pour au moins 6
mois, ce qui n'est déjà pas mal ! »
Aurélia

Aurelia
• Vise le long terme :
o basé sur ECMAScript 6 (et 7)
o utilise le web components
• Complètement modulable

Résumons…

Conclusion
{{ 2015 }}
• Excitation : plein de nouveaux frameworks :o)
• Frustration : plein de nouveaux frameworks :o(
• Quelques tendances :
o ECMAScript 6
o Web components

Q & A
http://bit.ly/dvxfr15-web

Devoxx France 2015 - Développement web en 2015

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Devoxx France 2015 - Développement web en 2015

Similar a Devoxx France 2015 - Développement web en 2015 (20)

Más de Romain Linsolas

Más de Romain Linsolas (8)

Devoxx France 2015 - Développement web en 2015