Du JavaScript propre ? Challenge accepted!

  • 943 views
Uploaded on

Il y a quelques années, je bidouillais en JavaScript. Un effet “bling bling” par-ci, un contrôle de saisie par-là. L’essentiel de mon application était écrite en Java et tournait côté serveur. …

Il y a quelques années, je bidouillais en JavaScript. Un effet “bling bling” par-ci, un contrôle de saisie par-là. L’essentiel de mon application était écrite en Java et tournait côté serveur.
Mais voilà, Gmail et Google Spreadsheets sont sortis depuis longtemps. On s’attend maintenant à des applications web qui répondent instantanément et qui fonctionnent offline.
Et pour cela, il faut bien plus de code JavaScript qu’avant.
Mais 20 000 lignes de JavaScript pour un site web ? Sérieux ? Dans ce langage sale, qui n’a pas la moitié des outils de Java ?
J’ai appris. Et l’écosystème JavaScript a évolué.
Lors de cette session, je vous dévoilerai comment maintenant j’écris, sans stress, des applications JavaScript complexes.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
943
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 10h40 - 11h30 - La Seine BDu JavaScript propre ?Challenge Accepted!
  • 2. 27 au 29 mars 2013 Du JavaScript propre ?Challenge Accepted!Julien JakubowskiOCTO Technology@jak78Romain LinsolasSociété Générale@romaintaz
  • 3. Romain LinsolasDéveloppeur Java & WebArchitecte Technique@romaintaz
  • 4. Julien JakubowskiDéveloppeur Java & Web depuis 10 ans@jak78
  • 5. Nous ne sommes pas…Des gourous JavaScriptJohn Resig - jQueryDouglas Crockford – JSLint,"JavaScript, The Good Parts"
  • 6. Parlons de JavaScript entre JavaïstesJavaScript is to Java as Hamster is to Hamhttp://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/http://www.flickr.com/photos/naturesauraphotography/ http://commons.wikimedia.org/wiki/User:DocteurCosmos
  • 7. Nous allons aussi parler de…Darth Vader MaroillesBière
  • 8. Pourquoi cette présentation ?
  • 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 besoinsLes utilisateurs veulent des applications vivantes, réactives etdynamiques !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. Le JavaScriptcest SALEsurprenantPourquoi ça fait peur ?
  • 16. WAT ?>  []  +  []    ""  >  []  +  {}    [object  Object]  >  {}  +  []    0  >  {}  +  {}    NaN  >  ++[[]][+[]]+[+[]]  ===  "10"    true  
  • 17. WAT???Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
  • 18. Darth Vader MaroillesBière
  • 19. Autre problème JavaScriptWAT???
  • 20. Pollution de lespace de nommage
  • 21. Scope global par défaut
  • 22. Tout est public par défaut
  • 23. Darth Vader MaroillesBière
  • 24. Et ce nest pas tout !Le mot clé this (plus surprenant que sale)Ordre de déclaration de varEtc.
  • 25. Mais le plus salePollution de lespace de nommageTout est global par défautCode non testé
  • 26. Oui mais…
  • 27. Author : FrédériqueVoisin-Demery http://www.flickr.com/people/8514720@N04
  • 28. Nous allons aussi parler de…Darth Vader MaroillesBière
  • 29. Comment coderproprement 100,000 lignesen JavaScript ?
  • 30. On pourrait éviter le JavaScript…Déléguer• GWT• JSF• Vaadin• Etc.
  • 31. On peut aussi "améliorer" JavaScriptLangage web orienté objet pour combler leslacunes de JavaScriptUn JavaScript à l’écriture simplifiée
  • 32. Exemple de CoffeeScriptJavaScript
  • 33. Architectures MV*http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118
  • 34. Architecture MVC classiqueClientServeurAsynchrone<html>+JSController View Model
  • 35. Mes besoins aujourdhuiTemps de réponse instantanéGestion de réseaux lents (mobiles…)Mode déconnecté
  • 36. Architecture MV* en JavaScriptClientServeurView Controller Model …
  • 37. Question implémentationFrameworks optionnels, mais aident beaucoupPas encore de standard
  • 38. Modulariserhttp://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
  • 39. Quest-ce quun module ?Représente un ensemble de codeIsolation – faible couplagePrésente une interface
  • 40. Un module basique - Présentation
  • 41. Un module basique
  • 42. Un module basique
  • 43. Un module basique
  • 44. Un module basique
  • 45. Un module basique
  • 46. Un module basique
  • 47. Espace de nommage
  • 48. Diviser en plusieurs fichiers .js ?Temps de chargementPas de gestion des dépendances
  • 49. AMD, Asynchronous Module DefinitionDéfinition de dépendancesjQuery beers.js Mustache
  • 50. AMD, Asynchronous Module DefinitionChargements parallèles, à la demandejQuery Mustache beers.js sodas.js jQuery beers.js Mustache
  • 51. Eviter les parties saleshttp://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293
  • 52. JsLintDétection des ugly partsEquivalent à PMD / Checkstyle / FindBugs pour JSIntégration dans les IDE
  • 53. Intégration dans Eclipse
  • 54. Expressivitéhttp://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
  • 55. Quest-ce quun code expressif ?Cest un code simple,concis,lisible
  • 56. Mauvais exemplePollution, mauvaise lisibilité => SALE
  • 57. AvecPas de pollutionLisibilité accrueCode propre
  • 58. jQuery, cest 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
  • 61. Avec template (Mustache.js)
  • 62. Outils de templatingMustache
  • 63. Tests automatiséshttp://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
  • 64. Tests dIHMConditions réellesPas vraiment adapté au TDDSelenium Windmill
  • 65. TDD pour JavaScriptEn Java En JavaScriptTestNG
  • 66. Tests avec Jasmine
  • 67. EcosystèmeUniversity « Le fantôme, le zombie et Testacular… »Jean-Laurent De Morlhon et Pierre Gayvallet
  • 68. TDD en JavaScript
  • 69. Faire du TDD pour JavaScriptVous devez en faire en 2013 !Vous navez plus dexcuses
  • 70. Automatisation
  • 71. Détecter et alerterQuand un test échoueQuand une partie sale est utiliséeSil y a une erreur de syntaxeà Jasmineà JsLintà Google Closure CompilerIntégration dans Maven, Jenkins ou Sonar
  • 72. Intégration continue avec Jenkinshttp://localhost:8080/job/Test%20Jasmine/1/consol
  • 73. Analyse qualité avec Sonar
  • 74. Dautres outils utiles
  • 75. 100,000 lignes de JavaScript ?ModulesMV* Parties salesévitéesExpressivité AutomatisationTests
  • 76. Le monde des bisounours ?
  • 77. Le monde des bisounours ? Oui mais non !IntégrationPérennitéApprentissage
  • 78. Businessman sitting at desk with feet up - Paul Bradbury
  • 79. RéférencesEloquent JavaScripthttp://eloquentjavascript.net/contents.htmlJavaScript Gardenhttp://bonsaiden.github.com/JavaScript-Garden/Learning Advanced JavaScript - J. Resighttp://ejohn.org/apps/learn/JavaScript: the Good Parts - D. Crockford
  • 80. Questions ?@jak78 @romaintaz