softshake 2013 - du javascript propre ? challenge accepted!
DESCRIPTION
Présentation "Du JavaScript propre ? Challenge Accepted" présentée par Romain Linsolas & Julien Jaskubowski à SoftShake 2013, Genève.TRANSCRIPT
![Page 1: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/1.jpg)
27 au 29 mars 2013
Du JavaScript propre ?
Challenge Accepted!
Julien Jakubowski
OCTO Technology
@jak78
Romain LinsolasSociété Générale
@romaintaz
![Page 2: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/2.jpg)
Romain Linsolas
Développeur Java & WebArchitecte Technique
@romaintaz
![Page 3: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/3.jpg)
Julien Jakubowski
Développeur Java & Web depuis 11 ans
@jak78
![Page 4: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/4.jpg)
Nous ne sommes pas…
Des gourous JavaScript
John Resig - jQuery
Douglas Crockford – JSLint,"JavaScript, The Good Parts"
![Page 5: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/5.jpg)
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
![Page 6: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/6.jpg)
Nous allons aussi parler de…
Darth Vader MaroillesBière
![Page 7: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/7.jpg)
Pourquoi cette présentation ?
![Page 8: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/8.jpg)
En 2003
![Page 9: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/9.jpg)
Le JavaScript est partout !
Runtime le plus distribuéNavigateurs desktop, mobile…Même côté serveur ( , …)
![Page 10: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/10.jpg)
Les géants du web
![Page 11: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/11.jpg)
Les géants du web
![Page 12: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/12.jpg)
Nouveaux besoins
Les utilisateurs veulent des applications vivantes, réactives et dynamiques !
Enjeu de qualitéVolume de code important
Fini de jouer !
![Page 13: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/13.jpg)
100,000 lignes de code JavaScript ?
Young man hidden behind table - © 2011 Richard Hernández Arrondo
![Page 14: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/14.jpg)
Le JavaScriptc'estSALEsurprenant
Pourquoi ça fait peur ?
![Page 15: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/15.jpg)
WAT ?> [] + []""
> [] + {}[object Object]
> {} + []0
> {} + {}NaN
> ++[[]][+[]]+[+[]] === "10"true
![Page 16: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/16.jpg)
WA
T???WA
T???
Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
![Page 17: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/17.jpg)
Darth Vader MaroillesBière
![Page 18: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/18.jpg)
Autre problème JavaScript
WAT
???
![Page 19: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/19.jpg)
Pollution de l'espace de nommage
![Page 20: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/20.jpg)
Scope global par défaut
![Page 21: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/21.jpg)
Tout est public par défaut
![Page 22: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/22.jpg)
Darth Vader MaroillesBière
![Page 23: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/23.jpg)
Et ce n'est pas tout !
Le mot clé this (plus surprenant que sale)Ordre de déclaration de var
Etc.
![Page 24: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/24.jpg)
Mais le plus sale
Pollution de l'espace de nommageTout est global par défautCode non testé
![Page 25: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/25.jpg)
Oui mais…
![Page 26: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/26.jpg)
Author : Frédérique Voisin-Demery http://www.flickr.com/people/8514720@N04
![Page 27: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/27.jpg)
Nous allons aussi parler de…
Darth Vader MaroillesBière
![Page 28: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/28.jpg)
Comment coderproprement 100,000 lignes
en JavaScript ?
![Page 29: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/29.jpg)
On pourrait éviter le JavaScript…
Déléguer
• GWT• JSF• Vaadin• Etc.
![Page 30: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/30.jpg)
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
![Page 31: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/31.jpg)
Exemple de CoffeeScript
JavaScript
![Page 32: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/32.jpg)
Architectures MV*
http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118
![Page 33: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/33.jpg)
Architecture MVC classique
Client
Serveur
<html>+JS
Controller
ViewModel
![Page 34: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/34.jpg)
Mes besoins aujourd'hui
Temps de réponse instantanéGestion de réseaux lents (mobiles…)Mode déconnecté
![Page 35: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/35.jpg)
Architecture MV* en JavaScript
Client
Serveur
View Controller
Model
…
![Page 36: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/36.jpg)
Question implémentation
Frameworks optionnels, mais aident beaucoupPas encore de standard
![Page 37: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/37.jpg)
Modulariser
http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
![Page 38: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/38.jpg)
Qu'est-ce qu'un module ?
Représente un ensemble de codeIsolation – faible couplagePrésente une interface
![Page 39: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/39.jpg)
Un module basique - Présentation
![Page 40: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/40.jpg)
Un module basique
![Page 41: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/41.jpg)
Un module basique
![Page 42: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/42.jpg)
Un module basique
![Page 43: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/43.jpg)
Un module basique
![Page 44: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/44.jpg)
Un module basique
![Page 45: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/45.jpg)
Un module basique
![Page 46: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/46.jpg)
Espace de nommage
![Page 47: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/47.jpg)
Diviser en plusieurs fichiers .js ?
Temps de chargementPas de gestion des dépendances
![Page 48: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/48.jpg)
AMD, Asynchronous Module Definition
Définition de dépendances
jQuery
beers.js
Mustache
![Page 49: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/49.jpg)
AMD, Asynchronous Module Definition
Chargements parallèles, à la demande
jQuery Mustache
beers.js
sodas.js
jQuerybeers.
jsMustache
![Page 50: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/50.jpg)
Eviter les parties sales
http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293
![Page 51: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/51.jpg)
JsLint
Détection des ugly partsEquivalent à PMD / Checkstyle / FindBugs pour JSIntégration dans les IDE
![Page 52: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/52.jpg)
Intégration dans Eclipse
![Page 53: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/53.jpg)
Expressivité
http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
![Page 54: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/54.jpg)
Qu'est-ce qu'un code expressif ?
C'est un code simple, concis,lisible
![Page 55: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/55.jpg)
Mauvais exemple
Pollution, mauvaise lisibilité=> SALE
![Page 56: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/56.jpg)
Avec
Pas de pollutionLisibilité accrueCode propre
![Page 57: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/57.jpg)
Templates
![Page 58: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/58.jpg)
A la main
![Page 59: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/59.jpg)
Avec template (Mustache.js)
![Page 60: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/60.jpg)
Outils de templating
Mustache
![Page 61: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/61.jpg)
Tests automatisésTests automatisés
http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
![Page 62: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/62.jpg)
Tests d'IHM
Conditions réalistesLent, fragile
Selenium
![Page 63: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/63.jpg)
TDD pour JavaScript
En Java En JavaScript
TestNG
![Page 64: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/64.jpg)
Tests avec Jasmine
![Page 65: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/65.jpg)
Ecosystème
Devoxx FR 2013 University « Le fantôme, le zombie et Testacular… »
Jean-Laurent De Morlhon et Pierre Gayvallet
![Page 66: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/66.jpg)
TDD en JavaScript
![Page 67: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/67.jpg)
Automatisation
![Page 68: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/68.jpg)
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
![Page 69: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/69.jpg)
Intégration continue avec Jenkins
http://localhost:8080/job/Test%20Jasmine/1/consol
![Page 70: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/70.jpg)
Analyse qualité avec Sonar
![Page 71: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/71.jpg)
D'autres outils utiles
![Page 72: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/72.jpg)
100,000 lignes de JavaScript ?
ModulesMV* Parties sales
évitées
ExpressivitéAutomatisatio
nTests
![Page 73: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/73.jpg)
Le monde des bisounours ?
![Page 74: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/74.jpg)
Le monde des bisounours ? Oui mais non !
IntégrationPérennitéApprentissage
![Page 75: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/75.jpg)
Businessman sitting at desk with feet up - Paul Bradbury
![Page 76: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/76.jpg)
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
![Page 77: Softshake 2013 - Du JavaScript propre ? Challenge Accepted!](https://reader036.vdocument.in/reader036/viewer/2022081603/5577fa1cd8b42a24198b5100/html5/thumbnails/77.jpg)
Questions ?
@jak78 @romaintaz