Click here to load reader
Upload
bartosz-skorupski
View
433
Download
0
Tags:
Embed Size (px)
Citation preview
Bartosz Skorupski, Tomasz Szatkowski
…
Who likes JavaScript?Rise your hand, please!
● Runs in browser environment,● Has AWESOME features
JAVASCRIPT
UGLY!
And preserve what’s best of it
How to make it better?
ECMAScript Harmony
Let’s standardize it!
and get new features right now
Use a compiler!
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
Installing CSnpm install -g coffee-script
coffee -v
coffee -w -o javascripts/ -c coffeescripts/coffee -j javascripts/app.js -c coffeescripts/*.coffee
Command Line Usage
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
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);
better switch, function binding, for in, for of, handy literals (@, ->), splats, classes, default arguments, destructuring assignment, ranges
It has much to offer
year = 2014speed = 50
VARIABLES
first_name = "Jan"
full_name = first_name + " Kowalski"full_name = "#{first_name} Kowalski"
STRINGS
square = (x = 2) -> x * x # square(x)
FUNCTIONS
Immediate functions
for i in [0...3] do (i) -> setTimeout ( -> console.log(i) ), 1000
012
Function binding
... # @prop <=> this.prop @prop = "Caller's scope" func = => console.log(@prop) func()...
Caller's scope
names = ["Marty", "George", "Dave"]
ARRAYS
classicalNotation = { age: 11, name: 'Alice'};
OBJECTSsimplifiedNotation = age: 11 name: 'Alice'
days = [1..7]tuesday_to_friday = days[1..4] # 2, 3, 4, 5range = [1...4] # 1, 2, 3
RANGES
merge = (head, tail...) -> [head].concat(tail)
SPLAT
Classes, Inheritance, Super
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()
Use cases
CoffeeScript with Backbone
define ["Backbone", "someModule"], (Backbone, someModule) ->
class SomeClass extends Backbone.View initialize: -> @prop = 9 render: -> someModule.doSomething()
Debugging
CoffeeScript generates source mapping. Currently works under Google Chrome and Mozilla Firefox.
Thank you
Questions