4. Nous ne sommes pas…
Des gourous JavaScript
John Resig - jQuery
Douglas Crockford – JSLint,
"JavaScript, The Good Parts"
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/
12. Nouveaux besoins
Les utilisateurs veulent des applications
vivantes, réactives et dynamiques !
Enjeu de qualité
Volume de code important
Fini de jouer !
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
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
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: "parce que ce langage a un côté sale.". Romain: "Je dirais plutôt surprenant"…
« 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 -> 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: "effectivement, c'est surprenant comme tu dis. Et en plus ce n'estpas tout…"
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: "comment coder proprement ces 100 000 lignes"
Romain: "tu pourrais carrément éviter le JavaScript…"
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'aurait pu être JS si inventé aujourd'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 -> structurer le code client side en MVC
Romain: "Là on est sur du JS sérieux. Comment vais-je organiser mon code ?"
Julien: "Dans d'autres langages, je fais des modules"…
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: "là j'ai bien architecturé mon code, mais à l'intérieur des modules ce n'est pas forcément propre."
Romain: "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 -> Plusieurs représentations
Julien : "OK le code est propre, mais a-t-il des bugs ? Comment je sais que je ne casse pas quelquechose en le changeant ?"
Pour ça, en Java, il y a les tests automatisés…
D'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 -> BDD pour JS
Testacular -> 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: "OK je sais tester mon JavaScript. En Java je rejoue mes tests à chaque commit avec mon intégration continue, je m'attends à la même chose en JavaScript, Romain?"
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 -> passer des contrôles qualité sur mon logiciel, automatiquement et régulièrement
Grunt -> JS task runner
Bower -> Gestionnaire de dépendances
Yeoman -> 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'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