A short presentation on CoffeeScript for people who may not have much, or any, experience with it. It is a great way to learn JavaScript, as well as a fantastic syntactic sugar fro those who already know JavaScript.

1. Intro to CoffeeScript
A beginner’s presentation for beginners

2. Don’t I have to be a JSWiz?
Not even close. (But it does help)
Developer/Designer/Unicorn
Little Experience required
Simple syntax
Better transition from other language patterns
Some cool points
- Classes
- No semicolons (YAY!)
- Commas optional
- Arrow function notation

3. What is CoffeeScript?
CoffeeScript is an alternate syntax that compiles into Javascript. According to
the author, it is an ‘attempt to expose the good parts of JavaScript in a
simple way.
Popularity
CoffeeScript has gained much popularity since it’s inception as a GitHub gist in
2009. It has become the ‘x’-script of choice for some projects you might
have heard of, including Dropbox and GitHub, as well as many other
projects you’ve never heard of.
Usage
The widespread usage across many web apps makes this language a ‘should
do’ for any designer or developer. Even if you don’t decide to use it, you will
most likely come across it in a future project. So, DTRT and learn a thing-or-
two.

4. # Assignments
num = -5
isPositive = true
# Objects
Setup = ->
num: num
add: (i) ->
num + i
# Conditionals
num = 5 if isPositive
# Arrays
arr = [1,2,3,4,5]
var num, isPositive, Setup, arr,
plusOne;
num = -5;
isPositive = true;
Setup = function() {
num: num,
add: function(i) {
return num + i
}
};
if(isPositive) {
num = 5;
}
arr = [1,2,3,4,5];
So, what does it look like?

5. # Assignments
num = -5
isPositive = true
# Objects
Setup = ->
num: num
add: (i) ->
num + i
# Conditionals
num = 5 if isPositive
# Arrays
arr = [1,2,3,4,5]
- # -- for Comments
and
- ###
words -- for Block Comments
###
- Semicolons not required! (W00t!!
11!)
- Commas are not required, but can
be helpful.
- Indentation/syntax depended.
(Similar in nature to Ruby or Python)
- Concise syntax.
- Parentheses and Curlies are not
required, but can be helpful.
- Fun to type!
- Easier to read!
Example examined.

6. Installation
CoffeeScript requires Node.js and the NPM Package Manager or Ruby, which are
installed thusly:
Node.js --
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
-- OR --
Mac OS X : brew install node
Ubuntu? : apt-get install node
Everything : http://nodejs.org/download/ for Installer ackages
NPM --
curl https://npmjs.org/install.sh | sh
Ruby --
Mac OS X : comes preinstalled
Linux : may come preinstalled
Windows : http://rubyinstaller.org/

7. Installation, Continued
Now we can actually install CoffeeScript! YAY!!
Global :
$ sudo npm install -g coffee-script
Project :
$ npm install coffee-script
Alternatively, through GitHub (I’ve never done this one)
$ npm install -g http://github.com/jashkenas/coffee-script/tarball/master
and then, go to the coffee-script directory and type:
$ sudo bin/cake install

8. Now what?
Let’s play around with some ideas.
JavaScript, as of EC5, doesn’t have defined class structures and is mostly a
functional, object-oriented language. “But,” I can hear some protest, “you
can use things like Traceur and the EC6 Module Transpiler to write
JavaScript with classes and other new constructs available in Ecmascript 6.”
Well. If you’re using those things, awesome. Even you can benefit from CS!

9. Classes
class Car
constructor: (@name) ->
engine: (valves) ->
console.log(@name + “ is a V-#{valves}.”
class Ford extends Car
engine: ->
super 6
class Honda extends Car
engine: ->
super 4
slowCar = new Honda “Prius”
fastCar = new Ford “Cobra”
slowCar.engine()

10. And? In JavaScript?
var Car, Ford, Honda, fastCar, slowCar, _ref, _ref1,
__hasProp = {}.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; };
Car = (function() {
function Car(name) {
this.name = name;
({
engine: function(valves) {
return console.log(this.name + ' is a V#{valves}.');
}
});
}
return Car;
})();
(etc...)
[
http://coffeescript.org/#try:class%20Car%0A%20%20constructor%3A%20(%40name)%20-%3E%0A%20%20%20%20engine%3
]

11. So that's cool...
What other neat things can be done this
easily?

12. JSON:
teachers =
teacher:
name: "Patrick D."
company: "Rightleaf, LLC"
teacher:
name: "Phil P."
company: "Rightleaf, LLC"
Ranges:
days = [1..7]
Existential Operator:
login() if not user?
This and This!
Splats:
giveShips = (one, two, three, rest...) ->
addOnesToShip one, 10
addOnesToShip two, 6
addOnesToShip three, 2
for ship in rest
addOnesToShip ship, 1
ships = ['rat', 'dog', 'cat', 'bull', 'horse']
giveShips ships...
(need ... to ensure assignment)

13. One last
"Pretty Cool Thing"
"Pretty Cool Thing"
Modules!!!!
module.exports = (engine, options = {}) ->
options.blacklist ?= []
engine = require(engine) if typeof engine is 'string'
compile: (template, data) ->
template = engine.compile(template, data)
(data) ->
for k, v of data.params
if typeof data[k] is 'undefined' and k not in options.blacklist
data[k] = v
template(data)
(sample taken and modified from
https://github.com/mauricemach/zappa/blob/master/src/zappa.coffee for effect)

14. Arg(h)s!!
(The good ones)
-o Output Directory
-c Compile Directory
-w Watch this Directory
-m Map JS to CS files for Debugging
-b Remove safety wrapper (a good thing IMHO)
It'll look something like this:
v--Command v---to here v--- In all these CS files
coffee -mj -o /javascripts/allYourJase.js -cw /coffeescripts/*.coffee
^^--^--Map, Join and Output ^---Compile and Watch for saves
Arguments for 'coffee', or
Compiling like a pirate

15. Resources
CoffeeScript Home Page:
http://coffeescript.org
Using CoffeeScript with Node and such:
http://ristrettolo.gy (online book)
Examples:
http://en.wikipedia.org/wiki/CoffeeScript
http://amix.dk/blog/post/19612 (neet post about CoffeeScript stuff, in general)
Cool Tuts:
http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-coffeescript
This guy hates it, just in case you want the other point of view.
CoffeeScript: less typing, bad readability…
http://ceronman.com/2012/09/17/coffeescript-less-typing-bad-readability/