introduction to coffeescript
TRANSCRIPT
![Page 1: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/1.jpg)
Bartosz Skorupski, Tomasz Szatkowski
…
![Page 2: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/2.jpg)
Who likes JavaScript?Rise your hand, please!
![Page 3: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/3.jpg)
● Runs in browser environment,● Has AWESOME features
JAVASCRIPT
![Page 4: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/4.jpg)
UGLY!
![Page 5: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/5.jpg)
And preserve what’s best of it
How to make it better?
![Page 6: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/6.jpg)
ECMAScript Harmony
Let’s standardize it!
![Page 7: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/7.jpg)
and get new features right now
Use a compiler!
![Page 8: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/8.jpg)
CoffeeScript!● Expose the good parts of JS in a simple way● Compiles one-to-one into the equivalent JS, no interpretation at runtime● You can use any existing JS library seamlessly from CS (and vice-versa)● Output is readable and pretty-printed, will work in every JS runtime and
tends to run as fast or faster than the equivalent handwritten JS
![Page 9: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/9.jpg)
Installing CSnpm install -g coffee-script
coffee -v
![Page 10: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/10.jpg)
coffee -w -o javascripts/ -c coffeescripts/coffee -j javascripts/app.js -c coffeescripts/*.coffee
Command Line Usage
![Page 11: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/11.jpg)
date = if friday then weekend else weekday
# eat luncheat = (what) -> "om nom noming #{what}"eat food for food in ['toast', 'cheese', 'wine']
class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m."
new Animal('dog').move 3
![Page 12: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/12.jpg)
var Animal, date, eat, food, _i, _len, _ref;
date = friday ? weekend : weekday;
eat = function(what) { return "om nom noming " + what;};
_ref = ['toast', 'cheese', 'wine'];for (_i = 0, _len = _ref.length; _i < _len; _i++) { food = _ref[_i]; eat(food);}
Animal = (function() { function Animal(name) { this.name = name; }
Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); };
return Animal;
})();
new Animal('dog').move(3);
![Page 13: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/13.jpg)
better switch, function binding, for in, for of, handy literals (@, ->), splats, classes, default arguments, destructuring assignment, ranges
It has much to offer
![Page 14: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/14.jpg)
year = 2014speed = 50
VARIABLES
![Page 15: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/15.jpg)
first_name = "Jan"
full_name = first_name + " Kowalski"full_name = "#{first_name} Kowalski"
STRINGS
![Page 16: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/16.jpg)
square = (x = 2) -> x * x # square(x)
FUNCTIONS
![Page 17: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/17.jpg)
Immediate functions
for i in [0...3] do (i) -> setTimeout ( -> console.log(i) ), 1000
012
![Page 18: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/18.jpg)
Function binding
... # @prop <=> this.prop @prop = "Caller's scope" func = => console.log(@prop) func()...
Caller's scope
![Page 19: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/19.jpg)
names = ["Marty", "George", "Dave"]
ARRAYS
![Page 20: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/20.jpg)
classicalNotation = { age: 11, name: 'Alice'};
OBJECTSsimplifiedNotation = age: 11 name: 'Alice'
![Page 21: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/21.jpg)
days = [1..7]tuesday_to_friday = days[1..4] # 2, 3, 4, 5range = [1...4] # 1, 2, 3
RANGES
![Page 22: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/22.jpg)
merge = (head, tail...) -> [head].concat(tail)
SPLAT
![Page 23: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/23.jpg)
Classes, Inheritance, Super
![Page 24: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/24.jpg)
class Animal constructor: (@name) ->
move: (meters) -> alert @name + " moved #{meters}m."
class Snake extends Animal move: -> alert "Slithering..." super 5
sam = new Snake "Sammy the Python"
sam.move()
![Page 25: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/25.jpg)
Use cases
![Page 26: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/26.jpg)
CoffeeScript with Backbone
define ["Backbone", "someModule"], (Backbone, someModule) ->
class SomeClass extends Backbone.View initialize: -> @prop = 9 render: -> someModule.doSomething()
![Page 27: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/27.jpg)
Debugging
CoffeeScript generates source mapping. Currently works under Google Chrome and Mozilla Firefox.
![Page 28: Introduction to CoffeeScript](https://reader038.vdocument.in/reader038/viewer/2022100517/554f4652b4c905423f8b494c/html5/thumbnails/28.jpg)
Thank you
Questions