Real life-coffeescript

What is CoffeeScript?
CS is a language that compiles into
JavaScript (like HAML and SASS)

Not a superset of JS (not like SCSS)

Not a JS framework (not a replacement for
jQuery)

From the maker
CoffeeScript is a little language that compiles into JavaScript. Underneath all of those
embarrassing braces and semicolons, JavaScript has always had a gorgeous object
model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript
in a simple way. - Josh Ashkenas

Why all the fuss?
CS will be a standard part of Rails 3.1 (along
with SASS)

It makes JS more like Ruby!

CS is an npm package, hence a gateway
drug to Node.js and Socket.IO

Why use CS?
compiles to lint-free JS, nothing fancy

easy to write "good parts javascript" that
looks clean

makes good practices less tedious

HAML and SASS are awesome and now
you're using those...

What are the features?
Easy variable declaration (lexical scoping)

Easy class inheritance and binding

Easy instance variables @name =>
this.name

Implicit return from functions

"String #{interpolation}"

Semantic Shortcuts
-> and => instead of function(){}

execute() if that is thing1 and that isnt thing2

and/or/not instead of &&/||/!

that = thing1 or thing2

that or= thing3

Conditionals
if condition? (no parantheses, ? is .nil? not
.blank?)

if condition?() to evaluate if a function
returns null

throwAFit() unless @name in ["Paul", "John"]

How much more?
list traversal: for result in results

return (transform result for result in results)

switch/when/else instead of
switch/case/default

yes/no, on/off for true/false

Some ugly JavaScript
var sortFunction = function(a,b) {
if (typeof(a[sort_col]) === 'number') {
// numeric sort
if (sort_dir === 'up') return (a[sort_col] - b[sort_col]);
else return (b[sort_col] - a[sort_col]);
} else {
// string sort
var aName = a[sort_col].toLowerCase(), bName = b[sort_col].toLowerCase();
if (sort_dir === 'up') return (aName > bName);
else return (bName > aName);
}
}

this.getResults = function(){
// here is the place to apply filter
var results = parent.results;
if (filter_text) {
results = $.makeArray($.map(results, function(result, i){
var haystack = [result.name, result.brands, result.address, result.city].join(', ')
return (haystack.indexOf(filter_text) != -1) ? result : null;
}));
}
if (sort_col && sort_dir) {
results = results.sort(sortFunction);
}
return results;
}

class Results
setSort: (col, dir) ->
if col? and dir?
results = _(@results).sortBy (result) -> result[col]
@results = if dir is 'down' then results.reverse() else results
setFilter: (filter) ->
if filter?
matching = (needle) ->
haystack = _.join needle.name, needle.brand_list, needle.address, needle.city
_(haystack).includes(needle)
@results = _.select @results, matching

standard jQuery with object binding
$('#view_as_table').click => @.setViewType('Table', true)
$('#view_as_thumbs').click => @.setViewType('Thumb', true)
$('#view_as_list').click => @.setViewType('List', true)

Big Long jQuery Call
var makeSortable = function(){
$('#widgets .col').sortable({
items: 'div.widget',
dropOnEmpty: true,
handle: '.header h3',
appendTo: 'body',
connectWith: '.col',
...
});
makeSortable = ->
$('#widgets .col').sortable
items: 'div.widget'
dropOnEmpty: yes
handle: '.header h3'
appendTo: 'body'
connectWith: '.col'
revert: yes
cursor: 'move'
placeholder: 'drag-over'
stop: updateWidgetOrder

class JKT.GoogleLoader
constructor: (callback) ->
@callback = callback
if google? then @loadComponent() else @loadGoogle()
loadComponent: -> return
loadGoogle: () ->
script = document.createElement "script"
script.src = "http://www.google.com/jsapi?key=#{JKT.google_api_key}&sensor=false"
script.type = "text/javascript"
if script.attachEvent? # IE
script.attachEvent 'onreadystatechange', =>
if script.readyState in ['loaded', 'complete']
@loadComponent()
else
script.onload = => @loadComponent()
document.getElementsByTagName("head")[0].appendChild(script)

class JKT.MapLoader extends JKT.GoogleLoader
loadComponent: ->
google.load 'maps', '3',
other_params: "sensor=false"
callback: @callback
return

super Is Super
class JKT.Search.TableRenderer
constructor: (results) -> @results = results
render: ->
$('#results').html $('#listing_grid').render [{foo:"bar"}]
$('#results tbody').html $('#listing_grid_row').render(@results)

class JKT.Search.MapRenderer extends JKT.Search.TableRenderer
render: ->
super
if @results.length <= 300
$('#results tbody tr').each ->
...

class Results
...
paginate: (start, end) ->
if start? and end?
@results = @results[start..end]
toSentence: ->
size = _.size(@results) or 0
if size is 1 then "1 result" else
"#{size} results"

enoughForMap: -> _.size(@results) < 300
any : -> _.isArray(@results) and _.any(@results)

I already know JavaScript
Kudos to you. I do too.

Not a substitute for knowing JS.

Your own JS isn't as clean as the compiled
JS

Unless your last name is Resig or Crockford

It looks weird.
It's the bastard child of Ruby and Python.

Once you get used to it, it's the JS that looks
whack.

I don't write JS, I write
jQuery.
No you write JS using jQuery.

I use jQuery too.

CS makes your jQuery cleaner.

Sugar Allergies
Are you allergic to "syntactic sugar"?

CS is more than that.

We need a better name because we all
know sugar is bad for you.

Line Noise Reduction

Sugar = Noise Reduction
Bad line noise highly affects the readability of our code. It is true we get used to them,
but once you remove it, there's no way back. - Jose Valim

Indentation Allergies
"I like my curly braces"

CS uses Pythonic whitespace

You get used to it - cost/benefit

I really don't understand why using indentation level for blocks is so
controversial. You do indentation anyway; you don't want to violate OAOO; it
avoids hard-to-spot errors where indentation and begin/end or {/} differ; it looks
cleaner; there's no way to have unmatched braces; and I never get indentation
wrong, but sometimes I do have to count braces. In other words, don't let this
issue stop you from trying out Python; indentation-denoted blocks are very easy
to get used to. -- Falk Bruegmann

Firebug Will Break
You lose the correspondence between your
code and line numbers in Firebug

There is no FireCoffee

Use small coffee files to get approximate line
correspondence

The compiled JS is not magical - you can still
read it

What about syntax
highlighting?
No plugin for Eclipse/Aptana

Use TextMate, jEdit, gEdit, vim, emacs

The TextMate bundle is great!

Maybe on the next project
Unless your current project is almost done
and will never be maintained...

Porting that project is just what you need to
learn CS.

It's not "all or nothing": one file at a time

If you don't like it you can keep the change.

Where do I start?
Don't just dive in or you'll be coding before
you're ready

Read the CS overview a few times
(http://jashkenas.github.com/coffee-script)

Install CS and the TextMate bundle

Port a project's JS to CS

Write some new CS code

Real life-coffeescript

More Related Content

What's hot (19)

Similar to Real life-coffeescript (20)

Recently uploaded (20)

Real life-coffeescript