Your SlideShare is downloading. ×
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Softshake 2013 - Du JavaScript propre ? Challenge accepted!

1,414

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,414
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
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. Du JavaScript propre ? Challenge Accepted! Julien Jakubowski OCTO Technology @jak78 Romain Linsolas Société Générale @romaintaz 27 au 29 mars 2013
  • 2. Romain Linsolas Développeur Java & Web Architecte Technique @romaintaz
  • 3. Julien Jakubowski Développeur Java & Web depuis 11 ans @jak78
  • 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/misunderstanding-markup-xhtml-2-comic-strip/
  • 6. Nous allons aussi parler de… Darth Vader Bière Maroilles
  • 7. Pourquoi cette présentation ?
  • 8. En 2003
  • 9. Le JavaScript est partout ! Runtime le plus distribué Navigateurs desktop, mobile… Même côté serveur ( , …)
  • 10. Les géants du web
  • 11. Les géants du web
  • 12. Nouveaux besoins Les utilisateurs veulent des applications vivantes, réactives et dynamiques ! Enjeu de qualité Volume de code important  Fini de jouer !
  • 13. 100,000 lignes de code JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondo
  • 14. Pourquoi ça fait peur ? Le JavaScript c'est SALE surprenant
  • 15. WAT ? >  []  +  []    ""   >  []  +  {}    [object  Object]   >  {}  +  []    0   >  {}  +  {}    NaN   >  ++[[]][+[]]+[+[]]  ===  "10"    true  
  • 16. ?? T? WA Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat
  • 17. Darth Vader Bière Maroilles
  • 18. Autre problème JavaScript ??? AT W
  • 19. Pollution de l'espace de nommage
  • 20. Scope global par défaut
  • 21. Tout est public par défaut
  • 22. Darth Vader Bière Maroilles
  • 23. Et ce n'est pas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
  • 24. Mais le plus sale Pollution de l'espace de nommage Tout est global par défaut Code non testé
  • 25. Oui mais…
  • 26. Author : Frédérique Voisin-Demery http://www.flickr.com/people/8514720@N04
  • 27. Nous allons aussi parler de… Darth Vader Bière Maroilles
  • 28. Comment coder proprement 100,000 lignes en JavaScript ?
  • 29. On pourrait éviter le JavaScript… Déléguer • GWT • JSF • Vaadin • Etc.
  • 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
  • 31. Exemple de CoffeeScript JavaScript
  • 32. Architectures MV* http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118
  • 33. Architecture MVC classique <html> + JS Client Serveur Controller Model View
  • 34. Mes besoins aujourd'hui Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté
  • 35. Architecture MV* en JavaScript View Controller Model Client Serveur …
  • 36. Question implémentation Frameworks optionnels, mais aident beaucoup Pas encore de standard
  • 37. Modulariser http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
  • 38. Qu'est-ce qu'un module ? Représente un ensemble de code Isolation – faible couplage Présente une interface
  • 39. Un module basique - Présentation
  • 40. Un module basique
  • 41. Un module basique
  • 42. Un module basique
  • 43. Un module basique
  • 44. Un module basique
  • 45. Un module basique
  • 46. Espace de nommage
  • 47. Diviser en plusieurs fichiers .js ? Temps de chargement Pas de gestion des dépendances
  • 48. AMD, Asynchronous Module Definition Définition de dépendances jQuery beers.js Mustache
  • 49. AMD, Asynchronous Module Definition Chargements parallèles, à la demande jQuery Mustache beers.js sodas.js jQuery Mustache beers.js
  • 50. Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293
  • 51. JsLint Détection des ugly parts Equivalent à PMD / Checkstyle / FindBugs pour JS Intégration dans les IDE
  • 52. Intégration dans Eclipse
  • 53. Expressivité http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801
  • 54. Qu'est-ce qu'un code expressif ? C'est un code simple, concis, lisible
  • 55. Mauvais exemple Pollution, mauvaise lisibilité => SALE
  • 56. Avec Pas de pollution Lisibilité accrue Code propre
  • 57. Templates
  • 58. A la main
  • 59. Avec template (Mustache.js)
  • 60. Outils de templating Mustache
  • 61. Tests automatisés http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
  • 62. Tests d'IHM Selenium Conditions réalistes Lent, fragile
  • 63. TDD pour JavaScript En Java TestNG En JavaScript
  • 64. Tests avec Jasmine
  • 65. Ecosystème Devoxx FR 2013 University « Le fantôme, le zombie et Testacular… » Jean-Laurent De Morlhon et Pierre Gayvallet
  • 66. TDD en JavaScript
  • 67. Automatisation
  • 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
  • 69. Intégration continue avec Jenkins http://localhost:8080/job/Test%20Jasmine/1/consol
  • 70. Analyse qualité avec Sonar
  • 71. D'autres outils utiles
  • 72. 100,000 lignes de JavaScript ? MV* Modules Parties sales évitées Expressivité Tests Automatisation
  • 73. Le monde des bisounours ?
  • 74. Le monde des bisounours ? Oui mais non ! Intégration Pérennité Apprentissage
  • 75. Businessman sitting at desk with feet up - Paul Bradbury
  • 76. 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
  • 77. Questions ? @jak78 @romaintaz

×