Du JavaScript propre ? Challenge Accepted!    10h40 - 11h30 - La Seine B
propre ?        Challenge        Accepted!  Julien          Romain LinsolasJakubowski          Société GénéraleOCTO Techno...
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,        "JavaScript,...
Parlons de JavaScript entreJavaïstesJavaScript is to Java as Hamster is to Hamhttp://coding.smashingmagazine.com/2009/07/2...
Nous allons aussi parler de…  Darth Vader   Bière   Maroilles
Pourquoi cettepré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 besoinsLes utilisateurs veulent des applications vivantes, réactives et dynamiques !Enjeu de qualitéVolume de cod...
100,000 lignes de codeJavaScript ?                 Young man hidden behind table - © 2011 Richard Hernández Arrondo
Pourquoi ça fait peur ?Le JavaScriptcest   surprenant   SALE
WAT ? > [] + []  "" > [] + {}  [object Object] > {} + []  0 > {} + {}  NaN > ++[[]][+[]]+[+[]] === "10"  true
W A             T???Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
Darth Vader   Bière   Maroilles
Autre problème JavaScript             A T           W            ? ??
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 surprenantque sale)Ordre de déclaration de varEtc.
Mais le plus salePollution de lespace denommageTout est global par défautCode non testé
Oui mais…
Nous allons aussi parler de…  Darth Vader   Bière   Maroilles
Comment coder proprement100,000 lignesen JavaScript ?
On pourrait éviter leJavaScript… Déléguer• GWT• JSF• Vaadin• Etc.
On peut aussi "améliorer"JavaScriptLangage web orienté objet pour Un JavaScript à l’écriturecombler les lacunes de        ...
Exemple de CoffeeScriptJavaScript
Architectures MV*
Architecture MVC classique                     <html>                       +                       JS  Client            ...
Mes besoins aujourdhuiTemps de réponse instantanéGestion de réseaux lents(mobiles…)Mode déconnecté
Architecture MV* enJavaScript            View           Controller                   Model  Client  Serveur               ...
Question implémentationFrameworks optionnels, mais aident beaucoupPas encore de standard
Modulariser
Quest-ce quun module ?Représente un ensemble decodeIsolation – faible couplagePré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 ModuleDefinitionDéfinition de dépendances            jQuery                     beers.j                 ...
AMD, Asynchronous ModuleDefinitionChargements parallèles, à la demande          jQuery Mustac beers. sodas.j              ...
Eviter les parties sales                   http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-imag...
JsLintDétection des ugly partsEquivalent à PMD / Checkstyle /FindBugs pour JSIntégration dans les IDE
Intégration dans Eclipse
Expressivité               http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA00480
Quest-ce quun code expressif?Cest un code simple,           concis,          lisible
Mauvais exemplePollution     , mauvaise lisibilité                    => SALE
AvecPas de pollutionLisibilité accrueCode propre
jQuery, cest surtout :• Lisibilité du code, expressivité• Simplification de ce qui est utile : manipulation duDOM, Ajax…Ma...
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èmeUniversity « Le fantôme, le zombie et Testacular… »Jean-Laurent De Morlhon et Pierre Gayvallet
TDD en JavaScript
Automatisation
Détecter et alerter Quand un test échoue                              Jasmine Quand une partie sale est    JsLint utilis...
Intégration continue avecJenkins           http://localhost:8080/job/Test%20Jasmine/1/consol
Analyse qualité avec Sonar
Dautres outils utiles
100,000 lignes deJavaScript ?     MV*         Modules    Parties sales                              évitées  Expressivité ...
Le monde des bisounours ?
Le monde des bisounours ?Oui mais non !                Intégration                Pérennité                Apprentissage
Businessman sitting at desk with feet up - Paul Bradbury
Références                  Eloquent JavaScript      http://eloquentjavascript.net/contents.html                   JavaScr...
Questions ?@jak78        @romaintaz
JavaScript Devoxx France 2013
Prochain SlideShare
Chargement dans…5
×

JavaScript Devoxx France 2013

2 046 vues

Publié le

  • Soyez le premier à commenter

JavaScript Devoxx France 2013

  1. 1. Du JavaScript propre ? Challenge Accepted! 10h40 - 11h30 - La Seine B
  2. 2. propre ? Challenge Accepted! Julien Romain LinsolasJakubowski Société GénéraleOCTO Technology @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 entreJavaïstesJavaScript is to Java as Hamster is to Hamhttp://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 cettepré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 besoinsLes 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 codeJavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
  15. 15. Pourquoi ça fait peur ?Le JavaScriptcest surprenant SALE
  16. 16. WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true
  17. 17. W A T???Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
  18. 18. Darth Vader Bière Maroilles
  19. 19. Autre problème JavaScript A T W ? ??
  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 surprenantque sale)Ordre de déclaration de varEtc.
  25. 25. Mais le plus salePollution de lespace denommageTout est global par défautCode non testé
  26. 26. Oui mais…
  27. 27. Nous allons aussi parler de… Darth Vader Bière Maroilles
  28. 28. Comment coder proprement100,000 lignesen JavaScript ?
  29. 29. On pourrait éviter leJavaScript… Déléguer• GWT• JSF• Vaadin• Etc.
  30. 30. On peut aussi "améliorer"JavaScriptLangage web orienté objet pour Un JavaScript à l’écriturecombler les lacunes de simplifiéeJavaScript
  31. 31. Exemple de CoffeeScriptJavaScript
  32. 32. Architectures MV*
  33. 33. Architecture MVC classique <html> + JS Client Asynchrone Serveur Controller Model View
  34. 34. Mes besoins aujourdhuiTemps de réponse instantanéGestion de réseaux lents(mobiles…)Mode déconnecté
  35. 35. Architecture MV* enJavaScript View Controller Model Client Serveur …
  36. 36. Question implémentationFrameworks optionnels, mais aident beaucoupPas encore de standard
  37. 37. Modulariser
  38. 38. Quest-ce quun module ?Représente un ensemble decodeIsolation – faible couplagePré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 ModuleDefinitionDéfinition de dépendances jQuery beers.j s Mustac he
  49. 49. AMD, Asynchronous ModuleDefinitionChargements parallèles, à la demande jQuery Mustac beers. sodas.j he js s jQuery beers.j Mustac s he
  50. 50. Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/10988929
  51. 51. JsLintDétection des ugly partsEquivalent à PMD / Checkstyle /FindBugs pour JSInté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/AA00480
  54. 54. Quest-ce quun code expressif?Cest un code simple, concis, lisible
  55. 55. Mauvais exemplePollution , mauvaise lisibilité => SALE
  56. 56. AvecPas de pollutionLisibilité accrueCode propre
  57. 57. jQuery, cest surtout :• Lisibilité du code, expressivité• Simplification de ce qui est utile : manipulation duDOM, 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èmeUniversity « Le fantôme, le zombie et Testacular… »Jean-Laurent De Morlhon et Pierre Gayvallet
  67. 67. TDD en JavaScript
  68. 68. Automatisation
  69. 69. Détecter et alerter Quand un test échoue  Jasmine Quand une partie sale est  JsLint utilisée  Google Closure Sil y a une erreur de Compiler syntaxe Intégration dans Maven, Jenkins ou Sonar
  70. 70. Intégration continue avecJenkins http://localhost:8080/job/Test%20Jasmine/1/consol
  71. 71. Analyse qualité avec Sonar
  72. 72. Dautres outils utiles
  73. 73. 100,000 lignes deJavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
  74. 74. Le monde des bisounours ?
  75. 75. Le monde des bisounours ?Oui mais non ! Intégration Pérennité Apprentissage
  76. 76. Businessman sitting at desk with feet up - Paul Bradbury
  77. 77. 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
  78. 78. Questions ?@jak78 @romaintaz

×