Support de la session "Javascript proprement" du BreizhCamp

1. JavaScript « proprement »
(subjectif)

2. Guillaume Collic
Développeur et Formateur Agiliste Passionné
Indépendant
gcollic@gmail.com / @gcollic / GuillaumeCollic.com
Je traine du coté de :
AgileBreizh-AgileLeanOuest / CodeOuest
Agile Rennes / MugOuest
BreizhCamp / AgileTourRennes / AgileOpenBreizh

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. …mon code était sous contrôle

5. Jusqu’au jour où…
http://www.flickr.com/photos/bluesquarething/4264220448 (CC BY-NC-SA 2.0)

6. …on me proposa de réaliser une
application web
riche et complexe coté client
Client
Serveur

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. Que feriez vous ?

9. J’ai eu un coup de stress …

10. …puis j’ai décidé d’accepter le challenge !
http://www.flickr.com/photos/wasteofspace/6022022223 (CC BY-SA 2.0)

11. J’ai découplé le code et le rendu
• Démo

12. Sélecteurs
• #id
• .classe
• :visible / :hidden
• :selected
• [attribut=valeur]
• Parent > enfant
• …

13. Et beaucoup plus
• Manipulation du dom
• Utilitaires et template
• Animations
• Lisse les différences entre navigateurs
• …

14. Résumé
• Découpler IHM et Code (jQuery)

15. Victoire !
http://www.flickr.com/photos/clintjcl/391565090 (CC BY-NC-SA 2.0)

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. Heureusement, un sous ensemble de JavaScript
plus propre réduit ces « WAT ??? »
• ===
• Patterns
– Module
– Orienté Objet
• Par prototypage
• Pseudo-Classique
• JsLint
• …

18. Pattern Module
(function() {
var person;
person = {};
person.talk = function(){
console.log("I am "+this.name);
};
person.name = "toto";
person.talk();
}).call(this);

19. Résumé
• Découpler IHM et Code (jQuery)
• Utiliser « the good parts »

20. Génial !
http://www.flickr.com/photos/thesussman/2588904213 (CC BY-NC-ND 2.0)

21. …mais c’est répétitif,
un accident est vite arrivé !
http://www.flickr.com/photos/freakingnoob/3438012333/ (CC BY 2.0)

22. Pourquoi pas un langage basé sur les good
parts pour cacher les mauvais côtés de JS ?
http://www.flickr.com/photos/desiitaly/2193724466 (CC BY 2.0)

23. Une refonte importante
de la syntaxe de JavaScript

24. Plugins pour les 10 principaux éditeurs

25. Gain de popularité lent, puis depuis 2011
incontournable dans les conférences JS
http://www.flickr.com/photos/jurvetson/6472876377 (CC BY 2.0)

26. Intégré à Rails depuis 3.1
http://www.joeydevilla.com

27. Déjà un langage majeur
• Très forte inspiration pour la prochaine
version de JavaScript
Brendan Eich, créateur de JavaScript

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. Se compile en JavaScript propre
• Vous pouvez même apprendre à coder
proprement en JavaScript en lisant le code
compilé !

30. Site

31. Site

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. Exemple
person = {}
person.talk = ->
console.log "I am "+this.name
person.name = "toto"
person.talk()

34. Exemple
(function() {
var person;
person = {};
person.talk = function(){
console.log("I am "+this.name);
};
person.name = "toto";
person.talk();
}).call(this);

35. Exemple
(function() {
var person;
person = {};
person.talk = function(){
console.log("I am "+this.name);
};
person.name = "toto";
person.talk();
}).call(this);

36. Exemple
var person;
person = {};
person.talk = function(){
console.log("I am "+this.name);
};
person.name = "toto";
person.talk();

37. Exemple
var person;
person = {};
person.talk = function(){
console.log("I am "+this.name);
};
person.name = "toto";
person.talk();

38. Exemple
var person
person = {}
person.talk = function()
console.log "I am "+this.name
person.name = "toto"
person.talk()

39. Exemple
var person
person = {}
person.talk = function()
console.log "I am "+this.name
person.name = "toto"
person.talk()

40. Exemple
var person
person = {}
person.talk = ->
console.log "I am "+this.name
person.name = "toto"
person.talk()

41. Exemple
var person
person = {}
person.talk = ->
console.log "I am "+this.name
person.name = "toto"
person.talk()

42. Exemple
person = {}
person.talk = ->
console.log "I am "+this.name
person.name = "toto"
person.talk()

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. 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. …
• Existential Operator
• Chained Comparisons
• Destructuring Assignment
• String Interpolation, Block Strings
• Paramètres optionnelles
• …

46. Syntaxe Objet Classique
• Démo
• Détails techniques (prototype, etc) dans la
session de Christophe Jollivet
• Classe
• Membres
• Constructor
– Initialisation de membres

47. Résumé
• Découpler IHM et Code (jQuery)
• Utiliser « the good parts »
• Utiliser CoffeeScript

48. J’étais enfin serein !
Le code était bien lisible…
http://www.flickr.com/photos/crashmaster/3323478244 (CC BY-NC 2.0)

49. … mais mon code était bogué
http://www.flickr.com/photos/lenscrack/5166587405 (CC BY-NC-ND 2.0)

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. Tests Unitaires
• Classique, BDD, spécial asynchrone, …
– Jasmine
– QUnit
– JSUnit
– Mocha
– Vows
– JsTestDriver
– SinonJS
–…

52. Jasmine
• Démo

53. Matchers
toEqual(y) / toBe(y) / toMatch(pattern)
toContain(y)
toBeDefined() / toBeUndefined() / toBeNull()
toBeTruthy() / toBeFalsy()
toBeLessThan(y) / toBeGreaterThan(y)
toThrow(e)

54. Résumé
• Découpler IHM et Code (jQuery)
• Utiliser « the good parts »
• Utiliser CoffeeScript
• Faire des tests unitaires

55. Super !
http://www.flickr.com/photos/40348123@N02/3996348907 (CC BY-NC 2.0)

56. F5 dans le browser, ça craint pour le TDD
et l’intégration continue
• Démo
• JsTestDriver
• Gem Jasmine-Headless-Webkit
• …

57. TrafficLight
• Démo

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. Fantastique !
http://www.flickr.com/photos/qbasicer/2435671409 (CC BY-NC-ND 2.0)

60. Comment mon projet s’est passé
avec tout ça ?

61. Comment mon projet s’est passé
avec tout ça ?
• Annulé au démarrage
– pour des raisons non techniques 

62. Mais je suis désormais prêt
pour le prochain !
http://www.flickr.com/photos/wasteofspace/6022022223 (CC BY-SA 2.0)

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. Communautés
• NantesJS
– http://nantesjs.org