1. Coffee Script
an easy way to do JavaScript
M ich ał Ta be rs k i
piątek, 3 grudnia 2010

2. Agenda
What is it?
How it can help us?
Overview (a bunch of examples)
Using CoffeeScript with Rails
Demo
Discussion
piątek, 3 grudnia 2010

3. What is CoffeeScript ?
General idea
!= !=
piątek, 3 grudnia 2010

4. What is CoffeeScript ?
language designed to be compiled into JavaScript
piątek, 3 grudnia 2010

5. What is CoffeeScript ? - 2
language designed to be a compiled into JavaScript
code compiles one-to-one into the equivalent JS
piątek, 3 grudnia 2010

6. What is CoffeeScript ? - 3
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
piątek, 3 grudnia 2010

7. What is CoffeeScript ? - 4
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.)
piątek, 3 grudnia 2010

8. What is CoffeeScript ? - 5
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.)
pass through JSLint without warnings =)
piątek, 3 grudnia 2010

9. 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...
piątek, 3 grudnia 2010

10. 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
piątek, 3 grudnia 2010

11. Examples
piątek, 3 grudnia 2010

12. 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/
piątek, 3 grudnia 2010

13. 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 + "...";
}; };
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010

14. 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 };
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010

15. 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);
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010

16. 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;
}();
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010

17. 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;
}();
piątek, 3 grudnia 2010

18. 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);
});
};
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010

19. Examples - 8
Binding CoffeeScript
Account = (customer, cart) ->
CoffeeScript @customer = customer
@cart = cart
Account = (customer, 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); }; };
Account = function(customer, cart) {
Account = function(customer, cart) {
this.customer = customer;
this.customer = customer;
this.cart = cart;
this.cart = cart;
return $('.shopping_cart').bind('click',
return $('.shopping_cart').bind('click', __bind(function(event)
function(event) {
{
return this.customer.purchase(this.cart);
return this.customer.purchase(this.cart);
});
}, this));
};
};
source: http://jashkenas.github.com/coffee-script/
piątek, 3 grudnia 2010

20. Using CoffeeScript
with Ruby on Rails
assumptions:
installed Node.js with packed manager npm
piątek, 3 grudnia 2010

21. Using CoffeeScript
with Ruby on Rails
assumptions:
installed Node.js with packed manager npm
installation CoffeeScript compiler
Gemfile
npm install coffee-script
piątek, 3 grudnia 2010

22. Using CoffeeScript
with Ruby on Rails
add gem Barista
Gemfile
gem 'barista', '>= 0.5.0'
piątek, 3 grudnia 2010

23. Using CoffeeScript
with Ruby on Rails
add gem Barista
Gemfile
gem 'barista', '>= 0.5.0'
run rake task
Console
rails generate barista:install
piątek, 3 grudnia 2010

24. Using CoffeeScript
with Ruby on Rails
add gem Barista
Gemfile
gem 'barista', '>= 0.5.0'
run rake task
Console
rails generate barista:install
create folder
app/
mkdir coffeescripts
piątek, 3 grudnia 2010

25. 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/
piątek, 3 grudnia 2010

26. It`s nice, isn`t it ?
DEMO
&
discussion time
piątek, 3 grudnia 2010

27. 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
piątek, 3 grudnia 2010