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

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

Java is to JavaScript as Ham is to Hamsterhttp://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 ?

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???

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

Gary Bernhardt

http://codemash.org/

Super-héros MaroillesBière√

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%'}

// 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)

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

CoffeeScript

Modulariser

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

Qu’est-ce qu’un module ?

• Ensemble de code

• 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

Diviser 100 000 lignes de code en plusieurs fichiers

Temps de chargement Dépendances

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 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 Maturité, pas de standards (AngularJS...)

Tests automatisés

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

Tests d’IHM

Robotisent un navigateur qui attaque votre application

Selenium Windmill

Tests unitaires

TestNG

Tests unitaires

TestNG

Jasmine QUnit

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 !

Pas de pollution

Pas de pollution Concision, lisibilité

Pas de pollution Concision, lisibilité Propre

• 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

• 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

Références

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

Références

JavaScript: the Good Parts - D. Crockford

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

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

javascript ce n'est pas (si) sale

Technology

javascript, jquery& ajax

pare brise sale

javascript faq

sale marche verte

josh alonso | store sale

javascript & tools

the national sale

introdução ao javascript€¦ · introdução ao...

javascript documentation · servidor: javascript mediante...

javascript html5 - canvas

cours javascript v1

sale à vögele-shoes

À vendre for sale

cours javascript

rrts charolais bull sale

comment blanchir l'argent sale ?

javascript - members.loria.fr · programmation objet...

bar 5 extravaganza sale

outagamie spring sale 2015

plaquette perfect sale 2010