Du JavaScript propre ? Challenge Accepted!    10h40 - 11h30 - La Seine B
Du JavaScript propre ?       Challenge Accepted!Julien Jakubowski    Romain Linsolas  OCTO Technology     Société Générale...
Romain Linsolas Développeur Java & Web Architecte Technique @romaintaz
Julien Jakubowski Développeur Java & Web depuis 10 ans @jak78
Nous ne sommes pas…        Des gourous JavaScript        John Resig - jQuery        Douglas Crockford – JSLint,           ...
Parlons de JavaScript entre Javaïstes JavaScript is to Java as Hamster is to Ham http://coding.smashingmagazine.com/2009/0...
Nous allons aussi parler de…     Darth Vader    Bière      Maroilles
Pourquoi cette présentation ?
En 2003
Le JavaScript est partout ! Runtime le plus distribué Mobilité Même côté serveur (          , …)
Les grands du web
Les grands du web
Nouveaux besoins Les utilisateurs veulent des applications vivantes, réactives et   dynamiques ! Enjeu de qualité Volume d...
100,000 lignes de code JavaScript ?                            Young man hidden behind table - © 2011 Richard Hernández   ...
Pourquoi ça fait peur ? Le JavaScript cest SALE       surprenant
WAT ?   >	  []	  +	  []	   	  ""	     >	  []	  +	  {}	   	  [object	  Object]	     >	  {}	  +	  []	   	  0	     >	  {}	  +...
WAT ???Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
Darth Vader   Bière   Maroilles
Autre problème JavaScript                      WAT? ??
Pollution de lespace de nommage
Scope global par défaut
Tout est public par défaut
Darth Vader   Bière   Maroilles
Et ce nest pas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
Mais le plus sale Pollution de lespace de nommage Tout est global par défaut Code non testé
Oui mais…
Nous allons aussi parler de…     Darth Vader    Bière      Maroilles
Comment coderproprement 100,000 lignes      en JavaScript ?
On pourrait éviter le JavaScript… Déléguer • GWT • JSF • Vaadin • Etc.
On peut aussi "améliorer" JavaScript Langage web orienté objet pour combler les   Un JavaScript à l’écriture simplifiée la...
Exemple de CoffeeScript JavaScript
Architectures MV*
Architecture MVC classique                            <html>                              +                              J...
Mes besoins aujourdhui Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté
Architecture MV* en JavaScript               View	              Controller	                         Model	     Client     ...
Question implémentation Frameworks optionnels, mais aident beaucoup Pas encore de standard
Modulariser
Quest-ce quun module ? Représente un ensemble de code Isolation – faible couplage Présente une interface
Un module basique - Présentation
Un module basique
Un module basique
Un module basique
Un module basique
Un module basique
Un module basique
Espace de nommage
Diviser en plusieurs fichiers .js ?    Temps de chargement    Pas de gestion des dépendances
AMD, Asynchronous Module Definition Définition de dépendances                    jQuery	                                 b...
AMD, Asynchronous Module Definition Chargements parallèles, à la demande                  jQuery	 Mustache	 beers.js	 soda...
Eviter les parties sales                           http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-stu...
JsLint Détection des ugly parts Equivalent à PMD / Checkstyle / FindBugs pour JS Intégration dans les IDE
Intégration dans Eclipse
Expressivité               http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
Quest-ce quun code expressif ? Cest un code simple,               concis,               lisible
Mauvais exemple  Pollution, mauvaise lisibilité => SALE
Avec Pas de pollution Lisibilité accrue Code propre
jQuery, cest surtout :• Lisibilité du code, expressivité• Simplification de ce qui est utile : manipulation du DOM, Ajax…M...
Templates
A la main
Avec template (Mustache.js)
Outils de templating         Mustache
Tests automatisés
Tests dIHM              Selenium           Windmill    Conditions réelles    Pas vraiment adapté au TDD
TDD pour JavaScript      En Java         En JavaScript       TestNG
Tests avec Jasmine
Ecosystème University « Le fantôme, le zombie et Testacular… » Jean-Laurent De Morlhon et Pierre Gayvallet
TDD en JavaScript
Faire du TDD pour JavaScript Vous devez en faire en 2013 ! Vous navez plus dexcuses
Automatisation
Détecter et alerter Quand un test échoue                  Jasmine Quand une partie sale est utilisée    JsLint Sil y a u...
Intégration continue avec Jenkins                   http://localhost:8080/job/Test%20Jasmine/1/consol
Analyse qualité avec Sonar
Dautres outils utiles
100,000 lignes de JavaScript ?         MV*         Modules      Parties sales                                     évitées ...
Le monde des bisounours ?
Le monde des bisounours ? Oui mais non !                             Intégration                             Pérennité    ...
Businessman sitting at desk with feet up - Paul Bradbury
Références                           Eloquent JavaScript               http://eloquentjavascript.net/contents.html        ...
Questions ?  @jak78      @romaintaz
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Prochain SlideShare
Chargement dans…5
×

Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013

1 932 vues

Publié le

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

Aucun téléchargement
Vues
Nombre de vues
1 932
Sur SlideShare
0
Issues des intégrations
0
Intégrations
27
Actions
Partages
0
Téléchargements
38
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013

  1. 1. Du JavaScript propre ? Challenge Accepted! 10h40 - 11h30 - La Seine B
  2. 2. Du JavaScript propre ? Challenge Accepted!Julien Jakubowski Romain Linsolas OCTO Technology Société Générale @jak78 @romaintaz 27 au 29 mars 2013
  3. 3. Romain Linsolas Développeur Java & Web Architecte Technique @romaintaz
  4. 4. Julien Jakubowski Développeur Java & Web depuis 10 ans @jak78
  5. 5. Nous ne sommes pas… Des gourous JavaScript John Resig - jQuery Douglas Crockford – JSLint, "JavaScript, The Good Parts"
  6. 6. Parlons de JavaScript entre Javaïstes JavaScript is to Java as Hamster is to Ham http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/
  7. 7. Nous allons aussi parler de… Darth Vader Bière Maroilles
  8. 8. Pourquoi cette présentation ?
  9. 9. En 2003
  10. 10. Le JavaScript est partout ! Runtime le plus distribué Mobilité Même côté serveur ( , …)
  11. 11. Les grands du web
  12. 12. Les grands du web
  13. 13. Nouveaux besoins Les utilisateurs veulent des applications vivantes, réactives et dynamiques ! Enjeu de qualité Volume de code important  Fini de jouer !
  14. 14. 100,000 lignes de code JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
  15. 15. Pourquoi ça fait peur ? Le JavaScript cest SALE surprenant
  16. 16. WAT ? >  []  +  []    ""   >  []  +  {}    [object  Object]   >  {}  +  []    0   >  {}  +  {}    NaN   >  ++[[]][+[]]+[+[]]  ===  "10"    true  
  17. 17. WAT ???Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
  18. 18. Darth Vader Bière Maroilles
  19. 19. Autre problème JavaScript WAT? ??
  20. 20. Pollution de lespace de nommage
  21. 21. Scope global par défaut
  22. 22. Tout est public par défaut
  23. 23. Darth Vader Bière Maroilles
  24. 24. Et ce nest pas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
  25. 25. Mais le plus sale Pollution de lespace de nommage Tout est global par défaut Code non testé
  26. 26. Oui mais…
  27. 27. Nous allons aussi parler de… Darth Vader Bière Maroilles
  28. 28. Comment coderproprement 100,000 lignes en JavaScript ?
  29. 29. On pourrait éviter le JavaScript… Déléguer • GWT • JSF • Vaadin • Etc.
  30. 30. On peut aussi "améliorer" JavaScript Langage web orienté objet pour combler les Un JavaScript à l’écriture simplifiée lacunes de JavaScript
  31. 31. Exemple de CoffeeScript JavaScript
  32. 32. Architectures MV*
  33. 33. Architecture MVC classique <html> + JS Client Asynchrone Serveur Controller Model View
  34. 34. Mes besoins aujourdhui Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté
  35. 35. Architecture MV* en JavaScript View Controller Model Client Serveur …
  36. 36. Question implémentation Frameworks optionnels, mais aident beaucoup Pas encore de standard
  37. 37. Modulariser
  38. 38. Quest-ce quun module ? Représente un ensemble de code Isolation – faible couplage Présente une interface
  39. 39. Un module basique - Présentation
  40. 40. Un module basique
  41. 41. Un module basique
  42. 42. Un module basique
  43. 43. Un module basique
  44. 44. Un module basique
  45. 45. Un module basique
  46. 46. Espace de nommage
  47. 47. Diviser en plusieurs fichiers .js ? Temps de chargement Pas de gestion des dépendances
  48. 48. AMD, Asynchronous Module Definition Définition de dépendances jQuery beers.js Mustache
  49. 49. AMD, Asynchronous Module Definition Chargements parallèles, à la demande jQuery Mustache beers.js sodas.js jQuery beers.js Mustache
  50. 50. Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293
  51. 51. JsLint Détection des ugly parts Equivalent à PMD / Checkstyle / FindBugs pour JS Intégration dans les IDE
  52. 52. Intégration dans Eclipse
  53. 53. Expressivité http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
  54. 54. Quest-ce quun code expressif ? Cest un code simple, concis, lisible
  55. 55. Mauvais exemple Pollution, mauvaise lisibilité => SALE
  56. 56. Avec Pas de pollution Lisibilité accrue Code propre
  57. 57. jQuery, cest surtout :• Lisibilité du code, expressivité• Simplification de ce qui est utile : manipulation du DOM, Ajax…Mais aussi :• Structuration du code en plugins• Nombreux plugins existants
  58. 58. Templates
  59. 59. A la main
  60. 60. Avec template (Mustache.js)
  61. 61. Outils de templating Mustache
  62. 62. Tests automatisés
  63. 63. Tests dIHM Selenium Windmill Conditions réelles Pas vraiment adapté au TDD
  64. 64. TDD pour JavaScript En Java En JavaScript TestNG
  65. 65. Tests avec Jasmine
  66. 66. Ecosystème University « Le fantôme, le zombie et Testacular… » Jean-Laurent De Morlhon et Pierre Gayvallet
  67. 67. TDD en JavaScript
  68. 68. Faire du TDD pour JavaScript Vous devez en faire en 2013 ! Vous navez plus dexcuses
  69. 69. Automatisation
  70. 70. Détecter et alerter Quand un test échoue  Jasmine Quand une partie sale est utilisée  JsLint Sil y a une erreur de syntaxe  Google Closure Compiler Intégration dans Maven, Jenkins ou Sonar
  71. 71. Intégration continue avec Jenkins http://localhost:8080/job/Test%20Jasmine/1/consol
  72. 72. Analyse qualité avec Sonar
  73. 73. Dautres outils utiles
  74. 74. 100,000 lignes de JavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
  75. 75. Le monde des bisounours ?
  76. 76. Le monde des bisounours ? Oui mais non ! Intégration Pérennité Apprentissage
  77. 77. Businessman sitting at desk with feet up - Paul Bradbury
  78. 78. Références Eloquent JavaScript http://eloquentjavascript.net/contents.html JavaScript Garden http://bonsaiden.github.com/JavaScript-Garden/ Learning Advanced JavaScript - J. Resig http://ejohn.org/apps/learn/ JavaScript: the Good Parts - D. Crockford
  79. 79. Questions ? @jak78 @romaintaz

×