Coffeescript: Javascript made easy

I have always appreciated the things you can achieve with javascript. The power of javascript has been shown over the years and there’re very few web sites which doesn’t use Javascript today. Although javascript is powerful and great but the syntax and debugging had never been so easy. Writing a object oriented javascript required skill and discipline and lots of patience. And those who are programming javascript kudos because you are all doing great work!

Javascript is an object oriented but a prototypical language where harnessing the power of prototypal inheritance is a little cumbersome. The jQuery library did help us all by taking care of the DOM but it always lacked the structured programming like OOP, it simply isn’t designed to help you organize your code outside of vanilla JavaScript. Then there is Prototype JS framework which  lets you write OOP style dynamic web applications and Moo4q by Ryan Florence also gives you the ability to write OOP style on top of jQuery.

Then in 2009 came Jeremy Ashkenas released Coffeescript, a programming language that transcompiles to Javascript. Writing applications and managing your code can never been easier because of the simplicity used in Coffeescript.  “The language adds syntactic sugar inspired by Ruby, Python and Haskell to enhance JavaScript’s brevity and readability, as well as adding more sophisticated features like array comprehension and pattern matching. CoffeeScript compiles predictably to JavaScript and programs can be written with less code (typically 1/3 fewer lines) with no effect on runtime performance“- [wikipedia].

Speaking of fewer lines of code and simplicity here’s an example of simple Person class in coffeescript

class Person
  constructor: (name) -> 
  @name = name

Defining constructors (functions that get invoked upon instantiation) is simple, just using function named constructor. This is akin to using Ruby’s initialize or Python’s __init__. Which compiles to javascript as this

var Person;

Person = (function() {

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

  return Person;

})();

By prefixing argument’s with @, CoffeeScript will automatically set the arguments as instance properties in the constructor. You can try playing with Coffeescript here. Coffeescript is website a great resource for learning.

Installing Coffeescript:

You can download and install nodejs and then use npm to install coffeescript in your environment with the following command:

 npm install -g coffeescript

You can then type coffee and it will invoke the interactive coffee. Or you can start writing your script in a *.coffee file and compile to js with following command and require in your html file for testing.

 coffee -c somefile.coffee

Then it will generate a samename.js file to require in your html. You can also direclty use coffee files in your html, I’ll show an example in later post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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

%d bloggers like this: