0
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:Docteur...
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
surprenant
SALE
WAT ?
> [] + []
""
> [] + {}
[object Object]
> {} + []
0
> {} + {}
NaN
> ++[[]][+[]]+[+[]] === "10"
true
A
W
??
?
T
Gary Bernhardt
http://codemash.org
https://www.destroyallsoftware.com/talks/wat
Darth Vader

Bière

Maroilles
Autre problème JavaScript

T
A
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

Mustac
he

beers.j
s
AMD, Asynchronous Module
Definition
Chargements parallèles, à la demande

jQuery Mustac beers. sodas.j
he
js
s
jQuery
Must...
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!

472

Published on

Présentation "Du JavaScript propre ? Challenge Accepted" présentée par Romain Linsolas & Julien Jaskubowski à SoftShake 2013, Genève.

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

  • Be the first to like this

No Downloads
Views
Total Views
472
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ceci dit, en tant que dev Java, on utilise souvent des technos web, et on est automatiquement amenés à en faire.
  • Aujourd’hui je ne fais plus de JS comme ça, il y a au moins 4 ou 5 défauts majeurs dans ce code. A l’issue de cette présentation, vous saurez les identifier.
    Et maintenant…
  • Chiffre de 99% pas à jour, mais en 2010, 2% désactivés aux US
  • Ergonomie riche, nécessite de plus en plus de choses sur le client
    Offline
  • Adresser JavaScript aussi sérieusement que Java et autres
  • Julien: &quot;parce que ce langage a un côté sale.&quot;. Romain: &quot;Je dirais plutôt surprenant&quot;…
  • « what the fuck »
  • C’est la dernière qui gagne.
    Si vous faites du chargement async, ça dépend aussi de l’âge du capitaine
  • Où est le bug ?
  • Rester sur le code un peu...
    Pourquoi c’est un pb: mes appelants dépendent trop de moi, couplage fort, changements instables.
    On ne fait pas toujours une API -&gt; aspect documentaire, pour moi-même ou ceux qui vont maintenir: quels sont les points d’entrée, comment on utilise cet objet counter ?
  • Romain: “J’ai parlé de principaux problèmes avec mon application de bière. C’était facile avec un exemple de code, c’est de la triche. “
    Julien: « OK mais ce n’est pas tout… »
  • Julien: &quot;effectivement, c&apos;est surprenant comme tu dis. Et en plus ce n&apos;estpas tout…&quot;
  • Le plus dangereux
  • Quand on fait du JavaScript, au premier contact, ça pue.
    Mais quand on y a vraiment goûté, c’est pas si mal.
    Au début ça pue mais il faut gouter pour l’apprécier.
    Ca vous fait penser à quoi ce que je viens de dire ?
  • Julien: &quot;comment coder proprement ces 100 000 lignes&quot;
    Romain: &quot;tu pourrais carrément éviter le JavaScript…&quot;
  • Il existe des moyens de ne pas faire de JS. Vous connaissez sans doute...
    Je n’en parle pas car hors-périmètre de ma présentation. A votre dispo à la bière tout à l’heure.
  • Google Dart = Langage orienté objet JS par Google. Ce qu&apos;aurait pu être JS si inventé aujourd&apos;hui.
    CoffeeScript = extension au JS pour coder proprement certaines parties répétitives. Eviter les lourdeurs du code JS
  • Classiquement pour le côté serveur
    Maintenabilité, facile à tester unitairement
  • Citer GMail
  • Grosses applis JS ou offline -&gt; structurer le code client side en MVC
  • Romain: &quot;Là on est sur du JS sérieux. Comment vais-je organiser mon code ?&quot;
    Julien: &quot;Dans d&apos;autres langages, je fais des modules&quot;…
  • Présente une interface à ses appelants, points d’entrée bien identifiés
    Je ne veux pas que les appelants dépendent de trop de détails et aient un couplage trop fort avec le module. Maîtrise d’impacts de changement. Et je souhaite dire comment utiliser mon code, pour ceux qui vont le maintenir - où est le point d’entrée ?
  • Compteur basique
  • Packages
  • Julien: &quot;là j&apos;ai bien architecturé mon code, mais à l&apos;intérieur des modules ce n&apos;est pas forcément propre.&quot;
    Romain: &quot;Justement, intéressons-nous maintenant aux solutions qui nous aident à faire du code propre »
  • Problèmes:
    - checkForm: global
    - document.getElementById répétitif et illisible
    - style.display = «block» ???
  • Qui ne connait pas jQuery ?
    Propre si dans fichier séparé
    $ et #beerForm c’est un sélecteur comme en CSS
  • Templating: pb important dans le MVC côté client
    Data vient d’un appel JSON ou est stocké en local en offline.
    Je dois le rendre en HTML en JavaScript.
    1 jeu de donnée -&gt; Plusieurs représentations
  • Julien : &quot;OK le code est propre, mais a-t-il des bugs ? Comment je sais que je ne casse pas quelquechose en le changeant ?&quot;
    Pour ça, en Java, il y a les tests automatisés…
  • D&apos;ialleurs, dans la salle, qui fait des tests automatisés en Java ? En JS ?
  • Ce sont des tests d’intégration : lents, problématique du rejeu, difficultés de maintenance
    Pas prévu pour test unitaire
  • Qui fait du TDD ? Test Driven Development
    En JS, on a Jasmine et QUnit
  • Vous vous souvenez de mon compteur...
    Tests du contrat de mon compteur
    Tests incomplets...
    Jasmine bcp plus puissant: mocks etc.
    Octopod
  • Cucumber.JS -&gt; BDD pour JS
    Testacular -&gt; Test Runner pour JS nécessitant NodeJS (utilisé par AngularJS)
    « Qui fait du test automatisé aujorud’hui ? Du TDD? »
  • Qui fait des tests d’IHM (Selenium etc) ? Des tests unitaires (JUnit...) ? Du TDD ? La plupart d’entre-vous j’espère.
    Julien: &quot;OK je sais tester mon JavaScript. En Java je rejoue mes tests à chaque commit avec mon intégration continue, je m&apos;attends à la même chose en JavaScript, Romain?&quot;
  • Qui (ne) fait (pas) de l’intégration continue ? Du Maven ?
    Plus un problème est détecté tard, plus il coûte cher à corriger. But principal de l’intégration continue : être averti des problèmes au plus tôt -&gt; passer des contrôles qualité sur mon logiciel, automatiquement et régulièrement
  • Grunt -&gt; JS task runner
    Bower -&gt; Gestionnaire de dépendances
    Yeoman -&gt; Un peu le Maven du JS. Outils de construction, gestion de dépendances, exécution de tests. Utilise Grunt et Bower (entre autres)
  • Julien
  • Romain – C&apos;est bien tout ça Julien, je me crois dans le monde des Bisounours, tout est rose !
    Julien – Non ! Attention tout de même…
  • ... je suis plus zen avec JavaScript
    Mais non, je ne code pas en costard-cravate pour autant.
  • ... je suis plus zen avec JavaScript
    Mais non, je ne code pas en costard-cravate pour autant.
  • Eloquent JS: un livre gratuit en ligne, cours de JS. On est souvent un peu autodidacte, c’est bien de réviser les fondamentaux
    JavaScript garden: fait le point sur les features de JS et pointe les parties sales
    Advanced JS
    JavaScript the good parts: ce livre définit un sous-ensemble de JS «good» et vous fait «désapprendre» les parties sales
  • Transcript of "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/misunderstandingmarkup-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 surprenant SALE
    15. 15. WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true
    16. 16. A W ?? ? T Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat
    17. 17. Darth Vader Bière Maroilles
    18. 18. Autre problème JavaScript T A 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 Mustac he beers.j s
    49. 49. AMD, Asynchronous Module Definition Chargements parallèles, à la demande jQuery Mustac beers. sodas.j he js s jQuery Mustac he beers.j s
    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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×