A while ago I started a series about how to brand SharePoint sites using the Yeoman web development workflow. With this small introduction to CoffeeScript I’d like to continue the series.

  1. Introduction
  2. Yeoman the web development workflow
  3. An Introduction to Jade
  4. An Introduction to CoffeeScript
  5. An Introduction to SASS
  6. Our yeoman generators
  7. Hands  On – Let’s create a custom MasterPage
  8. Hands On – Let’s create a custom PageLayout
  9. A forecast – What are we currently working on

CoffeeScript is a small language that compiles into JavaScript. The initial release of CoffeeScript has been published back in 2009. Since then the language has become more and more popular. The CoffeeScript source code is hosted on github.com and there is a really good website (coffescript.org) which teaches you all the things you’ve to know about the language.

For most SharePoint developers out there languages such as CoffeeScript are a little bit strange, which is - in my opinion - caused by Microsoft’s developer marketing who did their best to bring Windows developers to the web - but this is a different and sad story (think about ASP.NET WebForms Designer and UpdatePanel..).

So, first the question is why!

Why should I use CoffeeScript instead of writing vanilla JavaScript when it comes to web development.
  1. It’s just plain JavaScript
  2. It’s just using JavaScript’s good parts
  3. It adds some great syntactic sugar from Ruby to JavaScript
  4. It’s generating robust JavaScript
  5. The compile time check is an additional quality-gate
  6. You’ve to write less code
  7. It allows you to easily write OOP JavaScript
  8. It makes dealing with the current context easy (forget about var that = this )
  9. There are tons of great frameworks, tools and libraries available
  10. It makes fun writing CoffeeScript

Instead of writing more and more text I’m going to show you some CoffeeScript Code, which should give you a lot of reasons why to learn CoffeeScript.

Defining Arrays and Objects

As you can see in this very easy snippet, you can save a lot of keystrokes because CoffeeScript pays attention to the indentions you’re using within your code. This makes thinks like brackets and semicolons unnecessary.

Readable Comparisons

Based on the Ruby syntax you can use cool comparison expressions in CoffeeScript

Iterating in CoffeeScripts

Iterating over collections or arrays is really easy and you will save tons of code compared to vanilla JavaScript.

Classes and Context in CoffeeScripts

Define Classes and use inheritance in the easy way. Don’t care about prototype inheritance when writing your code. CoffeeScript handles this behind the scenes.

See also the fat arrow (=>) which is responsible for ensuring that context within the function is the one you’ve defined at programming time. So you can finally forget all these var that = this statements

######CSOM in CoffeeScripts

When programming CSOM with CoffeeScript code becomes more readable and easier to maintain combined to vanilla JavaScript


As you can see CoffeeScript is awesome. Give yourself 30 minutes and checkout coffeescript.org and start writing client-side-code the robust way. In addition to all these benefits it’s fun to write CoffeeScript because you can use cool syntactic features from Ruby which will save a lot of time in your daily business.