Devoxx France 2015 - Développement web en 2015

2 689 vues

Publié le

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

Publié dans : Internet
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 689
Sur SlideShare
0
Issues des intégrations
0
Intégrations
330
Actions
Partages
0
Téléchargements
88
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×