CoffeeScript Intro Video by Sam Stephenson of 37signals

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)

Better JS with CoffeeScript Screenshot

Classes and Inheritance — CoffeeScript (29:34)

Better JS with CoffeeScript Screenshot

Comparable inheritance code in JavaScript!

Better JS with CoffeeScript Screenshot

Comprehensions (27:20 – 27:50)

in CoffeeScript

comparable code in JavaScript
Better JS with CoffeeScript Screenshot

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

Better JS with CoffeeScript Screenshot

Multiline Strings in CoffeeScript (39:23)

Better JS with CoffeeScript Screenshot

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)

  • CoffeeScript.org includes a tool that shows you exactly how a line of CoffeeScript compiles to JS
  • Compiling via command line
  • Compiling on the fly
  • Rails 3.1 Sprockets — automatically compiles CoffeeScript on the fly
    • 37signals currently uses this to use CoffeeScript everywhere
  • Node.js – Stitch project

Related Posts

2 thoughts on “CoffeeScript Intro Video by Sam Stephenson of 37signals

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s