slides

z, ?	toggle help (this)
space, →	next slide
shift-space, ←	previous slide
d	toggle debug mode
## <ret>	go to slide #
c, t	table of contents (vi)
f	toggle footer
r	reload slides
n	toggle notes
p	run preshow

loading presentation...

CoffeeScript for Rubyists

Brian Morearty

Jan. 5, 2012

CoffeeScript

Is CoffeeScript really so great? Why use it instead of good ol' JavaScript?

This Talk

Too many slides
- Some are for reference
Save questions for the end
- Or talk fast

Who Am I?

Programming since 1982
Former lead eng. of QuickBooks UI
Co-founder of a new startup
And an independent consultant

Why Am I Talking About CoffeeScript?

I like concise languages
Doing CoffeeScript for 6 months
In Rails 3.0 and 3.1 apps

What I Will Talk About

CoffeeScript (duh)

How to install it
Using it in a pre-3.1 Rails app
Dealing with legacy JavaScript
Why Ruby programmers might like CoffeeScript

Bonus

ONE thing about CoffeeScript that's better than Ruby

boxer

But First

What is CoffeeScript?

A language that compiles to JavaScript
Whitespace is significant
Compiled JS output is pretty-printed
Can use JS libraries (and vice-versa)
There is no interpretation at runtime

PART 1: How to Install It

Four Steps

Install Node
Install Node Package Manager (npm)
Install CoffeeScript
Install js2coffee

1. Install Node

http://nodejs.org/
Click Macintosh Installer or build it yourself (brew installer was out-of-date last time I tried it)
Run the installer

2. Install Node Package Manager (npm)

curl http://npmjs.org/install.sh | sh
More info at http://npmjs.org/

3. Install CoffeeScript

npm install -g coffee-script
Don't forget the -g. This installs it globally.
And the dash in coffee-script.

4. Install js2coffee

npm install -g git://github.com/rstacruz/js2coffee.git
Don't just install "js2coffee." It's old.

PART 2: Using It In a Pre-3.1 Rails App

Barista

# optional; must be *before* barista:
gem 'haml-rails'

# Only needed on Ruby 1.8:
gem "json" 

gem "barista"

Install

bundle install
rails generate barista:install

Generates a config file

Profit

Place your CoffeeScripts in app/coffeescripts using the .coffee extension.
Generated JavaScript goes into public/javascripts.
- In the right subfolder if applicable.

Don't use .js.coffee

Put CoffeeScript in HAML With `:coffeescript`.

%p hello, world.

:coffeescript
  $ ->
    initialize()

Barista Deploy Options

Default: generate on the fly in development. Deploy .js files.
Add therubyracer to your Gemfile and add rake barista:brew to your Capistrano script.
Install therubyracer on prod and generate on the fly there.

PART 3: Dealing With Legacy JavaScript

`js2coffee` to the Rescue

$ js2coffee < emc2.js > emc2.coffee

Does it need a beautifier?
Nope. CoffeeScript has to be indented anyway.

Is There a `coffee2js`?

Think hard.

think hard

3 SECOND INTERMISSION

Who's Tired?

lucerne

PART 4: Why Rubyists Might Like CoffeeScript

a.k.a. The Fun Part

fun part

CoffeeScript Has Good Stuff From:

Ruby + JavaScript + Python

CoffeeScript

(But it seems most heavily influenced by Ruby.)

Semicolons

Just Like Ruby

pi = 3.14159

Parentheses

Almost Like Ruby

console.log calc result

compiles to:

console.log(calc(result));

But If Not Passing Any Parameters...

Parens Are Required

redAlert()

stabby croc

Stabby Proc

Like Ruby 1.9

Except params come before stabby
Stabby proc is THE WAY to define a function

Stabby Proc Example

fib = (n) ->
  return n if n in [0,1]
  fib(n-1) + fib(n-2)

result = fib(10)

No Params -> No Parens

clearFlash = ->
  $('.flash').html('')

String Interpolation

Just Like Ruby

greeting = 'allo'
result   = "You had me at #{greeting}"

Heredocs With String Interpolation

Just Like Ruby

name = 'Inigo Montoya'
result = """
         Hello. My name is #{name}.
         You killed my father.
         Prepare to die.
         """

Only double-quoted heredocs have string interpolation.

Ending a Block of Code

Like Python & Haml, Not Ruby

if milk.spilled()
  $('#message').html("Don't cry")

result(speed) = ->
  if speed > 65
    "ticket"
  else
    "you're good"

Default Values For Arguments

Just Like Ruby

loadData = (page = 1) ->
  $(data).load("/data?page=#{page}")

Variables Declared at First Assignment

Just Like Ruby

movie = 'School of Rock'

compiles to:

var movie;
movie = 'School of Rock';

To Reference a Variable in Two Methods

Assign a Value

cache = undefined
store: (value) ->
  cache = value
retrieve: ->
  cache

"This behavior is effectively identical to Ruby's scope for local variables."

Speaking of Variables: No Globals

All Output Code Is Wrapped in an Anonymous Function

// generated JavaScript goes in anon func
(function() {
  # ur codez go hear
})();

# I want to access this from other files
window.regions = ['West','East',
                  'North','South']

Postfix `if`

Just Like Ruby

return true if found

`unless` and postfix `unless`

Just Like Ruby

die() unless lives > 0

Everything Is an Expression

Just Like Ruby

At least, as much as possible. break, continue, and return are not converted to expressions.

Last statement is an implied return.

a ternary of terns

No Ternary Operator

But `if`/`then`/`else` Is an Expression

language = if serverside then 'ruby' else 'coffeescript'

`for` Loop Syntax Is...

Just Like Ruby

for movie in ['The Princess Bride',
              'West Side Story']
  record movie

Use 'for own key, value of object' to loop over 'hasOwnProperty()' properties.

Ranges

A Lot Like Ruby

result = [ 1..5 ]

result = [ 1...5 ]

Like Ruby, two dots includes the last value and three dots excludes it.

`@property`

Just Like Ruby

Shortcut for this.property

`then`

Just Like Ruby

if hasKey then enter()

Useful for 1-line if and case statements

The Existential "`?`" Operator

Like Ruby's `.nil?`

if expression
  # not null, undefined, false,
  # "", 0, or NaN
if expression?
  # neither null nor undefined

Multiple Assignments in a Single Statement

Similar to Ruby

[oldMax, max] = [max, newMax]
[firstName, lastName] = getName()

What is the One Way CoffeeScript is Even Better Than Ruby?

"`?.`"

Like Ruby's `try` or `andand` Gem

Nicer Syntax Than Ruby

person = null
result = typeof(person?.name)

If ?. is called on null or undefined it returns undefined instead of raising TypeError. "Accessor variant of the existential operator."

Good for Function Chaining

person = {}
oldestKid = person.kids?[0]?.name?.first
result = typeof(oldestKid)

Conclusion

Lots of Other Things I Didn't Mention

Optional YAML-like syntax for object literals
Splats for var-args
etc., etc.

Bibliography

http://coffeescript.org/ (try the playground)

http://js2coffee.org/ (two-way playground)

https://github.com/Sutto/barista

Thank You.

Brian Morearty

http://ilikestuffblog.com/

http://bmorearty.github.com/coffeescript-talk/

brian@morearty.org

@BMorearty on Twitter and GitHub

Cartoons by Brian, Rosey, and Elizabeth

CoffeeScript for Rubyists

This Talk

Who Am I?

Why Am I Talking About CoffeeScript?

What I Will Talk About

CoffeeScript (duh)

Bonus

But First

What is CoffeeScript?

PART 1: How to Install It

Four Steps

1. Install Node

2. Install Node Package Manager (npm)

3. Install CoffeeScript

4. Install js2coffee

PART 2: Using It In a Pre-3.1 Rails App

Barista

Install

Profit

Put CoffeeScript in HAML With :coffeescript.

Barista Deploy Options

PART 3: Dealing With Legacy JavaScript

js2coffee to the Rescue

Is There a coffee2js?

3 SECOND INTERMISSION

Who's Tired?

PART 4: Why Rubyists Might Like CoffeeScript

a.k.a. The Fun Part

CoffeeScript Has Good Stuff From:

Semicolons

Just Like Ruby

Parentheses

Almost Like Ruby

But If Not Passing Any Parameters...

Parens Are Required

Stabby Proc

Like Ruby 1.9

Stabby Proc Example

No Params -> No Parens

String Interpolation

Just Like Ruby

Heredocs With String Interpolation

Just Like Ruby

Ending a Block of Code

Like Python & Haml, Not Ruby

Default Values For Arguments

Just Like Ruby

Variables Declared at First Assignment

Just Like Ruby

To Reference a Variable in Two Methods

Assign a Value

Speaking of Variables: No Globals

Postfix if

Just Like Ruby

unless and postfix unless

Just Like Ruby

Everything Is an Expression

Just Like Ruby

No Ternary Operator

But if/then/else Is an Expression

for Loop Syntax Is...

Just Like Ruby

Ranges

A Lot Like Ruby

@property

Just Like Ruby

then

Just Like Ruby

The Existential "?" Operator

Like Ruby's .nil?

Multiple Assignments in a Single Statement

Similar to Ruby

What is the One Way CoffeeScript is Even Better Than Ruby?

"?."

Like Ruby's try or andand Gem

Nicer Syntax Than Ruby

Good for Function Chaining

Conclusion

Lots of Other Things I Didn't Mention

Bibliography

Put CoffeeScript in HAML With `:coffeescript`.

`js2coffee` to the Rescue

Is There a `coffee2js`?

Postfix `if`

`unless` and postfix `unless`

But `if`/`then`/`else` Is an Expression

`for` Loop Syntax Is...

`@property`

`then`

The Existential "`?`" Operator

Like Ruby's `.nil?`

"`?.`"

Like Ruby's `try` or `andand` Gem