• Save
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,517
On Slideshare
804
From Embeds
713
Number of Embeds
15

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 713

http://blog.octo.com 472
http://cloud.feedly.com 169
http://www.newsblur.com 24
http://www-ig-opensocial.googleusercontent.com 9
http://digg.com 8
http://www.feedspot.com 8
http://feed.boiteataquets.org 7
http://feedly.com 5
http://inoreader.com 4
http://bluerat.fr 2
http://reader.aol.com 1
http://127.0.0.1 1
http://marty.alwaysdata.net 1
http://www.lo-ol.fr 1
http://personne.no-ip.org 1

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