Embed Size (px)
Citation preview
10h40 - 11h30 - La Seine B
Du JavaScript propre ?
Challenge Accepted!
27 au 29 mars 2013
Du JavaScript propre ?
Challenge Accepted!
Julien JakubowskiOCTO Technology
@jak78
Romain LinsolasSociété Générale
@romaintaz
Romain Linsolas
Développeur Java & WebArchitecte 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 MaroillesBiè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 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…
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 peut aussi "améliorer" JavaScript
Langage web orienté objet pour combler les lacunes de JavaScript
Un JavaScript à l’écriture simplifiée
Exemple de CoffeeScriptJavaScript
Architectures MV*
Architecture MVC classique
ClientServeur
Asynchrone
<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
ClientServeur
View Controller
Model
…
Question implémentation
Frameworks optionnels, mais aident beaucoupPas encore de standard
Modulariser
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
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ésTests automatisés
Tests d'IHM
Conditions réellesPas 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
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 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 ?
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érencesEloquent JavaScript
http://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
