Publicité
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
29 Mar 2013•0 j'aime•2,295 vues
2 j'aime
Soyez le premier à aimer ceci
afficher plus
vues
Nombre de vues
0
Sur Slideshare
0
À partir des intégrations
0
Nombre d'intégrations
0
Télécharger pour lire hors ligne
Signaler
Technologie
Julien JakubowskiSuivre
Lead Developer, Software Craftsman, Consultant @Octo Technology à Agile TourPublicité
Publicité
Publicité
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
- Du JavaScript propre ? Challenge Accepted! 10h40 - 11h30 - La Seine B
- Du JavaScript propre ? Challenge Accepted! Julien Jakubowski Romain Linsolas OCTO Technology Société Générale @jak78 @romaintaz 27 au 29 mars 2013
- 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, The Good Parts"
- 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/
- Nous allons aussi parler de… Darth Vader Bière Maroilles
- Pourquoi cette pré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 besoins Les utilisateurs veulent des applications vivantes, réactives et dynamiques ! Enjeu de qualité Volume de code important Fini de jouer !
- 100,000 lignes de code JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
- Pourquoi ça fait peur ? Le JavaScript c'est SALE surprenant
- WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true
- WAT ??? Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat
- Darth Vader Bière Maroilles
- Autre problème JavaScript WAT? ??
- Pollution de l'espace de nommage
- Scope global par défaut
- Tout est public par défaut
- Darth Vader Bière Maroilles
- Et ce n'est pas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
- Mais le plus sale Pollution de l'espace de nommage Tout est global par défaut Code non testé
- Oui mais…
- Nous allons aussi parler de… Darth Vader Bière Maroilles
- Comment coder proprement 100,000 lignes en JavaScript ?
- On pourrait éviter le JavaScript… Déléguer • GWT • JSF • Vaadin • Etc.
- On peut aussi "améliorer" JavaScript Langage web orienté objet pour combler les Un JavaScript à l’écriture simplifiée lacunes de JavaScript
- Exemple de CoffeeScript JavaScript
- Architectures MV*
- Architecture MVC classique <html> + JS Client Asynchrone Serveur Controller Model View
- Mes besoins aujourd'hui Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté
- Architecture MV* en JavaScript View Controller Model Client Serveur …
- Question implémentation Frameworks optionnels, mais aident beaucoup Pas encore de standard
- Modulariser
- Qu'est-ce qu'un module ? Représente un ensemble de code Isolation – faible couplage Pré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 Module Definition Définition de dépendances jQuery beers.js Mustache
- AMD, Asynchronous Module Definition Chargements parallèles, à la demande jQuery Mustache beers.js sodas.js jQuery beers.js Mustache
- Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293
- JsLint Détection des ugly parts Equivalent à PMD / Checkstyle / FindBugs pour JS Intégration dans les IDE
- Intégration dans Eclipse
- Expressivité http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
- Qu'est-ce qu'un code expressif ? C'est un code simple, concis, lisible
- Mauvais exemple Pollution, mauvaise lisibilité => SALE
- Avec Pas de pollution Lisibilité accrue Code propre
- 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
- Templates
- A la main
- Avec template (Mustache.js)
- Outils de templating Mustache
- Tests automatisés
- Tests d'IHM Selenium Windmill Conditions réelles Pas vraiment adapté au TDD
- TDD pour JavaScript En Java En JavaScript TestNG
- Tests avec Jasmine
- Ecosystème University « Le fantôme, le zombie et Testacular… » Jean-Laurent De Morlhon et Pierre Gayvallet
- TDD en JavaScript
- Faire du TDD pour JavaScript Vous devez en faire en 2013 ! Vous n'avez plus d'excuses
- Automatisation
- 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
- Intégration continue avec Jenkins http://localhost:8080/job/Test%20Jasmine/1/consol
- Analyse qualité avec Sonar
- D'autres outils utiles
- 100,000 lignes de JavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
- 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 JavaScript Garden http://bonsaiden.github.com/JavaScript-Garden/ Learning Advanced JavaScript - J. Resig http://ejohn.org/apps/learn/ JavaScript: the Good Parts - D. Crockford
- Questions ? @jak78 @romaintaz
Publicité