Javascript proprement

710 views
614 views

Published on

Support de la session "Javascript proprement" du BreizhCamp

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
710
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript proprement

  1. 1. JavaScript « proprement » (subjectif)
  2. 2. Guillaume CollicDéveloppeur et Formateur Agiliste Passionné Indépendantgcollic@gmail.com / @gcollic / GuillaumeCollic.com Je traine du coté de : AgileBreizh-AgileLeanOuest / CodeOuest Agile Rennes / MugOuest BreizhCamp / AgileTourRennes / AgileOpenBreizh
  3. 3. Tout a commencé, j’étais un développeur C# sans peur et sans reproches…http://www.flickr.com/photos/antanask/5367478421 (CC BY-NC 2.0)
  4. 4. …mon code était sous contrôle
  5. 5. Jusqu’au jour où…http://www.flickr.com/photos/bluesquarething/4264220448 (CC BY-NC-SA 2.0)
  6. 6. …on me proposa de réaliser une application web riche et complexe coté client Client Serveur
  7. 7. Par quel bout prendre le projet pour éviter le plat de spaghetti ?http://www.flickr.com/photos/aiko82/3344617770 (CC BY-NC-SA 2.0)
  8. 8. Que feriez vous ?
  9. 9. J’ai eu un coup de stress …
  10. 10. …puis j’ai décidé d’accepter le challenge !http://www.flickr.com/photos/wasteofspace/6022022223 (CC BY-SA 2.0)
  11. 11. J’ai découplé le code et le rendu• Démo
  12. 12. Sélecteurs• #id• .classe• :visible / :hidden• :selected• [attribut=valeur]• Parent > enfant• …
  13. 13. Et beaucoup plus• Manipulation du dom• Utilitaires et template• Animations• Lisse les différences entre navigateurs• …
  14. 14. Résumé• Découpler IHM et Code (jQuery)
  15. 15. Victoire !http://www.flickr.com/photos/clintjcl/391565090 (CC BY-NC-SA 2.0)
  16. 16. Pas si simple.JavaScript a de sacrés mauvais cotés ! • Démo • Variables globales • comportement non intuitifs • et bien d’autres ! • (cf. session précédente de Christophe Jollivet)
  17. 17. Heureusement, un sous ensemble de JavaScript plus propre réduit ces « WAT ??? » • === • Patterns – Module – Orienté Objet • Par prototypage • Pseudo-Classique • JsLint • …
  18. 18. Pattern Module(function() { var person; person = {}; person.talk = function(){ console.log("I am "+this.name); }; person.name = "toto"; person.talk();}).call(this);
  19. 19. Résumé• Découpler IHM et Code (jQuery)• Utiliser « the good parts »
  20. 20. Génial !http://www.flickr.com/photos/thesussman/2588904213 (CC BY-NC-ND 2.0)
  21. 21. …mais c’est répétitif, un accident est vite arrivé !http://www.flickr.com/photos/freakingnoob/3438012333/ (CC BY 2.0)
  22. 22. Pourquoi pas un langage basé sur les goodparts pour cacher les mauvais côtés de JS ?http://www.flickr.com/photos/desiitaly/2193724466 (CC BY 2.0)
  23. 23. Une refonte importantede la syntaxe de JavaScript
  24. 24. Plugins pour les 10 principaux éditeurs
  25. 25. Gain de popularité lent, puis depuis 2011 incontournable dans les conférences JShttp://www.flickr.com/photos/jurvetson/6472876377 (CC BY 2.0)
  26. 26. Intégré à Rails depuis 3.1http://www.joeydevilla.com
  27. 27. Déjà un langage majeur• Très forte inspiration pour la prochaine version de JavaScript Brendan Eich, créateur de JavaScript
  28. 28. Peut être utilisé n’importe où où JavaScript est utilisé• La règle d’or de CoffeeScript : « C’est juste du JavaScript »• N’inclut aucun frameworks
  29. 29. Se compile en JavaScript propre• Vous pouvez même apprendre à coder proprement en JavaScript en lisant le code compilé !
  30. 30. Site
  31. 31. Site
  32. 32. Principes• Supprime la ponctuation superflu – Ressemble à Ruby, se base sur l’indentation• Raccourci les mots clés les plus fréquents – ‘@’ compile en ‘this.’ – ‘->’ compile en ‘function()’ – ‘(x,y) ->’ compile en ‘function(x,y)’ – ‘Return’ par défaut sur la dernière instruction
  33. 33. Exempleperson = {}person.talk = -> console.log "I am "+this.nameperson.name = "toto"person.talk()
  34. 34. Exemple(function() { var person; person = {}; person.talk = function(){ console.log("I am "+this.name); }; person.name = "toto"; person.talk();}).call(this);
  35. 35. Exemple(function() { var person; person = {}; person.talk = function(){ console.log("I am "+this.name); }; person.name = "toto"; person.talk();}).call(this);
  36. 36. Exemplevar person;person = {};person.talk = function(){ console.log("I am "+this.name);};person.name = "toto";person.talk();
  37. 37. Exemplevar person;person = {};person.talk = function(){ console.log("I am "+this.name);};person.name = "toto";person.talk();
  38. 38. Exemplevar personperson = {}person.talk = function() console.log "I am "+this.nameperson.name = "toto"person.talk()
  39. 39. Exemplevar personperson = {}person.talk = function() console.log "I am "+this.nameperson.name = "toto"person.talk()
  40. 40. Exemplevar personperson = {}person.talk = -> console.log "I am "+this.nameperson.name = "toto"person.talk()
  41. 41. Exemplevar personperson = {}person.talk = -> console.log "I am "+this.nameperson.name = "toto"person.talk()
  42. 42. Exempleperson = {}person.talk = -> console.log "I am "+this.nameperson.name = "toto"person.talk()
  43. 43. Compilateur• REPL – Coffee• Évalue – Coffee –e "MonCode"• Affiche le JS – Coffee –p Cible• Évalue et affiche le JS – Coffee –pe "MonCode"• Compile une fois – Coffee –c Cible• Compile à chaque modification – Coffee –cw Cible
  44. 44. Array comprehensions (Linq, ruby,…)• For n in number• For epsilon in number when epsilon < 1• For odd in number by 2• For person,index in persons• For key of object• For key,value of object
  45. 45. …• Existential Operator• Chained Comparisons• Destructuring Assignment• String Interpolation, Block Strings• Paramètres optionnelles• …
  46. 46. Syntaxe Objet Classique• Démo• Détails techniques (prototype, etc) dans la session de Christophe Jollivet• Classe• Membres• Constructor – Initialisation de membres
  47. 47. Résumé• Découpler IHM et Code (jQuery)• Utiliser « the good parts »• Utiliser CoffeeScript
  48. 48. J’étais enfin serein ! Le code était bien lisible…http://www.flickr.com/photos/crashmaster/3323478244 (CC BY-NC 2.0)
  49. 49. … mais mon code était boguéhttp://www.flickr.com/photos/lenscrack/5166587405 (CC BY-NC-ND 2.0)
  50. 50. Réfléchissons. Jamais, je ne coderais côté serveur sans tests unitaires, pourquoi ce serait différent ici ?!http://www.flickr.com/photos/braintoad/2669638050 (CC BY-NC-SA 2.0)
  51. 51. Tests Unitaires• Classique, BDD, spécial asynchrone, … – Jasmine – QUnit – JSUnit – Mocha – Vows – JsTestDriver – SinonJS –…
  52. 52. Jasmine• Démo
  53. 53. Matchers toEqual(y) / toBe(y) / toMatch(pattern) toContain(y)toBeDefined() / toBeUndefined() / toBeNull() toBeTruthy() / toBeFalsy() toBeLessThan(y) / toBeGreaterThan(y) toThrow(e)
  54. 54. Résumé• Découpler IHM et Code (jQuery)• Utiliser « the good parts »• Utiliser CoffeeScript• Faire des tests unitaires
  55. 55. Super !http://www.flickr.com/photos/40348123@N02/3996348907 (CC BY-NC 2.0)
  56. 56. F5 dans le browser, ça craint pour le TDD et l’intégration continue• Démo• JsTestDriver• Gem Jasmine-Headless-Webkit• …
  57. 57. TrafficLight• Démo
  58. 58. Conclusion• Découpler IHM et Code (jQuery)• Utiliser « the good parts »• Utiliser CoffeeScript• Faire des tests unitaires• Travailler exactement comme dans les autres langages
  59. 59. Fantastique !http://www.flickr.com/photos/qbasicer/2435671409 (CC BY-NC-ND 2.0)
  60. 60. Comment mon projet s’est passé avec tout ça ?
  61. 61. Comment mon projet s’est passé avec tout ça ?• Annulé au démarrage – pour des raisons non techniques 
  62. 62. Mais je suis désormais prêt pour le prochain !http://www.flickr.com/photos/wasteofspace/6022022223 (CC BY-SA 2.0)
  63. 63. Pour aller plus loin• Frameworks IHM – Backbone.js / Ember.js – KnockOut (MVVM)• « Coder au front end » @_UT7 – http://ut7.fr/formation/description/javascript.html
  64. 64. Communautés• NantesJS – http://nantesjs.org

×