Javascript ce n'est pas (si) sale

1 658 vues

Publié le

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Javascript ce n'est pas (si) sale

  1. 1. JavaScript, ce n’est pas (si) sale Julien Jakubowski Ch’ti JUG Document sous license Creative Commons Attribution - Pas d’Utilisation Commerciale - Pas de Modification 2.0 France (CC BY-NC-ND 2.0) - http://creativecommons.org/licenses/by-nc-nd/2.0/fr/mardi 25 septembre 2012
  2. 2. Qui suis-je ? Julien Jakubowski - @jak78 Développeur Java et web depuis ~10 ansmardi 25 septembre 2012
  3. 3. Qui ne suis-je pas ? Un véritable expert JavaScript ;-) John Resig - jQuery Douglas Crockford - JSLint, JavaScript the Good Partsmardi 25 septembre 2012
  4. 4. On va parler de JavaScript entre Javaïstesmardi 25 septembre 2012
  5. 5. On va parler de JavaScript entre Javaïstes Java is to JavaScript as Ham is to Hamster http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/mardi 25 septembre 2012
  6. 6. On va aussi parler de : Super-héros Bière Maroillesmardi 25 septembre 2012
  7. 7. Pourquoi cette présentation ?mardi 25 septembre 2012
  8. 8. En 2003mardi 25 septembre 2012
  9. 9. Maintenant...mardi 25 septembre 2012
  10. 10. Et aussi...mardi 25 septembre 2012
  11. 11. Forts enjeux Volume de code important Fini de jouer !mardi 25 septembre 2012
  12. 12. 100 000 lignes de code JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondomardi 25 septembre 2012
  13. 13. Young man hidden behind table - © 2011 Richard Hernández Arrondomardi 25 septembre 2012
  14. 14. Pourquoi ?mardi 25 septembre 2012
  15. 15. Parce que JavaScript, c’est SALEmardi 25 septembre 2012
  16. 16. Parce que JavaScript, c’est surprenantmardi 25 septembre 2012
  17. 17. WAT??? https://www.destroyallsoftware.com/talks/wat Gary Bernhardt http://codemash.org/mardi 25 septembre 2012
  18. 18. mardi 25 septembre 2012
  19. 19. WAT??? https://www.destroyallsoftware.com/talks/wat Gary Bernhardt http://codemash.org/mardi 25 septembre 2012
  20. 20. √ Super-héros Bière Maroillesmardi 25 septembre 2012
  21. 21. Conversion de typesmardi 25 septembre 2012
  22. 22. Conversion de types ??? AT Wmardi 25 septembre 2012
  23. 23. Conversion de typesmardi 25 septembre 2012
  24. 24. La solution ?mardi 25 septembre 2012
  25. 25. √ Super-héros √ Bière Maroillesmardi 25 septembre 2012
  26. 26. Pollution de l’espace de nommagemardi 25 septembre 2012
  27. 27. Pollution de l’espace de nommagemardi 25 septembre 2012
  28. 28. Pollution de l’espace de nommagemardi 25 septembre 2012
  29. 29. Global par défautmardi 25 septembre 2012
  30. 30. Global par défautmardi 25 septembre 2012
  31. 31. Global par défautmardi 25 septembre 2012
  32. 32. Global par défautmardi 25 septembre 2012
  33. 33. Global par défautmardi 25 septembre 2012
  34. 34. Tout est « public » par défautmardi 25 septembre 2012
  35. 35. Tout est « public » par défautmardi 25 septembre 2012
  36. 36. // Attendu : 1 { degre: 8% }mardi 25 septembre 2012
  37. 37. // Attendu : 1 { degre: 8% } // Obtenu : -1 undefinedmardi 25 septembre 2012
  38. 38. Automatic semi-column insertion // Attendu : 1 { degre: 8% } // Obtenu : -1 undefinedmardi 25 septembre 2012
  39. 39. Et il en reste... Le mot-clé this (plutôt surprenant que sale) eval ordre de déclaration du mot-clé var ...mardi 25 septembre 2012
  40. 40. Le plus sale : Pollution de l’espace de nommage Tout global par défaut Insertion automatique de points-virgulemardi 25 septembre 2012
  41. 41. Oui, mais...mardi 25 septembre 2012
  42. 42. mardi 25 septembre 2012
  43. 43. √ Super-héros √ Bière √ Maroillesmardi 25 septembre 2012
  44. 44. Comment coder 100 000 lignes de code en JavaScript d’une façon pas si sale ?mardi 25 septembre 2012
  45. 45. Eviter JavaScript GWT CoffeeScript DARTmardi 25 septembre 2012
  46. 46. Modulariser http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289mardi 25 septembre 2012
  47. 47. Qu’est-ce qu’un module ?mardi 25 septembre 2012
  48. 48. Qu’est-ce qu’un module ? • Ensemble de codemardi 25 septembre 2012
  49. 49. Qu’est-ce qu’un module ? • Ensemble de code • Présente une interfacemardi 25 septembre 2012
  50. 50. Qu’est-ce qu’un module ? • Ensemble de code • Présente une interface • Masque ses détails d’implémentationmardi 25 septembre 2012
  51. 51. mardi 25 septembre 2012
  52. 52. mardi 25 septembre 2012
  53. 53. mardi 25 septembre 2012
  54. 54. mardi 25 septembre 2012
  55. 55. mardi 25 septembre 2012
  56. 56. mardi 25 septembre 2012
  57. 57. mardi 25 septembre 2012
  58. 58. mardi 25 septembre 2012
  59. 59. mardi 25 septembre 2012
  60. 60. Architecturer son code http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118mardi 25 septembre 2012
  61. 61. Diviser 100 000 lignes de code en plusieurs fichiers Temps de chargement Dépendancesmardi 25 septembre 2012
  62. 62. Diviser 100 000 lignes de code en plusieurs fichiers Temps de chargement Dépendancesmardi 25 septembre 2012
  63. 63. AMD RequireJS, Curl...mardi 25 septembre 2012
  64. 64. AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modulesmardi 25 septembre 2012
  65. 65. AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modules √ Chaque module est dans son scope isolémardi 25 septembre 2012
  66. 66. AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modules √ Chaque module est dans son scope isolé √ Chargement asynchrone et à la demandemardi 25 septembre 2012
  67. 67. AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modules √ Chaque module est dans son scope isolé √ Chargement asynchrone et à la demande X Ordre du chargement et asynchronismemardi 25 septembre 2012
  68. 68. AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modules √ Chaque module est dans son scope isolé √ Chargement asynchrone et à la demande X Ordre du chargement et asynchronisme X Intégration avec librairies tiercesmardi 25 septembre 2012
  69. 69. Backbone.js Sorte de SpringMVC / JSFmardi 25 septembre 2012
  70. 70. Backbone.js Sorte de SpringMVC / JSF √ Structure votre code en MVC / MVPmardi 25 septembre 2012
  71. 71. Backbone.js Sorte de SpringMVC / JSF √ Structure votre code en MVC / MVP √ Maintenabilité d’applications de taille non- trivialemardi 25 septembre 2012
  72. 72. Backbone.js Sorte de SpringMVC / JSF √ Structure votre code en MVC / MVP √ Maintenabilité d’applications de taille non- triviale X Coût d’entréemardi 25 septembre 2012
  73. 73. Backbone.js Sorte de SpringMVC / JSF √ Structure votre code en MVC / MVP √ Maintenabilité d’applications de taille non- triviale X Coût d’entrée X Maturité, pas de standards (AngularJS...)mardi 25 septembre 2012
  74. 74. Tests automatisés http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/mardi 25 septembre 2012
  75. 75. Tests d’IHM Selenium Windmill Robotisent un navigateur qui attaque votre applicationmardi 25 septembre 2012
  76. 76. Tests unitaires TestNGmardi 25 septembre 2012
  77. 77. Tests unitaires TestNG Jasmine QUnitmardi 25 septembre 2012
  78. 78. Démomardi 25 septembre 2012
  79. 79. Jasmine Démomardi 25 septembre 2012
  80. 80. Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293mardi 25 septembre 2012
  81. 81. JsLint Trouve les utilisations d’ugly parts Sorte de CheckStyle / PMD / FindBugs S’intègre à Eclipsemardi 25 septembre 2012
  82. 82. Eclipse seulmardi 25 septembre 2012
  83. 83. Eclipse avec JsLintmardi 25 septembre 2012
  84. 84. Expressivité http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801mardi 25 septembre 2012
  85. 85. Un code expressif ? • Simple • Concis • Lisiblemardi 25 septembre 2012
  86. 86. mardi 25 septembre 2012
  87. 87. Pollutionmardi 25 septembre 2012
  88. 88. Pollution Peu lisiblemardi 25 septembre 2012
  89. 89. Pollution Peu lisible SALE !mardi 25 septembre 2012
  90. 90. Avecmardi 25 septembre 2012
  91. 91. Avec Pas de pollutionmardi 25 septembre 2012
  92. 92. Avec Pas de pollution Concision, lisibilitémardi 25 septembre 2012
  93. 93. Avec Pas de pollution Concision, lisibilité Propremardi 25 septembre 2012
  94. 94. C’est surtout... • Lisibilité du code - expressivité • Simplifie ce qu’on utilise le plus fréquemment : AJAX, manipulation du DOM...mardi 25 septembre 2012
  95. 95. C’est aussi... • Nombreux plugins tiers • Structurer son application en plugins • Incoutournable !mardi 25 septembre 2012
  96. 96. Mustache {mardi 25 septembre 2012
  97. 97. Sans Mustachemardi 25 septembre 2012 {
  98. 98. Avec Mustachemardi 25 septembre 2012 {
  99. 99. Mustache { Templating JavaScript Rendu HTML de façon lisiblemardi 25 septembre 2012
  100. 100. Mustache { A des concurrents (affaire de goûts...) Avantage: existe aussi en Java ! ➔ Même moteur côté client et serveurmardi 25 septembre 2012
  101. 101. Contrôle qualité automatisé Build et intégration continuemardi 25 septembre 2012
  102. 102. Je veux être alerté si : • Test en échec • Partie sale utilisée • Erreur de syntaxemardi 25 septembre 2012
  103. 103. Je veux être alerté si : • Test en échec Jasmine • Partie sale utilisée JsLint • Erreur de syntaxe Google Closure Compilermardi 25 septembre 2012
  104. 104. Je veux être alerté si : • Test en échec Jasmine • Partie sale utilisée JsLint • Erreur de syntaxe Google Closure Compiler S’intègrent à Maven, Jenkins, Sonarmardi 25 septembre 2012
  105. 105. Compiler du JavaScript ?mardi 25 septembre 2012
  106. 106. Compiler du JavaScript ? JavaScript est un langage interprétémardi 25 septembre 2012
  107. 107. Compiler du JavaScript ? JavaScript est un langage interprété Apports de la « compilation » :mardi 25 septembre 2012
  108. 108. Compiler du JavaScript ? JavaScript est un langage interprété Apports de la « compilation » : • Vérification de la syntaxemardi 25 septembre 2012
  109. 109. Compiler du JavaScript ? JavaScript est un langage interprété Apports de la « compilation » : • Vérification de la syntaxe • Code optimisémardi 25 septembre 2012
  110. 110. 100 000 lignes de code JavaScript: comment ? Modules Architecture Tests unitaires Parties sales Contrôle qualité Expressivité évitées automatisémardi 25 septembre 2012
  111. 111. Et depuis... Businessman sitting at desk with feet up - Paul Bradburymardi 25 septembre 2012
  112. 112. Référencesmardi 25 septembre 2012
  113. 113. Références Eloquent JavaScript http://eloquentjavascript.net/contents.htmlmardi 25 septembre 2012
  114. 114. Références Eloquent JavaScript http://eloquentjavascript.net/contents.html JavaScript Garden http://bonsaiden.github.com/JavaScript-Garden/mardi 25 septembre 2012
  115. 115. 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/mardi 25 septembre 2012
  116. 116. 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. Crockfordmardi 25 septembre 2012
  117. 117. ROTI http://www.flickr.com/photos/34943981@N00/202923614/mardi 25 septembre 2012

×