Embed Size (px)
DESCRIPTION
Support de la session "Javascript proprement" du BreizhCamp
Citation preview
JavaScript « proprement »
(subjectif)
Guillaume Collic
Développeur et Formateur Agiliste PassionnéIndépendant
[email protected] / @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
