Presenter Notes

CoffeeScript

Shreyank Gupta

sgupta@redhat.com

@shreyankg

Presenter Notes

CoffeeScript is...

a little language that compiles into JavaScript

Presenter Notes

Installation

$ npm install coffee-script

$ gem install coffee-script

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

Presenter Notes

Tutorial

Presenter Notes

Hello World

CoffeeScript

1 alert "Hello World"

JavaScript

1 alert("Hello World");

Presenter Notes

Assignments

CoffeeScript

1 count = 1
2 finished = false
3 list = [1..5]

JavaScript

1 var count, finished, list;
2 count = 1;
3 finished = false;
4 list = [1, 2, 3, 4, 5];

Presenter Notes

Comments

CoffeeScript

1 # This is a comment
2 
3 ###
4 This is a 
5 multiline comment
6 ###

JavaScript

1 // This is a comment
2 
3 /*
4 This is a 
5 multiline comment
6 */

Presenter Notes

Functions

CoffeeScript

1 hello = (name) -> alert "Hello #{name}!"

JavaScript

1 var hello;
2 
3 hello = function(name) {
4   return alert("Hello " + name + "!");
5 };

Presenter Notes

Objects

CoffeeScript

1 hello =
2   name: "Shreyank"
3   age: 24
4   is_awesome: true

JavaScript

1 var hello;
2 
3 hello = {
4   name: "Shreyank",
5   age: 24,
6   is_awesome: true
7 }

Presenter Notes

Existance

CoffeeScript

1 alert "I told you so!" if is_awesome?

JavaScript

1 if (typeof is_awesome !== "undefined" && is_awesome !== null) {
2   alert("I told you so!");
3 }

Presenter Notes

Swap

CoffeeScript

1 a = 10
2 b = "Shrink"
3 
4 [a, b] = [b, a]

JavaScript

1 var a, b, _ref;
2 
3 a = 10;
4 b = "Shrink";
5 
6 _ref = [b, a], a = _ref[0], b = _ref[1];

Presenter Notes

Array comprehensions

CoffeeScript

1 greetings = ("Namaste #{guest}" for guest in guests when guest isnt "Shreyank")

JavaScript

 1 var greetings, guest;
 2 
 3 greetings = (function() {
 4   var _i, _len, _results;
 5   _results = [];
 6   for (_i = 0, _len = guests.length; _i < _len; _i++) {
 7     guest = guests[_i];
 8     if (guest !== "Shreyank") _results.push("Namaste " + guest);
 9   }
10   return _results;
11 })();

Presenter Notes

Default variables and Splats

CoffeeScript

1 greetings = (greeting="Namaste", guests...) ->
2   return ("#{greeting} #{guest}" for guest in guests)

JavaScript

 1 var greetings,
 2   __slice = Array.prototype.slice;
 3 
 4 greetings = function() {
 5   var greeting, guest, guests;
 6   greeting = arguments[0], guests = 2 <= arguments.length ? 
 7     __slice.call(arguments, 1) : [];
 8   if (greeting == null) greeting = "Namaste";
 9   return (function() {
10     var _i, _len, _results;
11     _results = [];
12     for (_i = 0, _len = guests.length; _i < _len; _i++) {
13       guest = guests[_i];
14       _results.push("" + greeting + " " + guest);
15     }
16     return _results;
17   })();
18 };

Presenter Notes

Anonymous and Global Functions

CoffeeScript

1 window.linkLineNos = ->
2   $(".lineno").click -> 
3     window.location = "#line-#{$(this).html()}"

JavaScript

1 window.linkLineNos = function() {
2   return $(".lineno").click(function() {
3     return window.location = "#line-" + ($(this).html());
4   });
5 };

Note

All coffeescript output is wrapped inside an anonymous function

(function(){ ... }).call(this);

Presenter Notes

Conditionalities

CoffeeScript

 1 mood = greatlyImproved if singing
 2 
 3 if happy and knowsIt
 4   clapsHands()
 5 else
 6   showIt()
 7 
 8 date = if friday then sue else jill
 9 
10 options or= defaults

JavaScript

 1 var date, mood;
 2 
 3 if (singing) mood = greatlyImproved;
 4 
 5 if (happy && knowsIt) {
 6   clapsHands();
 7 } else {
 8   showIt();
 9 }
10 
11 date = friday ? sue : jill;
12 
13 options || (options = defaults);

Presenter Notes

Slice and splice

CoffeeScript

1 numbers = [0..9]
2 dup    = numbers[0...numbers.length]
3 middle  = dup[3..6]
4 
5 numbers[3..6] = [-3..-6]

JavaScript

1 var copy, dup, numbers, _ref;
2 numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
3 dup = numbers.slice(0, numbers.length);
4 middle = dup.slice(3, 7);
5 
6 [].splice.apply(numbers, [3, 4].concat(_ref = [-3, -4, -5, -6])), _ref;

Presenter Notes

Classes

CoffeeScript

1 class Person
2   constructor: (@name) ->
3 
4   greet: (greeting="Namaste") ->
5     alert "#{greeting} #{@name}"
6 
7 shrink = new Person "Shreyank"
8 shrink.greet()

JavaScript

 1 var Person, shrink;
 2 
 3 Person = (function() {
 4   function Person(name) {
 5     this.name = name;
 6   }
 7 
 8   Person.prototype.greet = function(greeting) {
 9     if (greeting == null) greeting = "Namaste";
10     return alert("" + greeting + " " + this.name);
11   };
12   return Person;
13 })();
14 
15 shrink = new Person("Shreyank");
16 shrink.greet();

Presenter Notes

Running CoffeeScript

Presenter Notes

Running CoffeeScript

From the browser

1 <script
2 src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script>
3 <script type="text/coffeescript">
4   #Some CoffeeScript
5 </script>

From the shell

$ coffee --compile my-script.coffee
$ coffee --watch --compile your-script.coffee

Presenter Notes

Running CoffeeScript

Rails 3.1 Asset Pipeline

Presenter Notes

Useful links

  • http://coffeescript.org
  • https://github.com/jashkenas/coffee-script
  • http://guides.rubyonrails.org/asset_pipeline.html

Presenter Notes

Thats all folks!

Presenter Notes