@romaintaz#DvxFrWeb2015
Développement  Web
Ce  qui  nous  attend  en  2015
@romaintaz#DvxFrWeb2015
Romain  Linsolas
@romaintaz
Société Générale
Développeur Java & Web
FrameworksWeb
@romaintaz#DvxFrWeb2015
Petit  panorama  du  web  en  2015
Catégorie  « Valeur  sûre  à  laquelle  nous  
n'échapperons  pas  en  2015 »
ECMAScript 6
@romaintaz#DvxFrWeb2015
Petit  historique  d'ECMAScript
1997
1998
1999
…
2009
…
2015
ES 1
ES 2
ES 3
ES 5
ES 6
ES 4
@romaintaz#DvxFrWeb2015
ECMAScript 6,  les  classes
class DevoxxFrance extends Conference {
constructor(name) {
this.name ...
@romaintaz#DvxFrWeb2015
ECMAScript 6,  "let"  &  "const"
var a = 42, b = 42;
if (true) {
var a = 0;
let b = 0; // Portée l...
@romaintaz#DvxFrWeb2015
ECMAScript 6,  "String  interpolation"
var answer = 42;
console.log(`La réponse est ${answer}`);
/...
@romaintaz#DvxFrWeb2015
ECMAScript 6,  "=>"
var nombres = [1, 2, 3, 4, 5];
var pairs = nombres.filter(n => n % 2 == 0); //...
@romaintaz#DvxFrWeb2015
ECMAScript 6,  autres
• Promesses
• Syntaxe for…of
• Modules
• Structure de données
• Etc.
@romaintaz#DvxFrWeb2015
ECMAScript 6,  le  support  des  navigateurs
https://kangax.github.io/compat-­table/es6/
@romaintaz#DvxFrWeb2015
Transpilons !
• 6to5 ("Babel") - https://babeljs.io
• Traceur (Google)
• https://github.com/addyos...
Catégorie  « Autre  valeur  sûre  à  laquelle  
nous  n'échapperons  pas  en  2015 »
Web  Components
@romaintaz#DvxFrWeb2015
Pourquoi  les  Web  Components  ?
<!-­‐-­‐>  <!DOCTYPE>  <a>  <abbr>  <acronym>  <address>  <apple...
@romaintaz#DvxFrWeb2015
Pourquoi  les  Web  Components  ?
<div role="tabpanel">
<!-- Onglets -->
<ul class="nav nav-tabs" ...
@romaintaz#DvxFrWeb2015
Pourquoi  les  Web  Components  ?
<div role="tabpanel">
<!-- Onglets -->
<ul class="nav nav-tabs" ...
@romaintaz#DvxFrWeb2015
Les  standards  Web  Components
• Shadow DOM
• Template
• HTML Import
• Custom Elements
@romaintaz#DvxFrWeb2015
Créer  ses  Web  Components
Google
Polymer
Bosonic
Mozilla
X-­Tag
IBM
Delite
@romaintaz#DvxFrWeb2015
Les  Web  Components  prêts  pour  la  prod?
• Standards encore (un peu) en évolution
• Implémenta...
@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  ...
@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....
@romaintaz#DvxFrWeb2015
Angular,  un  succès  !
@romaintaz#DvxFrWeb2015
Adieu,  concepts  de  la  v1  !
• angular.module
• $scope
• Controllers
• Directive Definition Obj...
@romaintaz#DvxFrWeb2015
La  v2,  une  refonte  complète
• Dependency injection
• Templating
• Routing
• Logging
• Persiste...
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
Catégorie  « Pas  si  vieux,  mais  qui  va  faire  
encore  pas  mal  parler  de  lui »
React
@romaintaz#DvxFrWeb2015
React
• Projet par acebook
• Sorti en 2013
• S’occupe uniquement de la partie vue (MV*)
• JavaScri...
@romaintaz#DvxFrWeb2015
React – Principaux  avantages
• Dataflow uni-directionnel :
o voir React comme une fonction (état)...
@romaintaz#DvxFrWeb2015
Le  JSX  de  React
...
<div id="message"></div>
<script type="text/jsx">
React.render(
<h1>Hello D...
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
Catégorie  « Franchement  c'est  pas  mal,  
ça  commence  à  bien  marcher »
Ionic Framework
@romaintaz#DvxFrWeb2015
Ionic Framework
• SDK destiné aux applis mobiles hybrides
• Développement avec Angular
• Support A...
@romaintaz#DvxFrWeb2015
Démarrer  un  projet  Ionic
$ npm install –g cordova ionic
$ ionic start <name> <template>
$ ionic...
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
Catégorie  « On  y  croit.  Pour  au  moins  6  
mois,  ce  qui  n'est  déjà  pas  mal  ! »
Aurélia
@romaintaz#DvxFrWeb2015
Aurelia
• Vise le long terme :
o basé sur ECMAScript 6 (et 7)
o utilise le web components
• Complè...
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
DEMO !
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
Résumons…
@romaintaz#DvxFrWeb2015
Conclusion
{{ 2015 }}
• Excitation : plein de nouveaux frameworks :o)
• Frustration : plein de nou...
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015
Q & A
http://bit.ly/dvxfr15-web
Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
Prochain SlideShare
Chargement dans…5
×

Devoxx France 2015 - Développement web en 2015

2 545 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 545
Sur SlideShare
0
Issues des intégrations
0
Intégrations
331
Actions
Partages
0
Téléchargements
86
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

×