Coffee Script

Michał Taberski

Coffee Scriptan easy way to do JavaScript

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

CoffeeScript

square = (x) -> x * xcube = (x) -> square(x) * x

Functions

CoffeeScript

fill = (container, liquid = "coffee") -> "Filling the #{container} with #{liquid}..."

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


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


Examples - 2

CoffeeScript

square = (x) -> x * xcube = (x) -> square(x) * x

JavaScript

var cube, square;square = function(x) { return x * x;};cube = function(x) { return square(x) * x;};

Functions

CoffeeScript

fill = (container, liquid = "coffee") -> "Filling the #{container} with #{liquid}..."

JavaScript

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





Examples - 3

CoffeeScript

song = ["do", "re", "mi", "fa", "so"]

singers = {Jagger: "Rock", Elvis: "Roll"}

matrix = [ 1, 0, 1 0, 0, 1 1, 1, 0]

kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9

JSON

JavaScript

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





Examples - 4

CoffeeScript

mood = greatlyImproved if singing

if happy and knowsIt clapsHands() chaChaCha()else showIt()

date = if friday then sue else jill

options or= defaults

Conditional Assigment

JavaScript

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





Examples - 5

CoffeeScript

class Animal constructor: (@name) ->

move: (meters) -> alert @name + " moved " + meters + "m."

Classes (yeahh !!!)


JavaScript

var Animal;Animal = function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + " moved " + meters + "m."); }; return Animal;}();




Examples - 6

CoffeeScript

class Animal constructor: (@name) ->

move: (meters) -> alert @name + " moved " + meters + "m."

class Dog extends Animal sound: 'woof woof'

Classes inheritanceJavaScriptvar 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; child.prototype = new ctor; child.__super__ = parent.prototype; return child;};Animal = function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { 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

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); });};

Binding





Examples - 8

CoffeeScript


$('.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); });};

BindingCoffeeScript


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

JavaScript

var Account;var __bind = function(fn, me){ return function(){ return fn.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));};





Using CoffeeScript with Ruby on Rails

assumptions:

installed Node.js with packed manager npm



assumptions:

installed Node.js with packed manager npm

installation CoffeeScript compiler

Gemfilenpm install coffee-script



add gem Barista

Gemfilegem 'barista', '>= 0.5.0'



add gem Barista


run rake task

Consolerails generate barista:install



add gem Barista


run rake task

Consolerails generate barista:install

create folder

app/mkdir coffeescripts



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 projecthttp://jashkenas.github.com/coffee-script/

Github repo with source codehttps://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 repohttps://github.com/Sutto/barista




https://github.com/jashkenas/coffee-script

https://github.com/jashkenas/coffee-script

http://jashkenas.github.com/coffee-script/documentation/docs/underscore.html

http://jashkenas.github.com/coffee-script/documentation/docs/underscore.html

https://github.com/Sutto/barista

https://github.com/Sutto/barista

Coffee Script

Documents

Transcript of Coffee Script