Damn Fine CoffeeScript

download Damn Fine CoffeeScript

of 60

  • date post

    11-Nov-2014
  • Category

    Technology

  • view

    2.057
  • download

    0

Embed Size (px)

description

Introduction to CoffeeScript held at GTUG Sthlm May 2011.

Transcript of Damn Fine CoffeeScript

  • 1. Damn Fine CoffeeScript
  • 2. FocusLanguage
  • 3. Some Kind of Holy Python RubyJavaScrip t
  • 4. Rawvar render = function (width, height, draw, filePath){ var canvas = new Canvas(width, height), ctx = canvas.getContext(2d); draw.call(ctx); var out = fs.createWriteStream(filePath), stream = canvas.createPNGStream(); stream.on(data, function(chunk) { out.write(chunk); }); stream.on(end, function() { console.log("Created: " + filePath); });};
  • 5. Brewedrender = (width, height, draw, filePath) -> canvas = new Canvas(width, height) draw.call canvas.getContext 2d out = fs.createWriteStream filePath stream = canvas.createPNGStream() stream.on data, (chunk) -> out.write chunk stream.on end, -> console.log "Created: #{filePath}"
  • 6. Basically function is () -> local variables indentation omittable parentheses
  • 7. True To JavaScriptThe golden rule of CoffeeScript is: "Its just JavaScript"
  • 8. Less Syntactic Noisestream.on(end, function() { console.log("Created: " +filePath);});
  • 9. stream.on end, -> console.log "Created: #{filePath}"
  • 10. My perspectiveNodeA platform: JS machine + CommonJS stdlib
  • 11. Runtimes
  • 12. Its justCoffee In Coffee
  • 13. BrowserJust JS (generated)
  • 14. Convert & Eval...
  • 15. Node$ npm install coffee-script
  • 16. REPL$ coffee
  • 17. 101# Assignment:number = 42opposite = true
  • 18. Conditionsif happy and knowsIt clapsHands() chaChaCha()else showIt()date = if friday then sue else jilloptions or= defaultsnumber = -42 if opposite
  • 19. Functionssquare = (x) -> x * xcube = (x) -> square(x) * xfill = (container, liquid="coffee") -> "Filling the #{container} with #{liquid}..."noop = ->
  • 20. In JQuery$(span).each -> it = $(this) if it.is(.style-1, .style-20) or not it.attr(class) it.replaceWith(it.html())
  • 21. Data# Arrays:list = [1, 2, 3, 4, 5]# Objects:math = root: Math.sqrt square: square cube: (x) -> x * square x
  • 22. modes = {ready: yes, balance: off}bitlist = [ 1, 0, 1 0, 0, 1 1, 1, 0]
  • 23. How True To JavaScript?
  • 24. Compile$ coffee -c some.coffee# or just print out$ coffee -p some.coffee
  • 25. number = 42opposite = truenumber = -42 if oppositelist = [1, 2, 3, 4, 5]math = root: Math.sqrt square: square cube: (x) -> x * square x
  • 26. var list, math, number, opposite;number = 42;opposite = true;if (opposite) { number = -42;}list = [1, 2, 3, 4, 5];math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); }};
  • 27. Lexical Scopes & Safetyouter = 1changeNumbers = -> inner = -1 outer = 10inner = changeNumbers()
  • 28. var changeNumbers, inner, outer;outer = 1;changeNumbers = function() { var inner; inner = -1; return outer = 10;};inner = changeNumbers();
  • 29. SyntacticThin Coat of SugarAnd Some Boilerplate
  • 30. Sugar++# Splats:race = (winner, runners...) -> print winner, runners# Existence:alert "I knew it!" if elvis?
  • 31. var race;var __slice = Array.prototype.slice;var race = function() { var runners, winner; winner = arguments[0], runners = 2 fs.readFile filename, (err, contents) -> compile filename, contents.toString()
  • 39. Operator NamesCoffeeScript JavaScriptis, isnt ===, !==and, or, not &&, ||, !true, yes, on truefalse, no, off falsein, of in, N/A@, this this:: prototype
  • 40. Different Kinds of Else unless a?a ? b a ?= b a?.b
  • 41. Classesclass Animal constructor: (@name) -> move: (meters) -> alert @name + " moved " + meters + "m."class Snake extends Animal move: -> alert "Slithering..." super 5class Horse extends Animal move: -> alert "Galloping..." super 45sam = new Snake "Sammy the Python"tom = new Horse "Tommy the Palomino"sam.move()tom.move()
  • 42. var Animal, Horse, Snake, sam, tom;var __hasProp = Object.prototype.hasOwnProperty, __extends =function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key))child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child;};
  • 43. Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + " moved " + meters + "m."); }; return Animal;})();
  • 44. Snake = (function() { __extends(Snake, Animal); function Snake() { Snake.__super__.constructor.apply(this, arguments); } Snake.prototype.move = function() { alert("Slithering..."); return Snake.__super__.move.call(this, 5); }; return Snake;})();
  • 45. Binding => ThisAccount = (customer, cart) -> @customer = customer @cart = cart $(.shopping_cart).bind click, (event) => @customer.purchase @cart
  • 46. var Account;var __bind = function(fn, me){ return function(){ returnfn.apply(me, arguments); }; };Account = function(customer, cart) { this.customer = customer; this.cart = cart; return $(.shopping_cart).bind(click, __bind(function(event){ return this.customer.purchase(this.cart); }, this));};
  • 47. And more...
  • 48. Literals: Functions, Objects and Arrays If, Else, Unless, and Conditional Assignment
  • 49. Splats... Array Slicing and Splicing Loops and Comprehensions Destructuring Assignment Everything is an Expression
  • 50. Operators and Aliases Lexical Scoping and Variable Safety Classes, Inheritance, and Super Function Binding
  • 51. Switch and Try/Catch Chained Comparisons String Interpolation, Heredocs, and Block Comments Extended Regular Expressions Embedded JavaScript
  • 52. Future/Now
  • 53. Coding in Coffee sameness? seeing clearly.. transparencies.. choices...
  • 54. Paths Ahead?Harmony...