Javascript ce n'est pas (si) sale
-
Upload
julien-jakubowski -
Category
Technology
-
view
783 -
download
0
description
Transcript of 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
mardi 25 septembre 2012
Qui ne suis-je pas ?
Un véritable expert JavaScript ;-)
John Resig - jQuery
Douglas Crockford - JSLint, JavaScript the Good Parts
mardi 25 septembre 2012
On va parler de JavaScript entre Javaïstes
mardi 25 septembre 2012
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/
mardi 25 septembre 2012
On va aussi parler de :
Super-héros MaroillesBière
mardi 25 septembre 2012
Pourquoi cette présentation ?
mardi 25 septembre 2012
En 2003
mardi 25 septembre 2012
Maintenant...
mardi 25 septembre 2012
Et aussi...
mardi 25 septembre 2012
Forts enjeux
Volume de code important
Fini de jouer !
mardi 25 septembre 2012
100 000 lignes de code JavaScript ?
Young man hidden behind table - © 2011 Richard Hernández Arrondo
mardi 25 septembre 2012
Young man hidden behind table - © 2011 Richard Hernández Arrondo
mardi 25 septembre 2012
Pourquoi ?
mardi 25 septembre 2012
Parce que JavaScript,
surprenant
c’est SALE
mardi 25 septembre 2012
c’est surprenant
Parce que JavaScript,
surprenantmardi 25 septembre 2012
WAT???
https://www.destroyallsoftware.com/talks/wat
Gary Bernhardt
http://codemash.org/
mardi 25 septembre 2012
mardi 25 septembre 2012
WAT???
https://www.destroyallsoftware.com/talks/wat
Gary Bernhardt
http://codemash.org/
mardi 25 septembre 2012
Super-héros MaroillesBière√
mardi 25 septembre 2012
Conversion de types
mardi 25 septembre 2012
Conversion de types
WAT???
mardi 25 septembre 2012
Conversion de types
mardi 25 septembre 2012
La solution ?
mardi 25 septembre 2012
Super-héros MaroillesBière√ √
mardi 25 septembre 2012
Pollution de l’espacede nommage
mardi 25 septembre 2012
Pollution de l’espacede nommage
mardi 25 septembre 2012
Pollution de l’espacede nommage
mardi 25 septembre 2012
Global par défaut
mardi 25 septembre 2012
Global par défaut
mardi 25 septembre 2012
Global par défaut
mardi 25 septembre 2012
Global par défaut
mardi 25 septembre 2012
Global par défaut
mardi 25 septembre 2012
Tout est « public » par défaut
mardi 25 septembre 2012
Tout est « public » par défaut
mardi 25 septembre 2012
// Attendu :1{ degre: '8%'}
mardi 25 septembre 2012
// Attendu :1{ degre: '8%'}
// Obtenu :-1undefined
mardi 25 septembre 2012
Automatic semi-column insertion// Attendu :1{ degre: '8%'}
// Obtenu :-1undefined
mardi 25 septembre 2012
Et il en reste...
Le mot-clé this (plutôt surprenant que sale)
eval
ordre de déclaration du mot-clé var
...
mardi 25 septembre 2012
Le plus sale :
Pollution de l’espace de nommage
Tout global par défaut
Insertion automatique de points-virgule
mardi 25 septembre 2012
Oui, mais...
mardi 25 septembre 2012
mardi 25 septembre 2012
Super-héros MaroillesBière√ √ √
mardi 25 septembre 2012
Comment coder 100 000 lignes de code en JavaScript
d’une façon pas si sale ?
mardi 25 septembre 2012
Eviter JavaScript
GWT
CoffeeScript
DART
mardi 25 septembre 2012
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 ?
mardi 25 septembre 2012
Qu’est-ce qu’un module ?
• Ensemble de code
mardi 25 septembre 2012
Qu’est-ce qu’un module ?
• Ensemble de code
• Présente une interface
mardi 25 septembre 2012
Qu’est-ce qu’un module ?
• Ensemble de code
• Présente une interface
• Masque ses détails d’implémentation
mardi 25 septembre 2012
mardi 25 septembre 2012
mardi 25 septembre 2012
mardi 25 septembre 2012
mardi 25 septembre 2012
mardi 25 septembre 2012
mardi 25 septembre 2012
mardi 25 septembre 2012
mardi 25 septembre 2012
mardi 25 septembre 2012
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
mardi 25 septembre 2012
Diviser 100 000 lignes de code en plusieurs fichiers
Temps de chargement Dépendances
mardi 25 septembre 2012
AMDRequireJS, Curl...
mardi 25 septembre 2012
AMDRequireJS, Curl...
√ Découper mes 100 000 lignes en sous-modules
mardi 25 septembre 2012
AMDRequireJS, Curl...
√ Découper mes 100 000 lignes en sous-modules
√ Chaque module est dans son scope isolé
mardi 25 septembre 2012
AMDRequireJS, Curl...
√ Découper mes 100 000 lignes en sous-modules
√ Chaque module est dans son scope isolé
√ Chargement asynchrone et à la demande
mardi 25 septembre 2012
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
mardi 25 septembre 2012
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
mardi 25 septembre 2012
Backbone.jsSorte de SpringMVC / JSF
mardi 25 septembre 2012
Backbone.jsSorte de SpringMVC / JSF
√ Structure votre code en MVC / MVP
mardi 25 septembre 2012
Backbone.jsSorte de SpringMVC / JSF
√ Structure votre code en MVC / MVP
√ Maintenabilité d’applications de taille non-triviale
mardi 25 septembre 2012
Backbone.jsSorte de SpringMVC / JSF
√ Structure votre code en MVC / MVP
√ Maintenabilité d’applications de taille non-triviale
X Coût d’entrée
mardi 25 septembre 2012
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...)
mardi 25 septembre 2012
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
mardi 25 septembre 2012
Tests unitaires
TestNG
mardi 25 septembre 2012
Tests unitaires
TestNG
Jasmine QUnit
mardi 25 septembre 2012
Démo
mardi 25 septembre 2012
Démo
Jasmine
mardi 25 septembre 2012
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
mardi 25 septembre 2012
Eclipse seul
mardi 25 septembre 2012
Eclipse avec JsLint
mardi 25 septembre 2012
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
mardi 25 septembre 2012
mardi 25 septembre 2012
Pollution
mardi 25 septembre 2012
Pollution Peu lisible
mardi 25 septembre 2012
Pollution Peu lisible SALE !
mardi 25 septembre 2012
Avec
mardi 25 septembre 2012
Pas de pollution
Avec
mardi 25 septembre 2012
Pas de pollution Concision, lisibilité
Avec
mardi 25 septembre 2012
Pas de pollution Concision, lisibilité Propre
Avec
mardi 25 septembre 2012
• Lisibilité du code - expressivité
• Simplifie ce qu’on utilise le plus fréquemment : AJAX, manipulation du DOM...
C’est surtout...
mardi 25 septembre 2012
• Nombreux plugins tiers
• Structurer son application en plugins
• Incoutournable !
C’est aussi...
mardi 25 septembre 2012
Mustache
{
mardi 25 septembre 2012
Sans Mustache{
mardi 25 septembre 2012
Avec Mustache{
mardi 25 septembre 2012
Templating JavaScript
Rendu HTML de façon lisible
Mustache
{
mardi 25 septembre 2012
A des concurrents (affaire de goûts...)
Avantage: existe aussi en Java !
➔ Même moteur côté client et serveur
Mustache
{
mardi 25 septembre 2012
Contrôle qualité automatisé
Build et intégration continue
mardi 25 septembre 2012
Je veux être alerté si :
• Test en échec
• Partie sale utilisée
• Erreur de syntaxe
mardi 25 septembre 2012
Je veux être alerté si :
• Test en échec
• Partie sale utilisée
• Erreur de syntaxe
Jasmine
JsLint
Google Closure Compiler
mardi 25 septembre 2012
Je veux être alerté si :
• Test en échec
• Partie sale utilisée
• Erreur de syntaxe
Jasmine
JsLint
Google Closure Compiler
S’intègrent à Maven, Jenkins, Sonar
mardi 25 septembre 2012
Compiler du JavaScript ?
mardi 25 septembre 2012
Compiler du JavaScript ?
JavaScript est un langage interprété
mardi 25 septembre 2012
Compiler du JavaScript ?
JavaScript est un langage interprété
Apports de la « compilation » :
mardi 25 septembre 2012
Compiler du JavaScript ?
JavaScript est un langage interprété
Apports de la « compilation » :
• Vérification de la syntaxe
mardi 25 septembre 2012
Compiler du JavaScript ?
JavaScript est un langage interprété
Apports de la « compilation » :
• Vérification de la syntaxe
• Code optimisé
mardi 25 septembre 2012
100 000 lignes de code JavaScript: comment ?
Modules Architecture Tests unitaires
Parties sales évitées
Expressivité Contrôle qualité automatisé
mardi 25 septembre 2012
Et depuis...
Businessman sitting at desk with feet up - Paul Bradbury
mardi 25 septembre 2012
Références
mardi 25 septembre 2012
RéférencesEloquent JavaScript
http://eloquentjavascript.net/contents.html
mardi 25 septembre 2012
Références
JavaScript Gardenhttp://bonsaiden.github.com/JavaScript-Garden/
Eloquent JavaScripthttp://eloquentjavascript.net/contents.html
mardi 25 septembre 2012
Références
JavaScript Gardenhttp://bonsaiden.github.com/JavaScript-Garden/
Eloquent JavaScripthttp://eloquentjavascript.net/contents.html
Learning Advanced JavaScript - J. Resighttp://ejohn.org/apps/learn/
mardi 25 septembre 2012
Références
JavaScript Gardenhttp://bonsaiden.github.com/JavaScript-Garden/
Eloquent JavaScripthttp://eloquentjavascript.net/contents.html
JavaScript: the Good Parts - D. Crockford
Learning Advanced JavaScript - J. Resighttp://ejohn.org/apps/learn/
mardi 25 septembre 2012
ROTI
http://www.flickr.com/photos/34943981@N00/202923614/
mardi 25 septembre 2012