27 au 29 mars 2013
Du JavaScript propre ?
Challenge Accepted!
Julien Jakubowski
OCTO Technology
@jak78
Romain LinsolasSociété Générale
@romaintaz
Romain Linsolas
Développeur Java & WebArchitecte Technique
@romaintaz
Julien Jakubowski
Développeur Java & Web depuis 11 ans
@jak78
Nous ne sommes pas…
Des gourous JavaScript
John Resig - jQuery
Douglas Crockford – JSLint,"JavaScript, The Good Parts"
JavaScript et Java ?
JavaScript is to Java as Hamster is to Ham
http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/
http://www.flickr.com/photos/naturesauraphotography/ http://commons.wikimedia.org/wiki/User:DocteurCosmos
Nous allons aussi parler de…
Darth Vader MaroillesBière
Pourquoi cette présentation ?
En 2003
Le JavaScript est partout !
Runtime le plus distribuéNavigateurs desktop, mobile…Même côté serveur ( , …)
Les géants du web
Les géants 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 JavaScriptc'estSALEsurprenant
Pourquoi ça fait peur ?
WAT ?> [] + []""
> [] + {}[object Object]
> {} + []0
> {} + {}NaN
> ++[[]][+[]]+[+[]] === "10"true
WA
T???WA
T???
Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
Darth Vader MaroillesBiè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 MaroillesBiè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 nommageTout est global par défautCode non testé
Oui mais…
Author : Frédérique Voisin-Demery http://www.flickr.com/people/8514720@N04
Nous allons aussi parler de…
Darth Vader MaroillesBière
Comment coderproprement 100,000 lignes
en JavaScript ?
On pourrait éviter le JavaScript…
Déléguer
• GWT• JSF• Vaadin• Etc.
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 verbeuxSucre syntaxique
Exemple de CoffeeScript
JavaScript
Architectures MV*
http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118
Architecture MVC classique
Client
Serveur
<html>+JS
Controller
ViewModel
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 beaucoupPas encore de standard
Modulariser
http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
Qu'est-ce qu'un module ?
Représente un ensemble de codeIsolation – faible couplagePré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 chargementPas 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
jQuerybeers.
jsMustache
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 partsEquivalent à PMD / Checkstyle / FindBugs pour JSInté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 pollutionLisibilité accrueCode propre
Templates
A la main
Avec template (Mustache.js)
Outils de templating
Mustache
Tests automatisésTests automatisés
http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
Tests d'IHM
Conditions réalistesLent, fragile
Selenium
TDD pour JavaScript
En Java En JavaScript
TestNG
Tests avec Jasmine
Ecosystème
Devoxx FR 2013 University « Le fantôme, le zombie et Testacular… »
Jean-Laurent De Morlhon et Pierre Gayvallet
TDD en JavaScript
Automatisation
Détecter et alerter
Quand un test échoueQuand une partie sale est utiliséeS'il y a une erreur de syntaxe
Jasmine JsLint Google Closure Compiler
Intégration dans Maven, Jenkins ou SonarQube
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 ?
ModulesMV* Parties sales
évitées
ExpressivitéAutomatisatio
nTests
Le monde des bisounours ?
Le monde des bisounours ? Oui mais non !
IntégrationPérennitéApprentissage
Businessman sitting at desk with feet up - Paul Bradbury
Références
Eloquent JavaScripthttp://eloquentjavascript.net/contents.html
JavaScript Gardenhttp://bonsaiden.github.com/JavaScript-Garden/
Learning Advanced JavaScript - J. Resighttp://ejohn.org/apps/learn/
JavaScript: the Good Parts - D. Crockford
Questions ?
@jak78 @romaintaz