CoffeeScript in Motion
Pluralsight blog Where devs, IT admins & creative pros go for news, tips, videos and more.
3,500+ tech & creative courses authored by experts - unlimited & online Get it now →
May 19, 2011

CoffeeScript in Motion

By

A snippet of code

COFFEESCRIPT:
jQuery ->
  $('#entry').focus()
JAVASCRIPT:
jQuery(function () { 
  $('#entry').focus();
});

1. A simple function

Engineering + Creativity

In his book Rise of the Creative Class, Richard Florida defines a list of creative professions that includes graphic designers, sculptors, architects, and…software writers.

It’s hard to think of a better place to see creativity and engineering than in CoffeeScript, a little language that compiles to JavaScript.

CoffeeScript is beautiful. It’s sensibly designed around syntactic indentation. It adds useful features to JavaScript. Most importantly, it’s a very thin layer over JavaScript. For any line of CoffeeScript, one can easily predict the line of JavaScript that the compiler will emit.

CoffeeScript invents some good ideas and steals many others. The number one source I could identify for the most useful ideas in CoffeeScript? Perl.

Yes, Perl. The language that’s guaranteed to produce an audible gasp if mentioned in civilized programming circles today. Yet for ten solid years, Perl was a petri dish of syntactic innovation. Extended regular expressions, destructuring assignment.

Which is why it’s exciting to see syntactic experimentation happening with such vigor in CoffeeScript.

In these video snippets, you’ll see how JavaScript and CoffeeScript compare.

— Geoffrey Grosenbach

Design & Motion Graphics by Paula Lavalle

2. Jasmine’s ‘describe’ function with args


A snippet of code

COFFEESCRIPT:
describe "constructor", ->
JAVASCRIPT:
describe("constructor", function () {

});

3. The @ syntax for instance properties


A snippet of code

COFFEESCRIPT:
beforeEach ->
  @dish = new Dish 'Steak $18.99'
JAVASCRIPT:
beforeEach(function () {
  this.dish = new Dish('Steak $18.99');
});

“Everybody shows off
And wants to look presentable
But the fact of the matter
Is that accidents are preventable.” — Buck 65

4. An instance method


A snippet of code

COFFEESCRIPT:
add: (dish) ->
  @dishes.push dish
JAVASCRIPT:
Meal.prototype.add = function(dish) {
  this.dishes.push(dish);
};

5. A full class with constructor


A snippet of code

COFFEESCRIPT:
class Money
  constructor: (rawString) ->
    @cents = @parseCents rawString
JAVASCRIPT:
Money = (function() {
  function Money(rawString) {
    this.cents = this.parseCents(rawString);
  }
  return Money;
})();

6. Object literal


A snippet of code

COFFEESCRIPT:
toJSON: ->
  title: @title
  price: @price.toString()
JAVASCRIPT:
function toJSON() {
  return {
    title: this.title,
    price: this.price.toString()
  };
}

Intrigued?

Buy the 75 minute video at PeepCode!

About the Author

is VP of Open Source at Pluralsight. He previously founded PeepCode and is an all around entrepreneur, developer, designer, teacher and athlete. Follow him on Twitter at @topfunky.


Discussion

Pluralsight subscription

Categories

Related Posts

Tags