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.

Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013

2,081 views

Published on

Published in: Technology
  • Be the first to comment

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

×