Coffee Script

Coffee Script
an easy way to do JavaScript

M ich ał Ta be rs k i

piątek, 3 grudnia 2010

Agenda

What is it?

How it can help us?

Overview (a bunch of examples)

Using CoffeeScript with Rails

Demo

Discussion


What is CoffeeScript ?

General idea

!= !=


What is CoffeeScript ?

language designed to be compiled into JavaScript


What is CoffeeScript ? - 2

language designed to be a compiled into JavaScript

code compiles one-to-one into the equivalent JS





syntax take advantages of modern OO languages
like Ruby, or Python






cooperate with already existing JS libraries
(like jQuery, Facebook JS SDK, Google API etc.)






cooperate with already existing JS libraries
(like jQuery, Facebook JS SDK, Google API etc.)

pass through JSLint without warnings =)


How it can help us ?

less lines of code with better readability,

code easy to understand, and maintain

standard code encapsulation and variables
protection (no var anymore)

but...


How it can help us ?

less lines of code with better readability,

code easy to understand, and maintains

standard code encapsulation and variables
protection (no var anymore)

but... even if you are writing code in CoffeeScript
you should know how JavaScript`s concepts work


Examples


Examples
Functions
CoffeeScript CoffeeScript
square = (x) -> x * x fill = (container, liquid = "coffee") ->
cube = (x) -> square(x) * x "Filling the #{container} with #{liquid}..."

source: http://jashkenas.github.com/coffee-script/

Examples - 2
Functions
CoffeeScript CoffeeScript
square = (x) -> x * x fill = (container, liquid = "coffee") ->
cube = (x) -> square(x) * x "Filling the #{container} with #{liquid}..."

JavaScript JavaScript
var cube, square; var fill;
square = function(x) { fill = function(container, liquid) {
return x * x; if (liquid == null) {
}; liquid = "coffee";
cube = function(x) { }
return square(x) * x; return "Filling the " + container + " with " + liquid + "...";
}; };


Examples - 3
JSON
CoffeeScript JavaScript
song = ["do", "re", "mi", "fa", "so"] var kids, matrix, singers, song;
song = ["do", "re", "mi", "fa", "so"];
singers = {Jagger: "Rock", Elvis: "Roll"} singers = {
Jagger: "Rock",
matrix = [ Elvis: "Roll"
1, 0, 1 };
0, 0, 1 matrix = [1, 0, 1, 0, 0, 1, 1, 1, 0];
1, 1, 0 kids = {
] brother: {
name: "Max",
kids = age: 11
brother: },
name: "Max" sister: {
age: 11 name: "Ida",
sister: age: 9
name: "Ida" }
age: 9 };


Examples - 4
Conditional Assigment

JavaScript
CoffeeScript
var date, mood;
mood = greatlyImproved if singing if (singing) {
mood = greatlyImproved;
if happy and knowsIt }
clapsHands() if (happy && knowsIt) {
chaChaCha() clapsHands();
else chaChaCha();
showIt() } else {
showIt();
date = if friday then sue else jill }
date = friday ? sue : jill;
options or= defaults options || (options = defaults);


Examples - 5
Classes (yeahh !!!)

CoffeeScript JavaScript
class Animal var Animal;
constructor: (@name) -> Animal = function() {
function Animal(name) {
move: (meters) -> this.name = name;
alert @name + " moved " + meters + "m." }
Animal.prototype.move = function(meters) {
return alert(this.name + " moved " + meters + "m.");
};
return Animal;
}();


Examples - 6
JavaScript
Classes inheritance var Animal, Dog;
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;
CoffeeScript child.prototype = new ctor;
child.__super__ = parent.prototype;
class Animal return child;
constructor: (@name) -> };
Animal = function() {
move: (meters) -> function Animal(name) {
alert @name + " moved " + meters + "m." this.name = name;
}
class Dog extends Animal Animal.prototype.move = function(meters) {
sound: 'woof woof' return alert(this.name + " moved " + meters + "m.");
};
return Animal;
}();
Dog = function() {
function Dog() {
Dog.__super__.constructor.apply(this, arguments);
}
__extends(Dog, Animal);
Dog.prototype.sound = 'woof woof';
return Dog;
}();


Examples - 7
Binding
CoffeeScript
Account = (customer, cart) ->
@customer = customer
@cart = cart

$('.shopping_cart').bind 'click', (event) ->
@customer.purchase @cart

JavaScript
var Account;
Account = function(customer, cart) {
this.customer = customer;
this.cart = cart;
return $('.shopping_cart').bind('click',
function(event) {
return this.customer.purchase(this.cart);
});
};


Examples - 8
Binding CoffeeScript
CoffeeScript @customer = customer
@cart = cart
@customer = customer $('.shopping_cart').bind 'click', (event) =>
@cart = cart @customer.purchase @cart

$('.shopping_cart').bind 'click', (event) ->
@customer.purchase @cart

JavaScript
JavaScript var Account;
var __bind = function(fn, me){ return function(){ return fn.apply
var Account;
(me, arguments); }; };
this.cart = cart;
this.cart = cart;
return $('.shopping_cart').bind('click',
return $('.shopping_cart').bind('click', __bind(function(event)
function(event) {
{
});
}, this));
};
};


Using CoffeeScript
with Ruby on Rails
assumptions:

installed Node.js with packed manager npm


Using CoffeeScript
with Ruby on Rails
assumptions:

installed Node.js with packed manager npm

installation CoffeeScript compiler

Gemfile
npm install coffee-script


Using CoffeeScript
with Ruby on Rails
add gem Barista
Gemfile
gem 'barista', '>= 0.5.0'


Using CoffeeScript
with Ruby on Rails
add gem Barista
Gemfile

run rake task
Console
rails generate barista:install


Using CoffeeScript
with Ruby on Rails
add gem Barista
Gemfile

run rake task
Console
rails generate barista:install

create folder
app/
mkdir coffeescripts


Using CoffeeScript
with Ruby on Rails
store scripts in /app/coffeescripts/

use *.coffee extension

run dev server (or trigger any request)

JS files are generated dynamically

you can preview those files in default JS folder
/public/javascripts/


It`s nice, isn`t it ?

DEMO
&
discussion time


Resources:

Official website of the project
http://jashkenas.github.com/coffee-script/

Github repo with source code
https://github.com/jashkenas/coffee-script

underscore.js implemented in CoffeeScript (nice example of good CS code)
http://jashkenas.github.com/coffee-script/documentation/docs/underscore.html

Barista gem website, and repo
https://github.com/Sutto/barista


Coffee Script

Recommended

More Related Content

What's hot (20)

Similar to Coffee Script (20)

Coffee Script