10h40 - 11h30 - La Seine BDu JavaScript propre ?Challenge Accepted!
27 au 29 mars 2013	Du JavaScript propre ?Challenge Accepted!Julien JakubowskiOCTO Technology@jak78Romain LinsolasSociété G...
Romain LinsolasDéveloppeur Java & WebArchitecte Technique@romaintaz
Julien JakubowskiDéveloppeur Java & Web depuis 10 ans@jak78
Nous ne sommes pas…Des gourous JavaScriptJohn Resig - jQueryDouglas Crockford – JSLint,"JavaScript, The Good Parts"
Parlons de JavaScript entre JavaïstesJavaScript is to Java as Hamster is to Hamhttp://coding.smashingmagazine.com/2009/07/...
Nous allons aussi parler de…Darth Vader MaroillesBière
Pourquoi cette présentation ?
En 2003
Le JavaScript est partout !Runtime le plus distribuéMobilitéMême côté serveur ( , …)
Les grands du web
Les grands du web
Nouveaux besoinsLes utilisateurs veulent des applications vivantes, réactives etdynamiques !Enjeu de qualitéVolume de code...
100,000 lignes de code JavaScript ?Young man hidden behind table - © 2011 Richard Hernández Arrondo
Le JavaScriptcest SALEsurprenantPourquoi ça fait peur ?
WAT ?>	  []	  +	  []	  	  ""	  >	  []	  +	  {}	  	  [object	  Object]	  >	  {}	  +	  []	  	  0	  >	  {}	  +	  {}	  	  NaN	...
WAT???Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
Darth Vader MaroillesBière
Autre problème JavaScriptWAT???
Pollution de lespace de nommage
Scope global par défaut
Tout est public par défaut
Darth Vader MaroillesBière
Et ce nest pas tout !Le mot clé this (plus surprenant que sale)Ordre de déclaration de varEtc.
Mais le plus salePollution de lespace de nommageTout est global par défautCode non testé
Oui mais…
Author : FrédériqueVoisin-Demery http://www.flickr.com/people/8514720@N04
Nous allons aussi parler de…Darth Vader MaroillesBière
Comment coderproprement 100,000 lignesen JavaScript ?
On pourrait éviter le JavaScript…Déléguer• GWT• JSF• Vaadin• Etc.
On peut aussi "améliorer" JavaScriptLangage web orienté objet pour combler leslacunes de JavaScriptUn JavaScript à l’écrit...
Exemple de CoffeeScriptJavaScript
Architectures MV*http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de...
Architecture MVC classiqueClientServeurAsynchrone<html>+JSController 	View	Model
Mes besoins aujourdhuiTemps de réponse instantanéGestion de réseaux lents (mobiles…)Mode déconnecté
Architecture MV* en JavaScriptClientServeurView	 Controller	Model	…
Question implémentationFrameworks optionnels, mais aident beaucoupPas encore de standard
Modulariserhttp://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
Quest-ce quun module ?Représente un ensemble de codeIsolation – faible couplagePré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 chargementPas de gestion des dépendances
AMD, Asynchronous Module DefinitionDéfinition de dépendancesjQuery	beers.js	Mustache
AMD, Asynchronous Module DefinitionChargements parallèles, à la demandejQuery	 Mustache	 beers.js	 sodas.js	jQuery	beers.j...
Eviter les parties saleshttp://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/1...
JsLintDétection des ugly partsEquivalent à PMD / Checkstyle / FindBugs pour JSIntégration dans les IDE
Intégration dans Eclipse
Expressivitéhttp://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
Quest-ce quun code expressif ?Cest un code simple,concis,lisible
Mauvais exemplePollution, mauvaise lisibilité => SALE
AvecPas de pollutionLisibilité accrueCode propre
jQuery, cest surtout :• Lisibilité du code, expressivité• Simplification de ce qui est utile : manipulation du DOM, Ajax…M...
Templates
A la main
Avec template (Mustache.js)
Outils de templatingMustache
Tests automatiséshttp://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
Tests dIHMConditions réellesPas vraiment adapté au TDDSelenium Windmill
TDD pour JavaScriptEn Java En JavaScriptTestNG
Tests avec Jasmine
EcosystèmeUniversity « Le fantôme, le zombie et Testacular… »Jean-Laurent De Morlhon et Pierre Gayvallet
TDD en JavaScript
Faire du TDD pour JavaScriptVous devez en faire en 2013 !Vous navez plus dexcuses
Automatisation
Détecter et alerterQuand un test échoueQuand une partie sale est utiliséeSil y a une erreur de syntaxeà Jasmineà JsLintà...
Intégration continue avec Jenkinshttp://localhost:8080/job/Test%20Jasmine/1/consol
Analyse qualité avec Sonar
Dautres outils utiles
100,000 lignes de JavaScript ?ModulesMV* Parties salesévitéesExpressivité AutomatisationTests
Le monde des bisounours ?
Le monde des bisounours ? Oui mais non !IntégrationPérennitéApprentissage
Businessman sitting at desk with feet up - Paul Bradbury
RéférencesEloquent JavaScripthttp://eloquentjavascript.net/contents.htmlJavaScript Gardenhttp://bonsaiden.github.com/JavaS...
Questions ?@jak78 @romaintaz
Upcoming SlideShare
Loading in...5
×

Du JavaScript propre ? Challenge accepted!

1,131

Published 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.
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.

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
1,131
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Du JavaScript propre ? Challenge accepted!"

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

×