javascript ce n'est pas (si) sale

JavaScript, ce n’est pas (si) saleJulien Jakubowski

Ch’ti JUG

Document sous license Creative Commons Attribution - Pas d’Utilisation Commerciale - Pas de Modification 2.0 France (CC BY-NC-ND 2.0) - http://creativecommons.org/licenses/by-nc-nd/2.0/fr/

mardi 25 septembre 2012

http://creativecommons.org/licenses/by-nc-nd/2.0/fr/

http://creativecommons.org/licenses/by-nc-nd/2.0/fr/

Qui suis-je ?Julien Jakubowski - @jak78

Développeur Java et web depuis ~10 ans


Qui ne suis-je pas ?

Un véritable expert JavaScript ;-)

John Resig - jQuery

Douglas Crockford - JSLint, JavaScript the Good Parts


On va parler de JavaScript entre Javaïstes


On va parler de JavaScript entre Javaïstes

Java is to JavaScript as Ham is to Hamsterhttp://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/


http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/

http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/

On va aussi parler de :

Super-héros MaroillesBière


Pourquoi cette présentation ?


En 2003


Maintenant...


Et aussi...


Forts enjeux

Volume de code important

Fini de jouer !


100 000 lignes de code JavaScript ?

Young man hidden behind table - © 2011 Richard Hernández Arrondo


Pourquoi ?


Parce que JavaScript,

surprenant

c’est SALE


c’est surprenant

Parce que JavaScript,

surprenantmardi 25 septembre 2012

WAT???

https://www.destroyallsoftware.com/talks/wat

Gary Bernhardt

http://codemash.org/








WAT???


Gary Bernhardt

http://codemash.org/








Super-héros MaroillesBière√


Conversion de types


Conversion de types

WAT???


Conversion de types


La solution ?


Super-héros MaroillesBière√ √


Pollution de l’espacede nommage


Global par défaut


Tout est « public » par défaut


// Attendu :1{ degre: '8%'}


// Attendu :1{ degre: '8%'}

// Obtenu :-1undefined


Automatic semi-column insertion// Attendu :1{ degre: '8%'}

// Obtenu :-1undefined


Et il en reste...

Le mot-clé this (plutôt surprenant que sale)

eval

ordre de déclaration du mot-clé var

...


Le plus sale :

Pollution de l’espace de nommage

Tout global par défaut

Insertion automatique de points-virgule


Oui, mais...


Super-héros MaroillesBière√ √ √


Comment coder 100 000 lignes de code en JavaScript

d’une façon pas si sale ?


Eviter JavaScript

GWT

CoffeeScript

DART


Modulariser

http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289mardi 25 septembre 2012

http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289

http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289

Qu’est-ce qu’un module ?



• Ensemble de code




• Présente une interface




• Présente une interface

• Masque ses détails d’implémentation


Architecturer son code

http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118mardi 25 septembre 2012

http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293


Diviser 100 000 lignes de code en plusieurs fichiers

Temps de chargement Dépendances


AMDRequireJS, Curl...



√ Découper mes 100 000 lignes en sous-modules




√ Chaque module est dans son scope isolé





√ Chargement asynchrone et à la demande






X Ordre du chargement et asynchronisme






X Ordre du chargement et asynchronisme

X Intégration avec librairies tierces


Backbone.jsSorte de SpringMVC / JSF



√ Structure votre code en MVC / MVP




√ Maintenabilité d’applications de taille non-triviale





X Coût d’entrée





X Coût d’entrée

X Maturité, pas de standards (AngularJS...)


Tests automatisés

http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/mardi 25 septembre 2012

http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/

http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/

Tests d’IHM

Robotisent un navigateur qui attaque votre application

Selenium Windmill


Tests unitaires

TestNG


Tests unitaires

TestNG

Jasmine QUnit


Démo


Démo

Jasmine


Eviter les parties sales

http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293mardi 25 septembre 2012



JsLint

Trouve les utilisations d’ugly parts

Sorte de CheckStyle / PMD / FindBugs

S’intègre à Eclipse


Eclipse seul


Eclipse avec JsLint


Expressivité

http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801mardi 25 septembre 2012



Un code expressif ?

•Simple

•Concis

•Lisible


Pollution


Pollution Peu lisible


Pollution Peu lisible SALE !


Avec


Pas de pollution

Avec


Pas de pollution Concision, lisibilité

Avec


Pas de pollution Concision, lisibilité Propre

Avec


• Lisibilité du code - expressivité

• Simplifie ce qu’on utilise le plus fréquemment : AJAX, manipulation du DOM...

C’est surtout...


• Nombreux plugins tiers

• Structurer son application en plugins

• Incoutournable !

C’est aussi...


Mustache

{


Sans Mustache{


Avec Mustache{


Templating JavaScript

Rendu HTML de façon lisible

Mustache

{


A des concurrents (affaire de goûts...)

Avantage: existe aussi en Java !

➔ Même moteur côté client et serveur

Mustache

{


Contrôle qualité automatisé

Build et intégration continue


Je veux être alerté si :

• Test en échec

• Partie sale utilisée

• Erreur de syntaxe



• Test en échec



Jasmine

JsLint

Google Closure Compiler



• Test en échec



Jasmine

JsLint

Google Closure Compiler

S’intègrent à Maven, Jenkins, Sonar


Compiler du JavaScript ?



JavaScript est un langage interprété




Apports de la « compilation » :





• Vérification de la syntaxe





• Vérification de la syntaxe

• Code optimisé


100 000 lignes de code JavaScript: comment ?

Modules Architecture Tests unitaires

Parties sales évitées

Expressivité Contrôle qualité automatisé


Et depuis...

Businessman sitting at desk with feet up - Paul Bradbury


Références


RéférencesEloquent JavaScript

http://eloquentjavascript.net/contents.html




Références

JavaScript Gardenhttp://bonsaiden.github.com/JavaScript-Garden/

Eloquent JavaScripthttp://eloquentjavascript.net/contents.html


http://bonsaiden.github.com/JavaScript-Garden/




Références



Learning Advanced JavaScript - J. Resighttp://ejohn.org/apps/learn/






http://ejohn.org/apps/learn/




Références



JavaScript: the Good Parts - D. Crockford

Learning Advanced JavaScript - J. Resighttp://ejohn.org/apps/learn/










ROTI

http://www.flickr.com/photos/34943981@N00/202923614/




javascript ce n'est pas (si) sale

Technology