![@romaintaz#DvxFrWeb2015
ECMAScript 6, "=>"
var nombres = [1, 2, 3, 4, 5];
var pairs = nombres.filter(n => n % 2 == 0); //...](https://image.slidesharecdn.com/romainlinsolas-devoxxfrance2015-devweb-150410123801-conversion-gate01/85/devoxx-france-2015-dveloppement-web-en-2015-10-320.jpg?cb=1428669664)
Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
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"> <!-- Onglets --> <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> <!-- Contenus --> <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"> <!-- Onglets --> <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> <!-- Contenus --> <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.
- 27. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
- 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> ...
- 32. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
- 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
- 36. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
- 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
- 39. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
- 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