JavaScript Devoxx France 2013
•Transferir como PPT, PDF•
2 gostaram•2,386 visualizações
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (9)
Destaque
Destaque (20)
Semelhante a JavaScript Devoxx France 2013
Semelhante a JavaScript Devoxx France 2013 (20)
Mais de Romain Linsolas
Mais de Romain Linsolas (8)
JavaScript Devoxx France 2013
- 1. Du JavaScript propre ? Challenge Accepted! 10h40 - 11h30 - La Seine B
- 2. propre ? Challenge Accepted! Julien Romain Linsolas Jakubowski Société Générale OCTO Technology @romaintaz 27 au 29 mars 2013
- 3. Romain Linsolas Développeur Java & Web Architecte Technique @romaintaz
- 4. Julien Jakubowski Développeur Java & Web depuis 10 ans @jak78
- 5. Nous ne sommes pas… Des gourous JavaScript John Resig - jQuery Douglas Crockford – JSLint, "JavaScript, The Good Parts"
- 6. Parlons de JavaScript entre Javaïstes JavaScript is to Java as Hamster is to Ham http://coding.smashingmagazine.com/2009/07/29/misunderstanding- markup-xhtml-2-comic-strip/
- 7. Nous allons aussi parler de… Darth Vader Bière Maroilles
- 9. En 2003
- 10. Le JavaScript est partout ! Runtime le plus distribué Mobilité Même côté serveur ( , …)
- 11. Les grands du web
- 12. Les grands du web
- 13. Nouveaux besoins Les utilisateurs veulent des applications vivantes, réactives et dynamiques ! Enjeu de qualité Volume de code important Fini de jouer !
- 14. 100,000 lignes de code JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
- 15. Pourquoi ça fait peur ? Le JavaScript c'est surprenant SALE
- 16. WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true
- 17. W A T??? Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat
- 18. Darth Vader Bière Maroilles
- 19. Autre problème JavaScript A T W ? ??
- 20. Pollution de l'espace de nommage
- 21. Scope global par défaut
- 22. Tout est public par défaut
- 23. Darth Vader Bière Maroilles
- 24. Et ce n'est pas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
- 25. Mais le plus sale Pollution de l'espace de nommage Tout est global par défaut Code non testé
- 26. Oui mais…
- 28. Nous allons aussi parler de… Darth Vader Bière Maroilles
- 29. Comment coder proprement 100,000 lignes en JavaScript ?
- 30. On pourrait éviter le JavaScript… Déléguer • GWT • JSF • Vaadin • Etc.
- 31. On peut aussi "améliorer" JavaScript Langage web orienté objet pour Un JavaScript à l’écriture combler les lacunes de simplifiée JavaScript
- 34. Architecture MVC classique <html> + JS Client Asynchrone Serveur Controller Model View
- 35. Mes besoins aujourd'hui Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté
- 36. Architecture MV* en JavaScript View Controller Model Client Serveur …
- 37. Question implémentation Frameworks optionnels, mais aident beaucoup Pas encore de standard
- 38. Modulariser
- 39. Qu'est-ce qu'un module ? Représente un ensemble de code Isolation – faible couplage Présente une interface
- 40. Un module basique - Présentation
- 48. Diviser en plusieurs fichiers .js ? Temps de chargement Pas de gestion des dépendances
- 49. AMD, Asynchronous Module Definition Définition de dépendances jQuery beers.j s Mustac he
- 50. AMD, Asynchronous Module Definition Chargements parallèles, à la demande jQuery Mustac beers. sodas.j he js s jQuery beers.j Mustac s he
- 51. Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/10988929
- 52. JsLint Détection des ugly parts Equivalent à PMD / Checkstyle / FindBugs pour JS Intégration dans les IDE
- 54. Expressivité http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA00480
- 55. Qu'est-ce qu'un code expressif ? C'est un code simple, concis, lisible
- 56. Mauvais exemple Pollution , mauvaise lisibilité => SALE
- 57. Avec Pas de pollution Lisibilité accrue Code propre
- 58. jQuery, c'est surtout : • Lisibilité du code, expressivité • Simplification de ce qui est utile : manipulation du DOM, Ajax… Mais aussi : • Structuration du code en plugins • Nombreux plugins existants
- 59. Templates
- 60. A la main
- 62. Outils de templating Mustache
- 64. Tests d'IHM Selenium Windmill Conditions réelles Pas vraiment adapté au TDD
- 65. TDD pour JavaScript En Java En JavaScript TestNG
- 67. Ecosystème University « Le fantôme, le zombie et Testacular… » Jean-Laurent De Morlhon et Pierre Gayvallet
- 69. Automatisation
- 70. Détecter et alerter Quand un test échoue Jasmine Quand une partie sale est JsLint utilisée Google Closure S'il y a une erreur de Compiler syntaxe Intégration dans Maven, Jenkins ou Sonar
- 71. Intégration continue avec Jenkins http://localhost:8080/job/Test%20Jasmine/1/consol
- 72. Analyse qualité avec Sonar
- 74. 100,000 lignes de JavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
- 75. Le monde des bisounours ?
- 76. Le monde des bisounours ? Oui mais non ! Intégration Pérennité Apprentissage
- 77. Businessman sitting at desk with feet up - Paul Bradbury
- 78. 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
- 79. Questions ? @jak78 @romaintaz
Notas do Editor
- 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"…
- 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
- Possibilité de développer en fonctionnel, avec underscore par ex.
- 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 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 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