Post on 24-May-2015
10h40 - 11h30 - La Seine B
Du JavaScript propre ? Challenge Accepted!
27 au 29 mars 2013
Du JavaScript propre ? Challenge Accepted!
Julien Jakubowski OCTO Technology
@jak78
Romain Linsolas Société Générale
@romaintaz
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 Maroilles Bière
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
Le JavaScript c'est SALE surprenant
Pourquoi ça fait peur ?
WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true
WAT???
Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat
Darth Vader Maroilles Bière
Autre problème JavaScript
WAT???
Pollution de l'espace de nommage
Scope global par défaut
Tout est public par défaut
Darth Vader Maroilles Bière
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 Maroilles Bière
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 lacunes de JavaScript
Un JavaScript à l’écriture simplifiée
Exemple de CoffeeScript JavaScript
Architectures MV*
Architecture MVC classique
Client Serveur
Asynchrone
<html> + JS
Controller
View Model
Mes besoins aujourd'hui
Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté
Architecture MV* en JavaScript
Client Serveur
View Controller
Model
…
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
Conditions réelles Pas vraiment adapté au TDD
Selenium Windmill
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 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 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 ?
Modules MV* Parties sales évitées
Expressivité Automatisation Tests
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