CoffeeScript Development

CoffeeScript Development

As one starts to truly learn JavaScript and begin developing real-world applications with it, it'll fool you at times with unexpected and surprising behavior. This somewhat inconsistent and unintuitive behavior fills many a chapter in JavaScript books. In fact, ironically, JavaScript: The Good Parts spends just as much time pointing out the bad and awful parts of JavaScript as it does the good parts. However, now that JavaScript Development is becoming more main stream and developers are truly programming in JavaScript as opposed to just jQuery or another JavaScript Library, developers are re-thinking JavaScript. In some cases, developers are building languages that are easier to develop in than JavaScript but compile to JavaScript like CoffeeScript. In other cases, developers want to replace JavaScript with a completely different language like Google's new Dash or Dart language for the web. In this case, I would like to talk about CoffeeScript.

JavaScript: The Surprising Parts

As mentioned above, when you start reading beginning JavaScript books like JavaScript: The Good Parts or JavaScript Enlightenment they provide assistance to new JavaScript Developers by pointing out parts of the language that might take you by surprise. Sometimes these surprises are truly inconsistencies or bad decisions in the programming language, and sometimes these surprises are just based on differences in the language itself compared to other languages.

For example, one concept that trips up new JavaScript Developers is Scope. Most C-like languages ( like JavaScript ) use block scope, where a block is a set of statements in curly braces. If you are a C# developer like myself you will know this to be a truth. Any variable declared within a curly brace in C# ( think for loops, using loops, if blocks, etc.) is only scoped (visible ) to that block. Outside of that block the variable is invisible.

Although JavaScript is a C-like language and has block syntax, it does not have block scope. Any variable declared in a block is visible to the entire function containing that block. Combine that with the phenomenon of hoisting ( when JavaScript acts as if all variables were defined at the top of the function ) and you can have a real head scratcher for those new to JavaScript. Hoisting is why in JavaScript it is recommended that you declare all your variables at the top of the function!

These surprises and others make a case for CoffeeScript.

Learning CoffeeScript

As mentioned, CoffeeScript is a neat little language written by Jeremy Ashkenas that compiles to CoffeeScript. CoffeeScript helps you implement JavaScript best practices and avoid common mistakes and pitfalls. In addition, CoffeeScript is also less verbose and much easier to understand. Although I, personally, recommend you learn and understand JavaScript before turning to CoffeeScript, CoffeeScript is indeed so much simpler to learn and understand than JavaScript.

The best place to learn CoffeeScript and find additional resources for learning is the CoffeeScript Documentation on GitHub. The CoffeeScript Documentation is excellent and probably good enough for anyone to learn CoffeeScript.

If you need a bit more help in addition to the documentation, you'll find links to free resources like The Little Book of CoffeeScript as well as Smooth CoffeeScript. A book I purchased from Pragmatic Programmers, which I think is excellent, is CoffeeScript: Accelerated JavaScript Development by Trevor Burnham. Great book as it now only teaches you CoffeeScript, but it also teaches you the problems with JavaScript that it solves! You can also find some CoffeeScript Screencasts on PeepCode that I hear are good, but I have not watched them personally. There are also some Railscasts on CoffeeScript.

The other day I also bumped into an entertaining and informative slide presentation on CoffeeScript as well, called CoffeeScript: JavaScript Without the Fail. I am sure if you look around you will find plenty of other really good presentations on CoffeeScript.

In a nutshell, there are lots of good resources on CoffeeScript for free and for money.

CoffeeScript Example: Functional Binding and the Fat Arrow

I'm not going to bore you with a lot of examples on CoffeeScript as the documentation has plenty. I thought I would mention one near and dear to my heart, however, and that is the cool Fat Arrow in CoffeeScript that helps you maintain "this" within callback functions, etc.

In this example, I am using jQuery to bind to an element on the page and providing a callback function when the element is clicked. Because "this" in the callback function does not represent the person object but instead represents the element on the page (as expected by jQuery ) this won't work as you might think! Instead of displaying the name of the person, the alert box will display the name of the element on the page. This is one of those little challenges that new JavaScript developers have to get used to.

Person = function (name) {
    this.name = name;

    $('.person').bind('click', function (e) {
        alert(this.name + " says hello.");
    });
};

A quick solution for this little problem is to assign "this" to another variable and use that variable in the callback function.

Person = function (name) {
    var self;

    this.name = name;

    self = this;

    $('.person').bind('click', function (e) {
        alert(self.name + " says hello.");
    });
};

Since we are now using the variable "self" in the callback function as opposed to "this", the callback function will properly display the person's name in the alert box.

CoffeeScript provides a really nice helper for common situations like this. CoffeeScript introduces a fat arrow ( => ) in those cases where you want to maintain the context of "this" to be the current Function. In CoffeeScript you could code this as such:

class Person
    constructor: (@name) ->
        $('.person').bind 'click', (e) =>
           alert "#{@name} says hello."

Now granted there may be a whole lot there that looks foreign to you if you are not familiar with CoffeeScript, but notice the "=>" right after alert. This tells CoffeeScript to emit additional JavaScript that will ensure "this" within that callback function is scoped to the current function and not the element on the page! In addition, CoffeeScript does all kinds of other best practices with the code! The best way to see this is to download one of the CoffeeScript development tools mentioned below.

CoffeeScript Development Tools

It is really easy to use JavaScript. It is supported right in the browser. In fact, although I prefer to use Chrome as my web development browser, Firefox's Scratchpad is a great little add-in for writing JavaScript. CoffeeScript is a different story, however, and here are a few of the tools I use to development in CoffeeScript depending on what I am developing.

  • Try CoffeeScript on GitHub - If you just want to play with CoffeeScript, there is a nice little area within the CoffeeScript Documentation that allows you to type CoffeeScript while it shows you the JavaScript. This is perfect for starting out.
  • Try CoffeeScript Extension in Chrome - Okay, this is my favorite! A lot of times I just want to quickly code CoffeeScript snippets to see the generated JavaScript and I can do that with the Try CoffeeScript Chrome Extension. It doesn't have syntax highighting, but it does save the CoffeeScript code snippet and runs it!
  • Web Workbench - I am a hardcore ASP.NET MVC Developer as well as Orchard CMS Developer and spend a great deal of time in Visual Studio. The free Mindscape PlugIn, Web Workbench, supports CoffeeScript, Sass, and Less in Visual Studio!
  • CoffeeScript TextMate Bundle - I develop Rails and Node.js applications on the Mac using TextMate, and as you would expect, there is a TextMate Bundle that supports CoffeeScript! Jeremy Ashkenas, the creator of CoffeeScript, maintains the bundle himself!
  • JetBrains RubyMine - I also use RubyMine to develop Rails websites and it has support for CoffeeScript as well.
Lot's of good support for CoffeeScript whether you develop on a PC or Mac and whether you develop ASP.NET MVC, Rails, or Node.js applications.

Conclusion

I find myself coding in CoffeeScript more and more. It is a huge timesaver and CoffeeScript helps me implement JavaScript best practices. I also find it easier to read and maintain now that I have the hang of it.

If you are new to JavaScript, keep learning JavaScript! But at the same time, learn to code in CoffeeScript and understand how it helps create better JavaScript. This will give you a quicker understanding of some of the challenges of developing in JavaScript!

Good luck!