Sam Stephenson, of 37signals and Prototype.js, gives a 45-minute introductory walk through CoffeeScript, it’s uses and benefits, at the Future of Web Apps London, 2011.

Telling Screenshots from the Presentation

Check out these CoffeeScript / JavaScript side-by-side comparisons. The screenshots are not high resolution, but you can get the idea. When possible, I’ve included where these appeared in the presentation.

CoffeeScript Switch Statement (25:03 – 25:50)

Classes and Inheritance — CoffeeScript (29:34)

Comparable inheritance code in JavaScript!

Comprehensions (27:20 – 27:50)

in CoffeeScript

comparable code in JavaScript

Destructuring: Person, Name Split in CoffeeScript (37:30 – 38:20)

Multiline Strings in CoffeeScript (39:23)

Notes from the Presentation

Random Highlights

• “The golden rule of CoffeeScript is: ‘It’s just JavaScript.'” (12:57-13:22)
• “All of the crap” (extraneous braces and semicolons) “just fades away.” (13:30-13:40)
• “JavaScript gives you so many ways to shoot yourself in the foot, but there is a golden path…. and CoffeeScript forces you to use it.” (13:40-14:50)
• “I see what I’m actually doing. Code looks clearer.”  (21:00 – 22:44)
• Compiles to code that is optimized for performance, without reliance upon libraries (27:50-59)
• “Completely lowers the barrier to writing fast, good code.” (28:00 – 28:16)

How CoffeeScript Enforces JavaScript’s Good Parts

For those familiar with Douglas Crockford’s JavaScript: The Good Parts, Stephenson highlights how CoffeeScript pushes you in that direction:

1. It’s private by default. Each file compiles into a self-executing closure. No leaking of global variables. (14:50 – 16:00)
2. No more “var” keyword. Enforces lexical scope. (16:00 – 17:06)
3. Strict comparisons. No more “==” vs. “===” confusion. CoffeeScript’s “is” keyword is always “===”. (17:07 – 18:05)
4. Runs anywhere. JSLint compliant. (18:06 – 18:40)

10 Best Features of CoffeeScript

Beginning at 18:40, Stephenson walks through 10 of his favorite features of CoffeeScript, with lots of practical coding examples.

Here is a brief summary of his 10 points:

1. Functions syntax (18:40 – 20:35) — greatly simplified, with much less typing
2. Significant white space (20:36 – 22:44) — indentation and line breaks replace braces, semicolons. Stephenson: “I see what I’m actually doing. Code looks clearer.”
3. Bare objects syntax (22:45 – 24:25) — makes for much greater coding efficiency
4. Everything’s an expression (24:36 – 25:50) — “Everything has a value.”
5. Comprehensions (25:51 – 28:19) — each, map, select made simple — and compiles to fast, good code
6. Classes and Inheritance (28:20 – 31:24) — “CoffeeScript makes it incredibly simple and terse to write classes.”
7. Bound functions (31:25 – 34:39) — the fat arrow => binds a function definition to its current scope, and can also be used to define instance methods
8. Conditionals (34:40 – 37:10) — greatly simplifies the writing of conditionals
• allows you to put a conditional at the end of an expression
• introduces the “unless” keyword
• introduces the existential operator : “?” at the end of a line checks to see if a value is undefined or null
• also the soak operator
9. Destructuring Assignment (37:11 – 38:06) — a proposal for the next version of JavaScript, already available in CoffeeScript
10. String Syntax (38:07 – 39:39) —
• does not require string concatenation
• enables writing of multi-line strings (with indentation) between triple-quotes

How to Use CoffeeScript

Stephenson ends with a few notes regarding ways to incorporate CoffeeScript into your development workflow. (39:40 – 43:34)