Softshake 2013 - Du JavaScript propre ? Challenge accepted!

1,858 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,858
On SlideShare
0
From Embeds
0
Number of Embeds
845
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Softshake 2013 - Du JavaScript propre ? Challenge accepted!

  1. 1. Du JavaScript propre ? Challenge Accepted! Julien Jakubowski OCTO Technology @jak78 Romain Linsolas Société Générale @romaintaz 27 au 29 mars 2013
  2. 2. Romain Linsolas Développeur Java & Web Architecte Technique @romaintaz
  3. 3. Julien Jakubowski Développeur Java & Web depuis 11 ans @jak78
  4. 4. Nous ne sommes pas… Des gourous JavaScript John Resig - jQuery Douglas Crockford – JSLint, "JavaScript, The Good Parts"
  5. 5. JavaScript et Java ? http://www.flickr.com/photos/naturesauraphotography/ http://commons.wikimedia.org/wiki/User:DocteurCosmos JavaScript is to Java as Hamster is to Ham http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/
  6. 6. Nous allons aussi parler de… Darth Vader Bière Maroilles
  7. 7. Pourquoi cette présentation ?
  8. 8. En 2003
  9. 9. Le JavaScript est partout ! Runtime le plus distribué Navigateurs desktop, mobile… Même côté serveur ( , …)
  10. 10. Les géants du web
  11. 11. Les géants du web
  12. 12. Nouveaux besoins Les utilisateurs veulent des applications vivantes, réactives et dynamiques ! Enjeu de qualité Volume de code important  Fini de jouer !
  13. 13. 100,000 lignes de code JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
  14. 14. Pourquoi ça fait peur ? Le JavaScript c'est SALE surprenant
  15. 15. WAT ? >  []  +  []    ""   >  []  +  {}    [object  Object]   >  {}  +  []    0   >  {}  +  {}    NaN   >  ++[[]][+[]]+[+[]]  ===  "10"    true  
  16. 16. ?? T? WA Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat
  17. 17. Darth Vader Bière Maroilles
  18. 18. Autre problème JavaScript ??? AT W
  19. 19. Pollution de l'espace de nommage
  20. 20. Scope global par défaut
  21. 21. Tout est public par défaut
  22. 22. Darth Vader Bière Maroilles
  23. 23. Et ce n'est pas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
  24. 24. Mais le plus sale Pollution de l'espace de nommage Tout est global par défaut Code non testé
  25. 25. Oui mais…
  26. 26. Author : Frédérique Voisin-Demery http://www.flickr.com/people/8514720@N04
  27. 27. Nous allons aussi parler de… Darth Vader Bière Maroilles
  28. 28. Comment coder proprement 100,000 lignes en JavaScript ?
  29. 29. On pourrait éviter le JavaScript… Déléguer • GWT • JSF • Vaadin • Etc.
  30. 30. On pourrait utiliser un « JavaScript amélioré » Langage web orienté objet « Ce que JavaScript serait s’il avait été inventé aujourd’hui » Un JavaScript moins verbeux Sucre syntaxique
  31. 31. Exemple de CoffeeScript JavaScript
  32. 32. Architectures MV* http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118
  33. 33. Architecture MVC classique <html> + JS Client Serveur Controller Model View
  34. 34. Mes besoins aujourd'hui 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 http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
  38. 38. Qu'est-ce qu'un 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 Mustache beers.js
  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. Qu'est-ce qu'un code expressif ? C'est 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. Templates
  58. 58. A la main
  59. 59. Avec template (Mustache.js)
  60. 60. Outils de templating Mustache
  61. 61. Tests automatisés http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
  62. 62. Tests d'IHM Selenium Conditions réalistes Lent, fragile
  63. 63. TDD pour JavaScript En Java TestNG En JavaScript
  64. 64. Tests avec Jasmine
  65. 65. Ecosystème Devoxx FR 2013 University « Le fantôme, le zombie et Testacular… » Jean-Laurent De Morlhon et Pierre Gayvallet
  66. 66. TDD en JavaScript
  67. 67. Automatisation
  68. 68. Détecter et alerter Quand un test échoue Quand une partie sale est utilisée S'il y a une erreur de syntaxe  Jasmine  JsLint  Google Closure Compiler Intégration dans Maven, Jenkins ou SonarQube
  69. 69. Intégration continue avec Jenkins http://localhost:8080/job/Test%20Jasmine/1/consol
  70. 70. Analyse qualité avec Sonar
  71. 71. D'autres outils utiles
  72. 72. 100,000 lignes de JavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
  73. 73. Le monde des bisounours ?
  74. 74. Le monde des bisounours ? Oui mais non ! Intégration Pérennité Apprentissage
  75. 75. Businessman sitting at desk with feet up - Paul Bradbury
  76. 76. 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
  77. 77. Questions ? @jak78 @romaintaz

×