JavaScript Devoxx France 2013

1,184
-1

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,184
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
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: "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
  • JavaScript Devoxx France 2013

    1. 1. Du JavaScript propre ? Challenge Accepted! 10h40 - 11h30 - La Seine B
    2. 2. propre ? Challenge Accepted! Julien Romain LinsolasJakubowski Société GénéraleOCTO Technology @romaintaz 27 au 29 mars 2013
    3. 3. Romain Linsolas Développeur Java & Web Architecte Technique @romaintaz
    4. 4. Julien Jakubowski Développeur Java & Web depuis 10 ans @jak78
    5. 5. Nous ne sommes pas… Des gourous JavaScript John Resig - jQuery Douglas Crockford – JSLint, "JavaScript, The Good Parts"
    6. 6. Parlons de JavaScript entreJavaïstesJavaScript is to Java as Hamster is to Hamhttp://coding.smashingmagazine.com/2009/07/29/misunderstanding- markup-xhtml-2-comic-strip/
    7. 7. Nous allons aussi parler de… Darth Vader Bière Maroilles
    8. 8. Pourquoi cetteprésentation ?
    9. 9. En 2003
    10. 10. Le JavaScript est partout !Runtime le plus distribuéMobilitéMême côté serveur( , …)
    11. 11. Les grands du web
    12. 12. Les grands du web
    13. 13. Nouveaux besoinsLes utilisateurs veulent des applications vivantes, réactives et dynamiques !Enjeu de qualitéVolume de code important Fini de jouer !
    14. 14. 100,000 lignes de codeJavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
    15. 15. Pourquoi ça fait peur ?Le JavaScriptcest surprenant SALE
    16. 16. WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true
    17. 17. W A T???Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
    18. 18. Darth Vader Bière Maroilles
    19. 19. Autre problème JavaScript A T W ? ??
    20. 20. Pollution de lespace de nommage
    21. 21. Scope global par défaut
    22. 22. Tout est public par défaut
    23. 23. Darth Vader Bière Maroilles
    24. 24. Et ce nest pas tout !Le mot clé this (plus surprenantque sale)Ordre de déclaration de varEtc.
    25. 25. Mais le plus salePollution de lespace denommageTout est global par défautCode non testé
    26. 26. Oui mais…
    27. 27. Nous allons aussi parler de… Darth Vader Bière Maroilles
    28. 28. Comment coder proprement100,000 lignesen JavaScript ?
    29. 29. On pourrait éviter leJavaScript… Déléguer• GWT• JSF• Vaadin• Etc.
    30. 30. On peut aussi "améliorer"JavaScriptLangage web orienté objet pour Un JavaScript à l’écriturecombler les lacunes de simplifiéeJavaScript
    31. 31. Exemple de CoffeeScriptJavaScript
    32. 32. Architectures MV*
    33. 33. Architecture MVC classique <html> + JS Client Asynchrone Serveur Controller Model View
    34. 34. Mes besoins aujourdhuiTemps de réponse instantanéGestion de réseaux lents(mobiles…)Mode déconnecté
    35. 35. Architecture MV* enJavaScript View Controller Model Client Serveur …
    36. 36. Question implémentationFrameworks optionnels, mais aident beaucoupPas encore de standard
    37. 37. Modulariser
    38. 38. Quest-ce quun module ?Représente un ensemble decodeIsolation – faible couplagePré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 ModuleDefinitionDéfinition de dépendances jQuery beers.j s Mustac he
    49. 49. AMD, Asynchronous ModuleDefinitionChargements parallèles, à la demande jQuery Mustac beers. sodas.j he js s jQuery beers.j Mustac s he
    50. 50. Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/10988929
    51. 51. JsLintDétection des ugly partsEquivalent à PMD / Checkstyle /FindBugs pour JSInté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/AA00480
    54. 54. Quest-ce quun code expressif?Cest un code simple, concis, lisible
    55. 55. Mauvais exemplePollution , mauvaise lisibilité => SALE
    56. 56. AvecPas de pollutionLisibilité accrueCode propre
    57. 57. jQuery, cest surtout :• Lisibilité du code, expressivité• Simplification de ce qui est utile : manipulation duDOM, Ajax…Mais aussi :• Structuration du code en plugins• Nombreux plugins existants
    58. 58. Templates
    59. 59. A la main
    60. 60. Avec template (Mustache.js)
    61. 61. Outils de templating Mustache
    62. 62. Tests automatisés
    63. 63. Tests dIHM Selenium Windmill Conditions réelles Pas vraiment adapté au TDD
    64. 64. TDD pour JavaScript En Java En JavaScript TestNG
    65. 65. Tests avec Jasmine
    66. 66. EcosystèmeUniversity « Le fantôme, le zombie et Testacular… »Jean-Laurent De Morlhon et Pierre Gayvallet
    67. 67. TDD en JavaScript
    68. 68. Automatisation
    69. 69. Détecter et alerter Quand un test échoue  Jasmine Quand une partie sale est  JsLint utilisée  Google Closure Sil y a une erreur de Compiler syntaxe Intégration dans Maven, Jenkins ou Sonar
    70. 70. Intégration continue avecJenkins http://localhost:8080/job/Test%20Jasmine/1/consol
    71. 71. Analyse qualité avec Sonar
    72. 72. Dautres outils utiles
    73. 73. 100,000 lignes deJavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
    74. 74. Le monde des bisounours ?
    75. 75. Le monde des bisounours ?Oui mais non ! Intégration Pérennité Apprentissage
    76. 76. Businessman sitting at desk with feet up - Paul Bradbury
    77. 77. 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
    78. 78. 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.

    ×