coffeescript.pdf

Transcript

1. CoffeeScript Sébastien Gruhier - xilinus.com 25/01/2012 Wednesday, January 25, 12
2. About • Créateur de xilinus.com • Développement d’application Web • Ruby On Rails / Javascript • Formation • Editeur de maptimize (Clustering Server Side pour google map en mode SaaS) • twitter: sgruhier Wednesday, January 25, 12
3. CoffeeScript • Créé par Jeremy Ashkenas fin 2009 • C’est un compilateur • "It's just JavaScript" • “syntactic sugar” inspiré par Ruby, Python et Haskell • Syntaxe simplifiée • Javascript Good Parts • Ajout de fonctionnalités indispensables Wednesday, January 25, 12
4. Compilateurs • GWT (code généré illisible) • Objective-J (Lié a capuccino) • ... • “it’s just Javascript” Code généré illisible Wednesday, January 25, 12
5. It’s just javascript $(function() { $(body).html("Hello World"); }) Wednesday, January 25, 12
6. It’s just javascript $ -> $(body).html "Hello World" Wednesday, January 25, 12
7. It’s just javascript describe("Condition", function() { beforeEach(function() { this.condition = new Condition; this.addMatchers({ toHave: function(expected) { return this.actual.indexOf(expected) > -1; } }); }); describe("searchable", function() { it("should be searchable by default", function() { expect(this.condition.solrParams()).toMatch("searchable:true"); }); }); }); Wednesday, January 25, 12
8. It’s just javascript describe "Condition", -> beforeEach -> @condition = new Condition @addMatchers( toHave: (expected) -> @actual.indexOf(expected) > -1 ) describe "searchable", -> it "should be searchable by default", -> expect(@condition.solrParams()).toMatch "searchable:true" Wednesday, January 25, 12
9. Exemple var square = function(num) { return num * num; } var list = [1, 2, 3, 4, 5]; var squares = []; for (var i = 0; i < list.length; i++) { squares.push(square(list[i])); } square = (num) -> num * num list = [1..5] squares = (square n for n in list) Wednesday, January 25, 12
10. Exemple var list, n, square, squares; square = function(num) { return num * num; }; list = [1, 2, 3, 4, 5]; squares = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { n = list[_i]; _results.push(square(n)); } return _results; })(); Wednesday, January 25, 12
11. The Good Parts Wednesday, January 25, 12
12. The Good Parts • Tout est privé par défaut • Ajout d’une closure autour de chaque fichier • Il faut exporter ce que l’on veut rendre public • Plus de “leaking global variables” (function() { // .... })(this) Wednesday, January 25, 12
13. The Good Parts • Adieu du mot-clé var • Comparaison strict === • Fonctionne sur TOUS les navigateurs (IE6, mobile, ...) • JSLint Compliant true == “true” TRUE 0 == false TRUE 0 == “0” TRUE false == “” TRUE Wednesday, January 25, 12
14. Syntaxe • Ponctuation redondate supprimée ( ) ; , • function devient -> (ou =>) • this devient @ • {} défini par indentation • Tout code est une expression et retourne une valeur Wednesday, January 25, 12
15. Indentation describe("Condition", function() { beforeEach(function() { this.condition = new Condition; this.addMatchers({ toHave: function(expected) { return this.actual.indexOf(expected) > -1; } }); }); describe("searchable", function() { it("should be searchable by default", function() { expect(this.condition.solrParams()).toMatch("searchable:true"); }); }); }); Wednesday, January 25, 12
16. Indentation describe "Condition", -> beforeEach -> @condition = new Condition @addMatchers toHave: (expected) -> @actual.indexOf(expected) > -1 describe "searchable", -> it "should be searchable by default", -> expect(@condition.solrParams()).toMatch "searchable:true" Wednesday, January 25, 12
17. Tableau / Hash song = ["do", "re", "mi", "fa", "so"] singers = {Jagger: "Rock", Elvis: "Roll"} bitlist = [ 1, 0, 1 0, 0, 1 1, 1, 0 ] kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 Wednesday, January 25, 12
18. Fonctions • Argument par défaut • splat... • return implicit concat= (first, second = 0, others...) -> ... square = (x) -> x * x cube = (x) -> square(x) * x Wednesday, January 25, 12
19. Scope implicit outer = 1 changeNumbers = -> inner = -1 outer = 10 inner = changeNumbers() var changeNumbers, inner, outer; outer = 1; changeNumbers = function() { var inner; inner = -1; return outer = 10; }; inner = changeNumbers(); Wednesday, January 25, 12
20. Conditions css = if even then "even" else "odd" if car is "blue" then "..." else "..." if car isnt "blue" then "..." else "..." if a and b then "..." return unless a or b a or= 12 Wednesday, January 25, 12
21. Conditions ? Wednesday, January 25, 12
22. Conditions a += b if b? panel?.show() panel?.closeButton?.show() a ?= 12 var _ref; if (typeof panel !== "undefined" && panel !== null) { if ((_ref = panel.closeButton) != null) _ref.show(); } Wednesday, January 25, 12
23. Compréhensions names= [] for person in people names.push(capitalize person.name) names = (capitalize(person.name) for person in people) for person in people when person.age > 18 names.push(capitalize person.name) Wednesday, January 25, 12
24. Classes class User constructor: (@first_name, @last_name, @age) -> name: -> "#{@first_name} #{@last_name}" class Admin extends User name: -> super + " [ADMIN]" Wednesday, January 25, 12
25. Bound functions class UserView constructor: (@user, @element) -> fetch: -> $.get @user.url, (data) => $(@element).html data UserView.prototype.fetch = function() { var _this = this; return $.get(this.user.url, function(data) { return $(_this.element).html(data); }); }; Wednesday, January 25, 12
26. Et bien plus • String interpolation • Destructuring assigmen [open, contents..., close] = tag.split("") • switch / when / else • try / catch / finally • Range 1..2 • Comparaisons chainées 200 > index > 100 Wednesday, January 25, 12
27. Installation • $ npm install -g coffee-script • $ coffee -c path/to/script.coffee • $ coffee --watch path/to/script.coffee • $ coffee --print *.coffee > all.js Wednesday, January 25, 12
28. Debug • “Comment qu’on fait ?” Wednesday, January 25, 12
29. Liens • http://coffeescript.org • http://autotelicum.github.com/Smooth-CoffeeScript/ • http://pragprog.com/book/tbcoffee/coffeescript Wednesday, January 25, 12
30. Thanks to • Jeremy Ashkenas • Sam Stephenson “CoffeeScript is beautiful and I never want to write plain Javascript again” Wednesday, January 25, 12