Télécharger en tant que PDF, PPTX
![WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true](https://image.slidesharecdn.com/javascript-devoxxfrance2013-ppt-130329080351-phpapp01/75/Du-JavaScript-propre-Challenge-accepted-Devoxx-France-2013-16-2048.jpg)
Téléchargé parJulien Jakubowski
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
La présentation aborde les défis et les bonnes pratiques pour écrire un code JavaScript propre, en réponse aux enjeux grandissants d'applications dynamiques et réactives. Les intervenants, Romain Linsolas et Julien Jakubowski, discutent des problèmes courants liés à la pollution de l'espace de nommage, ainsi que des solutions comme l'utilisation de modules et de frameworks pour structurer le code. Ils insistent également sur l'importance des tests automatisés et de l'intégration continue dans le développement JavaScript moderne.
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
- 1. Du JavaScript propre? Challenge Accepted! 10h40 - 11h30 - La Seine B
- 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. Romain Linsolas DéveloppeurJava & Web Architecte Technique @romaintaz
- 4. Julien Jakubowski DéveloppeurJava & Web depuis 10 ans @jak78
- 5. Nous ne sommespas… Des gourous JavaScript John Resig - jQuery Douglas Crockford – JSLint, "JavaScript, The Good Parts"
- 6. Parlons de JavaScriptentre 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. Nous allons aussiparler de… Darth Vader Bière Maroilles
- 8.
- 9.
- 10. Le JavaScript estpartout ! Runtime le plus distribué Mobilité Même côté serveur ( , …)
- 11.
- 12.
- 13. Nouveaux besoins Lesutilisateurs veulent des applications vivantes, réactives et dynamiques ! Enjeu de qualité Volume de code important Fini de jouer !
- 14. 100,000 lignes decode JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
- 15. Pourquoi ça faitpeur ? Le JavaScript c'est SALE surprenant
- 16. WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true
- 17.
- 18. Darth Vader Bière Maroilles
- 19. Autre problème JavaScript WAT? ??
- 20. Pollution de l'espacede nommage
- 21. Scope global pardéfaut
- 22. Tout est publicpar défaut
- 23. Darth Vader Bière Maroilles
- 24. Et ce n'estpas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
- 25. Mais le plussale Pollution de l'espace de nommage Tout est global par défaut Code non testé
- 26.
- 28. Nous allons aussiparler de… Darth Vader Bière Maroilles
- 29. Comment coder proprement 100,000lignes en JavaScript ?
- 30. On pourrait éviterle JavaScript… Déléguer • GWT • JSF • Vaadin • Etc.
- 31. On peut aussi"améliorer" JavaScript Langage web orienté objet pour combler les Un JavaScript à l’écriture simplifiée lacunes de JavaScript
- 32. Exemple de CoffeeScript JavaScript
- 33.
- 34. Architecture MVC classique <html> + JS Client Asynchrone Serveur Controller Model View
- 35. Mes besoins aujourd'hui Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté
- 36. Architecture MV* enJavaScript View Controller Model Client Serveur …
- 37. Question implémentation Frameworksoptionnels, mais aident beaucoup Pas encore de standard
- 38.
- 39. Qu'est-ce qu'un module? Représente un ensemble de code Isolation – faible couplage Présente une interface
- 40. Un module basique- Présentation
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. Diviser en plusieursfichiers .js ? Temps de chargement Pas de gestion des dépendances
- 49. AMD, Asynchronous ModuleDefinition Définition de dépendances jQuery beers.js Mustache
- 50. AMD, Asynchronous ModuleDefinition Chargements parallèles, à la demande jQuery Mustache beers.js sodas.js jQuery beers.js Mustache
- 51. Eviter les partiessales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293
- 52. JsLint Détection desugly parts Equivalent à PMD / Checkstyle / FindBugs pour JS Intégration dans les IDE
- 53.
- 54. Expressivité http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
- 55. Qu'est-ce qu'un codeexpressif ? C'est un code simple, concis, lisible
- 56. Mauvais exemple Pollution, mauvaise lisibilité => SALE
- 57. Avec Pas depollution Lisibilité accrue Code propre
- 58. jQuery, c'est 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
- 59.
- 60.
- 61.
- 62. Outils de templating Mustache
- 63.
- 64. Tests d'IHM Selenium Windmill Conditions réelles Pas vraiment adapté au TDD
- 65. TDD pour JavaScript En Java En JavaScript TestNG
- 66.
- 67. Ecosystème University « Lefantôme, le zombie et Testacular… » Jean-Laurent De Morlhon et Pierre Gayvallet
- 68.
- 69. Faire du TDDpour JavaScript Vous devez en faire en 2013 ! Vous n'avez plus d'excuses
- 70.
- 71. Détecter et alerter Quand un test échoue Jasmine Quand une partie sale est utilisée JsLint S'il y a une erreur de syntaxe Google Closure Compiler Intégration dans Maven, Jenkins ou Sonar
- 72. Intégration continue avecJenkins http://localhost:8080/job/Test%20Jasmine/1/consol
- 73. Analyse qualité avecSonar
- 74.
- 75. 100,000 lignes deJavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
- 76. Le monde desbisounours ?
- 77. Le monde desbisounours ? Oui mais non ! Intégration Pérennité Apprentissage
- 78. Businessman sitting atdesk with feet up - Paul Bradbury
- 79. 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
- 80. Questions ? @jak78 @romaintaz