Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Devoxx France 2015 - Développement web en 2015

2,951 views

Published on

Slides de la présentation "Développement web : ce qui vous attend en 2015", jouée à Devoxx France 2015

Published in: Internet
  • Be the first to comment

Devoxx France 2015 - Développement web en 2015

  1. 1. @romaintaz#DvxFrWeb2015 Développement  Web Ce  qui  nous  attend  en  2015
  2. 2. @romaintaz#DvxFrWeb2015 Romain  Linsolas @romaintaz Société Générale Développeur Java & Web
  3. 3. FrameworksWeb
  4. 4. @romaintaz#DvxFrWeb2015 Petit  panorama  du  web  en  2015
  5. 5. Catégorie  « Valeur  sûre  à  laquelle  nous   n'échapperons  pas  en  2015 » ECMAScript 6
  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. 7. @romaintaz#DvxFrWeb2015 ECMAScript 6,  les  classes class DevoxxFrance extends Conference { constructor(name) { this.name = name; } welcome() { return "Welcome to " + this.name; } }
  8. 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. 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. 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. 11. @romaintaz#DvxFrWeb2015 ECMAScript 6,  autres • Promesses • Syntaxe for…of • Modules • Structure de données • Etc.
  12. 12. @romaintaz#DvxFrWeb2015 ECMAScript 6,  le  support  des  navigateurs https://kangax.github.io/compat-­table/es6/
  13. 13. @romaintaz#DvxFrWeb2015 Transpilons ! • 6to5 ("Babel") - https://babeljs.io • Traceur (Google) • https://github.com/addyosmani/es6-tools
  14. 14. Catégorie  « Autre  valeur  sûre  à  laquelle   nous  n'échapperons  pas  en  2015 » Web  Components
  15. 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. 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. 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. 18. @romaintaz#DvxFrWeb2015 Les  standards  Web  Components • Shadow DOM • Template • HTML Import • Custom Elements
  19. 19. @romaintaz#DvxFrWeb2015 Créer  ses  Web  Components Google Polymer Bosonic Mozilla X-­Tag IBM Delite
  20. 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. 21. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
  22. 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. 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. 24. @romaintaz#DvxFrWeb2015 Angular,  un  succès  !
  25. 25. @romaintaz#DvxFrWeb2015 Adieu,  concepts  de  la  v1  ! • angular.module • $scope • Controllers • Directive Definition Objects • jqLite
  26. 26. @romaintaz#DvxFrWeb2015 La  v2,  une  refonte  complète • Dependency injection • Templating • Routing • Logging • Persistence • Decorators • Benchmarking / monitoring • Etc.
  27. 27. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
  28. 28. Catégorie  « Pas  si  vieux,  mais  qui  va  faire   encore  pas  mal  parler  de  lui » React
  29. 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. 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. 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. 32. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
  33. 33. Catégorie  « Franchement  c'est  pas  mal,   ça  commence  à  bien  marcher » Ionic Framework
  34. 34. @romaintaz#DvxFrWeb2015 Ionic Framework • SDK destiné aux applis mobiles hybrides • Développement avec Angular • Support Angular 2 prévu
  35. 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. 36. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
  37. 37. Catégorie  « On  y  croit.  Pour  au  moins  6   mois,  ce  qui  n'est  déjà  pas  mal  ! » Aurélia
  38. 38. @romaintaz#DvxFrWeb2015 Aurelia • Vise le long terme : o basé sur ECMAScript 6 (et 7) o utilise le web components • Complètement modulable
  39. 39. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 DEMO !
  40. 40. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 Résumons…
  41. 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. 42. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015 Q & A http://bit.ly/dvxfr15-web

×