Javascript proprement
-
Upload
guillaume-collic -
Category
Technology
-
view
639 -
download
2
description
Transcript of Javascript proprement
![Page 1: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/1.jpg)
JavaScript « proprement »
(subjectif)
![Page 2: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/2.jpg)
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
![Page 3: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/3.jpg)
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)
![Page 4: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/4.jpg)
…mon code était sous contrôle
![Page 5: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/5.jpg)
Jusqu’au jour où…
http://www.flickr.com/photos/bluesquarething/4264220448 (CC BY-NC-SA 2.0)
![Page 6: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/6.jpg)
…on me proposa de réaliser une application web
riche et complexe coté client
Client
Serveur
![Page 7: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/7.jpg)
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)
![Page 8: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/8.jpg)
?Que feriez vous ?
![Page 9: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/9.jpg)
J’ai eu un coup de stress …
![Page 10: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/10.jpg)
…puis j’ai décidé d’accepter le challenge !
http://www.flickr.com/photos/wasteofspace/6022022223 (CC BY-SA 2.0)
![Page 11: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/11.jpg)
J’ai découplé le code et le rendu
• Démo
![Page 12: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/12.jpg)
Sélecteurs
• #id• .classe• :visible / :hidden• :selected• [attribut=valeur]• Parent > enfant• …
![Page 13: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/13.jpg)
Et beaucoup plus
• Manipulation du dom• Utilitaires et template• Animations• Lisse les différences entre navigateurs• …
![Page 14: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/14.jpg)
Résumé
• Découpler IHM et Code (jQuery)
![Page 15: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/15.jpg)
Victoire !
http://www.flickr.com/photos/clintjcl/391565090 (CC BY-NC-SA 2.0)
![Page 16: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/16.jpg)
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)
![Page 17: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/17.jpg)
Heureusement, un sous ensemble de JavaScript plus propre réduit ces « WAT ??? »
• ===• Patterns– Module– Orienté Objet
• Par prototypage• Pseudo-Classique
• JsLint• …
![Page 18: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/18.jpg)
Pattern Module
(function() {var person;person = {};person.talk = function(){
console.log("I am "+this.name);
};person.name = "toto";person.talk();
}).call(this);
![Page 19: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/19.jpg)
Résumé
• Découpler IHM et Code (jQuery)• Utiliser « the good parts »
![Page 20: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/20.jpg)
Génial !
http://www.flickr.com/photos/thesussman/2588904213 (CC BY-NC-ND 2.0)
![Page 21: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/21.jpg)
…mais c’est répétitif,un accident est vite arrivé !
http://www.flickr.com/photos/freakingnoob/3438012333/ (CC BY 2.0)
![Page 22: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/22.jpg)
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)
![Page 23: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/23.jpg)
Une refonte importantede la syntaxe de JavaScript
![Page 24: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/24.jpg)
Plugins pour les 10 principaux éditeurs
![Page 25: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/25.jpg)
Gain de popularité lent, puis depuis 2011 incontournable dans les conférences JS
http://www.flickr.com/photos/jurvetson/6472876377 (CC BY 2.0)
![Page 26: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/26.jpg)
Intégré à Rails depuis 3.1
http://www.joeydevilla.com
![Page 27: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/27.jpg)
Déjà un langage majeur
• Très forte inspiration pour la prochaine version de JavaScript
Brendan Eich, créateur de JavaScript
![Page 28: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/28.jpg)
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
![Page 29: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/29.jpg)
Se compile en JavaScript propre
• Vous pouvez même apprendre à coder proprement en JavaScript en lisant le code compilé !
![Page 30: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/30.jpg)
Site
![Page 31: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/31.jpg)
Site
![Page 32: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/32.jpg)
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
![Page 33: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/33.jpg)
Exemple
person = {}person.talk = ->
console.log "I am "+this.name
person.name = "toto"person.talk()
![Page 34: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/34.jpg)
Exemple
(function() {var person;person = {};person.talk = function(){
console.log("I am "+this.name);
};person.name = "toto";person.talk();
}).call(this);
![Page 35: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/35.jpg)
Exemple
(function() {var person;person = {};person.talk = function(){
console.log("I am "+this.name);
};person.name = "toto";person.talk();
}).call(this);
![Page 36: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/36.jpg)
Exemple
var person;person = {};person.talk = function(){
console.log("I am "+this.name);
};person.name = "toto";person.talk();
![Page 37: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/37.jpg)
Exemple
var person;person = {};person.talk = function(){
console.log("I am "+this.name);
};person.name = "toto";person.talk();
![Page 38: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/38.jpg)
Exemple
var personperson = {}person.talk = function()
console.log "I am "+this.name
person.name = "toto"person.talk()
![Page 39: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/39.jpg)
Exemple
var personperson = {}person.talk = function()
console.log "I am "+this.name
person.name = "toto"person.talk()
![Page 40: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/40.jpg)
Exemple
var personperson = {}person.talk = ->
console.log "I am "+this.name
person.name = "toto"person.talk()
![Page 41: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/41.jpg)
Exemple
var personperson = {}person.talk = ->
console.log "I am "+this.name
person.name = "toto"person.talk()
![Page 42: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/42.jpg)
Exemple
person = {}person.talk = ->
console.log "I am "+this.name
person.name = "toto"person.talk()
![Page 43: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/43.jpg)
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
![Page 44: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/44.jpg)
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
![Page 45: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/45.jpg)
…
• Existential Operator• Chained Comparisons• Destructuring Assignment• String Interpolation, Block Strings• Paramètres optionnelles• …
![Page 46: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/46.jpg)
Syntaxe Objet Classique
• Démo• Détails techniques (prototype, etc) dans la
session de Christophe Jollivet• Classe• Membres• Constructor– Initialisation de membres
![Page 47: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/47.jpg)
Résumé
• Découpler IHM et Code (jQuery)• Utiliser « the good parts »• Utiliser CoffeeScript
![Page 48: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/48.jpg)
J’étais enfin serein !Le code était bien lisible…
http://www.flickr.com/photos/crashmaster/3323478244 (CC BY-NC 2.0)
![Page 49: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/49.jpg)
… mais mon code était bogué
http://www.flickr.com/photos/lenscrack/5166587405 (CC BY-NC-ND 2.0)
![Page 50: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/50.jpg)
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)
![Page 51: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/51.jpg)
Tests Unitaires
• Classique, BDD, spécial asynchrone, …– Jasmine– QUnit– JSUnit– Mocha– Vows– JsTestDriver– SinonJS– …
![Page 52: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/52.jpg)
Jasmine
• Démo
![Page 53: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/53.jpg)
Matchers
toEqual(y) / toBe(y) / toMatch(pattern)toContain(y)
toBeDefined() / toBeUndefined() / toBeNull()toBeTruthy() / toBeFalsy()
toBeLessThan(y) / toBeGreaterThan(y)toThrow(e)
![Page 54: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/54.jpg)
Résumé
• Découpler IHM et Code (jQuery)• Utiliser « the good parts »• Utiliser CoffeeScript• Faire des tests unitaires
![Page 55: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/55.jpg)
Super !
http://www.flickr.com/photos/40348123@N02/3996348907 (CC BY-NC 2.0)
![Page 56: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/56.jpg)
F5 dans le browser, ça craint pour le TDDet l’intégration continue
• Démo• JsTestDriver• Gem Jasmine-Headless-Webkit• …
![Page 57: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/57.jpg)
TrafficLight
• Démo
![Page 58: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/58.jpg)
Conclusion
• Découpler IHM et Code (jQuery)• Utiliser « the good parts »• Utiliser CoffeeScript• Faire des tests unitaires• Travailler exactement comme dans les autres
langages
![Page 59: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/59.jpg)
Fantastique !
http://www.flickr.com/photos/qbasicer/2435671409 (CC BY-NC-ND 2.0)
![Page 60: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/60.jpg)
Comment mon projet s’est passéavec tout ça ?
![Page 61: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/61.jpg)
Comment mon projet s’est passéavec tout ça ?
• Annulé au démarrage–pour des raisons non techniques
![Page 62: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/62.jpg)
Mais je suis désormais prêtpour le prochain !
http://www.flickr.com/photos/wasteofspace/6022022223 (CC BY-SA 2.0)
![Page 63: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/63.jpg)
Pour aller plus loin
• Frameworks IHM– Backbone.js / Ember.js– KnockOut (MVVM)
• « Coder au front end » @_UT7– http://ut7.fr/formation/description/javascript.html
![Page 64: Javascript proprement](https://reader036.fdocuments.us/reader036/viewer/2022062512/55397fb2550346bf308b49bf/html5/thumbnails/64.jpg)
Communautés
• NantesJS– http://nantesjs.org