Devoxx France 2015 - Développement web en 2015

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

2. @romaintaz#DvxFrWeb2015 Romain Linsolas @romaintaz Société Générale Développeur Java & Web

3. FrameworksWeb

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/

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

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

15. @romaintaz#DvxFrWeb2015 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>

16. @romaintaz#DvxFrWeb2015 Pourquoi les Web Components ? <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>

17. @romaintaz#DvxFrWeb2015 Pourquoi les Web Components ? <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>

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/

21. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !

22. 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

23. @romaintaz#DvxFrWeb2015 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 ∝ 𝛽

24. @romaintaz#DvxFrWeb2015 Angular, un succès !

25. @romaintaz#DvxFrWeb2015 Adieu, concepts de la v1 ! • angular.module • $scope • Controllers • Directive Definition Objects • jqLite

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

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> ...

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

34. @romaintaz#DvxFrWeb2015 Ionic Framework • SDK destiné aux applis mobiles hybrides • Développement avec Angular • Support Angular 2 prévu

35. @romaintaz#DvxFrWeb2015 Démarrer un projet Ionic $ npm install –g cordova ionic $ ionic start <name> <template> $ ionic platform add ios $ ionic serve $ ionic emulate ios

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

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

40. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 Résumons…

41. @romaintaz#DvxFrWeb2015 Conclusion {{ 2015 }} • Excitation : plein de nouveaux frameworks :o) • Frustration : plein de nouveaux frameworks :o( • Quelques tendances : o ECMAScript 6 o Web components

42. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 Q & A http://bit.ly/dvxfr15-web