Du JavaScript propre ?
Challenge Accepted!

Julien Jakubowski
OCTO Technology

@jak78

Romain Linsolas
Société Générale

@...
Romain Linsolas
Développeur Java & Web
Architecte Technique

@romaintaz
Julien Jakubowski
Développeur Java & Web depuis 11 ans
@jak78
Nous ne sommes pas…
Des gourous JavaScript
John Resig - jQuery

Douglas Crockford – JSLint,
"JavaScript, The Good Parts"
JavaScript et Java ?

http://www.flickr.com/photos/naturesauraphotography/	


http://commons.wikimedia.org/wiki/User:Docteu...
Nous allons aussi parler de…

Darth Vader

Bière

Maroilles
Pourquoi cette présentation ?
En 2003
Le JavaScript est partout !

Runtime le plus distribué
Navigateurs desktop, mobile…
Même côté serveur (
, …)
Les géants du web
Les géants du web
Nouveaux besoins
Les utilisateurs veulent des applications vivantes, réactives et
dynamiques !
Enjeu de qualité
Volume de ...
100,000 lignes de code JavaScript ?

Young man hidden behind table - © 2011 Richard Hernández Arrondo
Pourquoi ça fait peur ?

Le JavaScript
c'est SALE
surprenant
WAT ?
>	
  []	
  +	
  []	
  
	
  ""	
  
>	
  []	
  +	
  {}	
  
	
  [object	
  Object]	
  
>	
  {}	
  +	
  []	
  
	
  0	
  ...
??
T?
WA
Gary Bernhardt
http://codemash.org
https://www.destroyallsoftware.com/talks/wat
Darth Vader

Bière

Maroilles
Autre problème JavaScript

???
AT
W
Pollution de l'espace de nommage
Scope global par défaut
Tout est public par défaut
Darth Vader

Bière

Maroilles
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 nommage
Tout est global par défaut
Code non testé
Oui mais…
Author : Frédérique Voisin-Demery http://www.flickr.com/people/8514720@N04
Nous allons aussi parler de…

Darth Vader

Bière

Maroilles
Comment coder
proprement 100,000 lignes
en JavaScript ?
On pourrait éviter le JavaScript…
Déléguer
• GWT
• JSF
• Vaadin
• Etc.
On pourrait utiliser un « JavaScript amélioré »

Langage web orienté objet
« Ce que JavaScript serait s’il avait été
inven...
Exemple de CoffeeScript
JavaScript
Architectures MV*

http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-...
Architecture MVC classique
<html>
+
JS

Client
Serveur
Controller 	


Model	


View
Mes besoins aujourd'hui

Temps de réponse instantané
Gestion de réseaux lents (mobiles…)
Mode déconnecté
Architecture MV* en JavaScript
View	


Controller	


Model	

Client
Serveur
…
Question implémentation

Frameworks optionnels, mais aident beaucoup
Pas encore de standard
Modulariser

http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
Qu'est-ce qu'un module ?

Représente un ensemble de code
Isolation – faible couplage
Pré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 chargement
Pas 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	


jQ...
Eviter les parties sales

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

Détection des ugly parts
Equivalent à PMD / Checkstyle / FindBugs pour JS
Inté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 pollution
Lisibilité accrue
Code propre
Templates
A la main
Avec template (Mustache.js)
Outils de templating

Mustache
Tests automatisés

http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
Tests d'IHM

Selenium
Conditions réalistes
Lent, fragile
TDD pour JavaScript
En Java

TestNG

En JavaScript
Tests avec Jasmine
Ecosystème

Devoxx FR 2013 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 échoue
Quand une partie sale est utilisée
S'il y a une erreur de syntaxe

 Jasmine
 J...
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 ?

MV*

Modules

Parties sales
évitées

Expressivité

Tests

Automatisation
Le monde des bisounours ?
Le monde des bisounours ? Oui mais non !

Intégration
Pérennité
Apprentissage
Businessman sitting at desk with feet up - Paul Bradbury
Références
Eloquent JavaScript
http://eloquentjavascript.net/contents.html
JavaScript Garden
http://bonsaiden.github.com/J...
Questions ?

@jak78

@romaintaz
Upcoming SlideShare
Loading in...5
×

Softshake 2013 - Du JavaScript propre ? Challenge accepted!

1,478

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,478
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Softshake 2013 - Du JavaScript propre ? Challenge accepted!

  1. 1. Du JavaScript propre ? Challenge Accepted! Julien Jakubowski OCTO Technology @jak78 Romain Linsolas Société Générale @romaintaz 27 au 29 mars 2013
  2. 2. Romain Linsolas Développeur Java & Web Architecte Technique @romaintaz
  3. 3. Julien Jakubowski Développeur Java & Web depuis 11 ans @jak78
  4. 4. Nous ne sommes pas… Des gourous JavaScript John Resig - jQuery Douglas Crockford – JSLint, "JavaScript, The Good Parts"
  5. 5. JavaScript et Java ? http://www.flickr.com/photos/naturesauraphotography/ http://commons.wikimedia.org/wiki/User:DocteurCosmos JavaScript is to Java as Hamster is to Ham http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/
  6. 6. Nous allons aussi parler de… Darth Vader Bière Maroilles
  7. 7. Pourquoi cette présentation ?
  8. 8. En 2003
  9. 9. Le JavaScript est partout ! Runtime le plus distribué Navigateurs desktop, mobile… Même côté serveur ( , …)
  10. 10. Les géants du web
  11. 11. Les géants du web
  12. 12. Nouveaux besoins Les utilisateurs veulent des applications vivantes, réactives et dynamiques ! Enjeu de qualité Volume de code important  Fini de jouer !
  13. 13. 100,000 lignes de code JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
  14. 14. Pourquoi ça fait peur ? Le JavaScript c'est SALE surprenant
  15. 15. WAT ? >  []  +  []    ""   >  []  +  {}    [object  Object]   >  {}  +  []    0   >  {}  +  {}    NaN   >  ++[[]][+[]]+[+[]]  ===  "10"    true  
  16. 16. ?? T? WA Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat
  17. 17. Darth Vader Bière Maroilles
  18. 18. Autre problème JavaScript ??? AT W
  19. 19. Pollution de l'espace de nommage
  20. 20. Scope global par défaut
  21. 21. Tout est public par défaut
  22. 22. Darth Vader Bière Maroilles
  23. 23. Et ce n'est pas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
  24. 24. Mais le plus sale Pollution de l'espace de nommage Tout est global par défaut Code non testé
  25. 25. Oui mais…
  26. 26. Author : Frédérique Voisin-Demery http://www.flickr.com/people/8514720@N04
  27. 27. Nous allons aussi parler de… Darth Vader Bière Maroilles
  28. 28. Comment coder proprement 100,000 lignes en JavaScript ?
  29. 29. On pourrait éviter le JavaScript… Déléguer • GWT • JSF • Vaadin • Etc.
  30. 30. 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 verbeux Sucre syntaxique
  31. 31. Exemple de CoffeeScript JavaScript
  32. 32. Architectures MV* http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118
  33. 33. Architecture MVC classique <html> + JS Client Serveur Controller Model View
  34. 34. Mes besoins aujourd'hui Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté
  35. 35. Architecture MV* en JavaScript View Controller Model Client Serveur …
  36. 36. Question implémentation Frameworks optionnels, mais aident beaucoup Pas encore de standard
  37. 37. Modulariser http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
  38. 38. Qu'est-ce qu'un module ? Représente un ensemble de code Isolation – faible couplage Présente une interface
  39. 39. Un module basique - Présentation
  40. 40. Un module basique
  41. 41. Un module basique
  42. 42. Un module basique
  43. 43. Un module basique
  44. 44. Un module basique
  45. 45. Un module basique
  46. 46. Espace de nommage
  47. 47. Diviser en plusieurs fichiers .js ? Temps de chargement Pas de gestion des dépendances
  48. 48. AMD, Asynchronous Module Definition Définition de dépendances jQuery beers.js Mustache
  49. 49. AMD, Asynchronous Module Definition Chargements parallèles, à la demande jQuery Mustache beers.js sodas.js jQuery Mustache beers.js
  50. 50. Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293
  51. 51. JsLint Détection des ugly parts Equivalent à PMD / Checkstyle / FindBugs pour JS Intégration dans les IDE
  52. 52. Intégration dans Eclipse
  53. 53. Expressivité http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
  54. 54. Qu'est-ce qu'un code expressif ? C'est un code simple, concis, lisible
  55. 55. Mauvais exemple Pollution, mauvaise lisibilité => SALE
  56. 56. Avec Pas de pollution Lisibilité accrue Code propre
  57. 57. Templates
  58. 58. A la main
  59. 59. Avec template (Mustache.js)
  60. 60. Outils de templating Mustache
  61. 61. Tests automatisés http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
  62. 62. Tests d'IHM Selenium Conditions réalistes Lent, fragile
  63. 63. TDD pour JavaScript En Java TestNG En JavaScript
  64. 64. Tests avec Jasmine
  65. 65. Ecosystème Devoxx FR 2013 University « Le fantôme, le zombie et Testacular… » Jean-Laurent De Morlhon et Pierre Gayvallet
  66. 66. TDD en JavaScript
  67. 67. Automatisation
  68. 68. Détecter et alerter Quand un test échoue Quand une partie sale est utilisée S'il y a une erreur de syntaxe  Jasmine  JsLint  Google Closure Compiler Intégration dans Maven, Jenkins ou SonarQube
  69. 69. Intégration continue avec Jenkins http://localhost:8080/job/Test%20Jasmine/1/consol
  70. 70. Analyse qualité avec Sonar
  71. 71. D'autres outils utiles
  72. 72. 100,000 lignes de JavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
  73. 73. Le monde des bisounours ?
  74. 74. Le monde des bisounours ? Oui mais non ! Intégration Pérennité Apprentissage
  75. 75. Businessman sitting at desk with feet up - Paul Bradbury
  76. 76. Références Eloquent JavaScript http://eloquentjavascript.net/contents.html JavaScript Garden http://bonsaiden.github.com/JavaScript-Garden/ Learning Advanced JavaScript - J. Resig http://ejohn.org/apps/learn/ JavaScript: the Good Parts - D. Crockford
  77. 77. Questions ? @jak78 @romaintaz

×