Javascript proprement

JavaScript « proprement »

(subjectif)

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 / MugOuestBreizhCamp / AgileTourRennes / AgileOpenBreizh

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)

…mon code était sous contrôle

Jusqu’au jour où…

http://www.flickr.com/photos/bluesquarething/4264220448 (CC BY-NC-SA 2.0)

…on me proposa de réaliser une application web

riche et complexe coté client

Client

Serveur

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)

?Que feriez vous ?

J’ai eu un coup de stress …

…puis j’ai décidé d’accepter le challenge !

http://www.flickr.com/photos/wasteofspace/6022022223 (CC BY-SA 2.0)

J’ai découplé le code et le rendu

• Démo

Sélecteurs

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

Et beaucoup plus

• Manipulation du dom• Utilitaires et template• Animations• Lisse les différences entre navigateurs• …

Résumé

• Découpler IHM et Code (jQuery)

Victoire !

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

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)

Heureusement, un sous ensemble de JavaScript plus propre réduit ces « WAT ??? »

• ===• Patterns– Module– Orienté Objet

• Par prototypage• Pseudo-Classique

• JsLint• …

Pattern Module

(function() {var person;person = {};person.talk = function(){

console.log("I am "+this.name);

};person.name = "toto";person.talk();

}).call(this);

Résumé

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

Génial !

http://www.flickr.com/photos/thesussman/2588904213 (CC BY-NC-ND 2.0)

…mais c’est répétitif,un accident est vite arrivé !

http://www.flickr.com/photos/freakingnoob/3438012333/ (CC BY 2.0)

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)

Une refonte importantede la syntaxe de JavaScript

Plugins pour les 10 principaux éditeurs

Gain de popularité lent, puis depuis 2011 incontournable dans les conférences JS

http://www.flickr.com/photos/jurvetson/6472876377 (CC BY 2.0)

Intégré à Rails depuis 3.1

http://www.joeydevilla.com

Déjà un langage majeur

• Très forte inspiration pour la prochaine version de JavaScript

Brendan Eich, créateur de JavaScript

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

Se compile en JavaScript propre

• Vous pouvez même apprendre à coder proprement en JavaScript en lisant le code compilé !

Site

Site

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

Exemple

person = {}person.talk = ->

console.log "I am "+this.name

person.name = "toto"person.talk()

Exemple

(function() {var person;person = {};person.talk = function(){

console.log("I am "+this.name);

};person.name = "toto";person.talk();

}).call(this);

Exemple

(function() {var person;person = {};person.talk = function(){

console.log("I am "+this.name);

};person.name = "toto";person.talk();

}).call(this);

Exemple

var person;person = {};person.talk = function(){

console.log("I am "+this.name);

};person.name = "toto";person.talk();

Exemple

var person;person = {};person.talk = function(){

console.log("I am "+this.name);

};person.name = "toto";person.talk();

Exemple

var personperson = {}person.talk = function()

console.log "I am "+this.name

person.name = "toto"person.talk()

Exemple

var personperson = {}person.talk = function()

console.log "I am "+this.name

person.name = "toto"person.talk()

Exemple

var personperson = {}person.talk = ->

console.log "I am "+this.name

person.name = "toto"person.talk()

Exemple

var personperson = {}person.talk = ->

console.log "I am "+this.name

person.name = "toto"person.talk()

Exemple

person = {}person.talk = ->

console.log "I am "+this.name

person.name = "toto"person.talk()

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

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

…

• Existential Operator• Chained Comparisons• Destructuring Assignment• String Interpolation, Block Strings• Paramètres optionnelles• …

Syntaxe Objet Classique

• Démo• Détails techniques (prototype, etc) dans la

session de Christophe Jollivet• Classe• Membres• Constructor– Initialisation de membres

Résumé

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

J’étais enfin serein !Le code était bien lisible…

http://www.flickr.com/photos/crashmaster/3323478244 (CC BY-NC 2.0)

… mais mon code était bogué

http://www.flickr.com/photos/lenscrack/5166587405 (CC BY-NC-ND 2.0)

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)

Tests Unitaires

• Classique, BDD, spécial asynchrone, …– Jasmine– QUnit– JSUnit– Mocha– Vows– JsTestDriver– SinonJS– …

Jasmine

• Démo

Matchers

toEqual(y) / toBe(y) / toMatch(pattern)toContain(y)

toBeDefined() / toBeUndefined() / toBeNull()toBeTruthy() / toBeFalsy()

toBeLessThan(y) / toBeGreaterThan(y)toThrow(e)

Résumé

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

Super !

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

F5 dans le browser, ça craint pour le TDDet l’intégration continue

• Démo• JsTestDriver• Gem Jasmine-Headless-Webkit• …

TrafficLight

• Démo

Conclusion

• Découpler IHM et Code (jQuery)• Utiliser « the good parts »• Utiliser CoffeeScript• Faire des tests unitaires• Travailler exactement comme dans les autres

langages

Fantastique !

http://www.flickr.com/photos/qbasicer/2435671409 (CC BY-NC-ND 2.0)

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

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

• Annulé au démarrage–pour des raisons non techniques

Mais je suis désormais prêtpour le prochain !

http://www.flickr.com/photos/wasteofspace/6022022223 (CC BY-SA 2.0)

Pour aller plus loin

• Frameworks IHM– Backbone.js / Ember.js– KnockOut (MVVM)

• « Coder au front end » @_UT7– http://ut7.fr/formation/description/javascript.html

Communautés

• NantesJS– http://nantesjs.org