Much Ado About CoffeeScript - LSRC V

Agile DevelopmentWith RJS For Ninja Rockstars

Much Ado About CoﬀeeScriptMattt Thompson (@mattt)Lone Star Ruby Conf V

SassCoﬀeeScript

Sass → CSS$blue: #3bbfce .content-navigation {$margin: 16px border-color: #3bbfce; color: #2ca2af; }.content-navigation border-color: $blue .border { color: darken($blue, 9%) padding: 8px; margin: 8px;.border border-color: #3bbfce; } padding: $margin / 2 margin: $margin / 2 border-color: $blue

CoﬀeeScript → JavaScript var Account;Account = (customer, cart) -> var __bind = function(fn, me) @customer = customer { return function(){ return @cart = cart fn.apply(me, arguments); }; }; Account = function(customer, cart) { $(.shopping_cart).bind ↩ this.customer = customer;click, (event) => this.cart = cart; return $ @customer.purchase @cart (.shopping_cart).bind(click, __bind(function(event) { return this.customer.purchase(this.cart); }, this)); };

Introducing CoﬀeeScriptWhat We’ll Cover• Installation• Integration With Rails• Syntax• Features

Installation

CoﬀeeScript

“It’s just Javascript”

• Less Syntactic Cruft• JavaScript Design Patterns are Features of CoﬀeeScript

$ homebrew install node

$ curl http://npmjs.org/install.sh | sh

$ npm install -g coffee-script

$ coffee

Integration With Rails

gem rails, 3.1.0rc5

app/ assets/ javascripts/ store.js.coffee

Syntax

jQuery(function() { $("#title").show();});

jQuery function() $("#title").show()

jQuery -> $("#title").show()

Store.prototype.add = function(item) { this.items.push(item);}

Store.prototype.add = function(item) this.items.push(item)

Store.prototype.add = function(item) @items.push(item)

add: function(item) @items.push(item)

add: -> (item) @items.push(item)

add: (item) -> @items.push(item)

• Redundant Punctuation Omitted• function becomes ->• this. becomes @• {} becomes ⇥

Features

1Class Pattern

class Animal constructor: (name) -> @name = name

var Animal;Animal = (function() { function Animal(name) { this.name = name; } return Animal;})();

2Lexical Scoping(No Global Variables)

window.Animal = class Animal constructor: (name) -> @name = name

3Default Arguments

window.Animal = class Animal constructor: (name = "Unknown") -> @name = name

4String Interpolation

class Bear extends Animal constructor: (name) -> @name = "#{name}, the Bear"

5Conditional Suﬀixes

@price = amount if amount > 0.00

6Operator Aliases

@lovesTacos = false unless @name is "Mattt"

CoﬀeeScript JavaScript is === isnt !== not ! and && or ||true, yes, on true @, this this of in in N/A

7Deconstructing Assignment

[dollars, cents] = input.match /(d+)/g

8Existential Operator

[dollars, cents] = (input.match /(d+)/g) ? [0, 0]

9Splats

gold, silver, bronze, rest = ""awardMedals = (first, second, third, others...) -> gold = first silver = second bronze = third rest = otherspieEatingCompetitors = [ "Wynn Netherland", "Steve Klabnik", "Adam Keys", "Richard Schneeman", "Rob Mack", "Tim Tyrrell", "Steve Stedman", "Mando Escamilla", "Keith Gaddis"]awardMedals pieEatingCompetitors...

10List Comprehensions

eat food for food in [toast, cheese, wine]

eat food for food in [toast, cheese, wine] ↩ when food is "toast"

languages = { "Javascript": 3, "CoffeeScript": 9, "Ruby": 9, "Python": 6, "Objective-C": 7, "Potion": 10}favorites = language for language, awesomeness of ↩ languages when awesomeness >= 7

Introducing CoﬀeeScriptWhat We’ve Covered So Far• Installation• Integration With Rails• Syntax• Features

“a little language”

Web 2.0: A History

1995 Ruby Created by MatzJavaScript Created by Brendan Eich

2005 Ruby Rails created by DHH AJAX coined byJavaScript Jesse James Garret

2006 Ruby RJS shipped with Rails 1.2 jQuery 1.0 is released byJavaScript John Resig

page.insert_html :bottom, list, content_tag("li", "Fox")page.visual_effect :highlight, list, :duration => 3page.replace_html header, RJS: Great Success!

2007 Era of competing Ruby Ruby implementations (MRI, YARV, Rubinius, JRuby) Era of competing JavaScript frameworksJavaScript (Prototype, jQuery, dojo, MooTools, YUI)

2008 Ruby Cartoon FoxesJavaScript Unicorns

2009 Ruby Ruby 1.9 released Node.js created byJavaScript Ryan Dahl

2010 Ruby CoﬀeeScriptJavaScript

♕KEEPCALM ANDCARRY ON

WAKE UP AND SMELL THECOFFEE

♕FORGET THAT ANDFREAK OUT

⚒ GETEXCITED AND MAKETHINGS

Much Ado About CoﬀeeScriptMattt Thompson (@mattt)Lone Star Ruby Conf V

http://coderwall.com	76
http://lanyrd.com	33
https://twitter.com	6
http://twitter.com	5
http://localhost	2
http://www.onlydoo.com	1
http://www.hanrss.com	1

Much Ado About CoffeeScript - LSRC V

by Mattt Thompson on Aug 13, 2011

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 124

Statistics

Much Ado About CoffeeScript - LSRC V Presentation Transcript