Use CoffeeScript To Write Your JavaScript

JavaScript has become the lingua franca of the Web and has gained a lot of popularity in recent years. Many frameworks and technologies have been inspired by JavaScript, and it now powers most websites. CoffeeScript helps you to produce JavaScript, without actually writing too much code.

Even though JavaScript is a powerful language, it has a few drawbacks such as the structural programming style. JavaScript has been populated with braces and semicolons in its source script, which produces a lot of coding for simple tasks.
CoffeeScript, on the other hand, is a language that compiles into JavaScript. The underlying idea for CoffeeScript is ‘JUST JavaScript!’. CoffeeScript enables you to produce the JavaScript without writing as much code as you have done previously with JavaScript.

The history of CoffeeScript
CoffeeScript originated on December 13, 2009. Jeremy Ashkenas released CoffeeScript 0.1.0 with documentation and a compiler written in Ruby.

On February 21, 2010, CoffeeScript 0.5.0 was released. This time the compiler was replaced by the compiler written in CoffeeScript itself.
February 25, 2013, saw CoffeeScript 1.5.0, which was a significant release supporting ‘Literate Programming’.

Dropbox announced on September 13, 2012, that its browser side codebase replaced JavaScript with CoffeeScript.

Installing CoffeeScript
To install CoffeeScript on your Linux machine, first install npm (node package manager) on your machine and run the following command in a terminal:

sudo apt-get install npm

Once you are done with the installation of npm, it’s time to install CoffeeScript.
Please enter the following command in your terminal:

npm install -g coffee-script

After that, issue the following command using the terminal:

coffee -v

It will show you the version of CoffeeScript installed.

Why CoffeeScript is good for you
There are plenty of other languages out there, so what makes CoffeeScript the 11th most popular language in Github? Why should you consider learning CoffeeScript? Those were exactly the questions I asked when I first heard about CoffeeScript.

Keep in mind that the sole purpose of CoffeeScript is to produce efficient JavaScript, without writing much code. CoffeeScript also focuses on highlighting all the good aspects of JavaScript with simple syntax.

Since CoffeeScript has been inspired by Python, Ruby and Haskell, it adopted the syntax and coding style from them, which makes it very unique and powerful. Also, CoffeeScript produces one-third the amount of script that the original JavaScript does. This means you can write a typical ‘Hello world’ program in a single line, whereas in JavaScript you have to write three lines. So now you can enjoy the simplicity of Ruby with the power of JavaScript.

CoffeeScript might come in handy when you’re familiar with the basics of JavaScript, because only the syntax is different. But JavaScript is at the core of CoffeeScript, so it is advisable to learn the basics of JavaScript first.

Your first sip of CoffeeScript
Let’s start with something small ‘a Hello world’ programme will suffice for now. Open your favourite text editor and type the following line:

console.log 'Hello, World'

Save the document with the extension hello.coffee, then go to terminal, and change to the directory where the above script is stored. Run the above script in the terminal by issuing the following command:

coffee hello.coffee

You will see the greeting in your terminal. Now let us examine how to convert this CoffeeScript into its equivalent in JavaScript.

Type the following command in your terminal:

coffee -c hello.coffee

The flag -c stands for compile, which means it is compiling your CoffeeScript to JavaScript. You will find a hello.js file in the same directory you’re in. When you open that JavaScript file, it will show you the compiled JavaScript:

(function() {

console.log('Hello, world');

}).call(this);

There are several other useful options available for your CoffeeScript, but I’d like to focus on two options that could be a great help to you when you’re working with CoffeeScript.

The option -p shows the compiled JavaScript on your terminal once you’re done with writing your CoffeeScript. This could be useful when you want to peek into the desired JavaScript on the terminal but not on the separate JavaScript file, so that you don’t populate your directory with a lot of files, unless you’re satisfied with the desired output.

The option -w stands for watch’, which allows you to keep an eye on things when you’re making changes to your script. When you combine the -c (compile) option with w as -cw, CoffeeScript runs in the background and recompiles the source script as soon as you make changes. You don’t have to manually recompile every time you make changes in your script. CoffeeScript will take care of it for you.

The REPL
Another interesting feature of CoffeeScript is REPL (Read-Evaluate-Print-Loop). Similar to Ruby’s irb (interactive ruby), when you run CoffeeScript without any arguments in your terminal, the prompt changes to something like this:

coffee>

You can invoke the same by using the following options:

coffee -i

Or if you want something else, you can use:

coffee interactive

This feature will be extremely useful when you want to evaluate something on the fly. If you want to deal with some expression whose output you are not so sure of, you could use it on the REPL and see what the actual output is.

Running CoffeeScript in your browser
CoffeeScript is capable of running anywhere JavaScript runs, which includes your browser!
Yes, you can run your CoffeeScript directly on the browser without compiling it to JavaScript, but first you have to include the CoffeeScript compiler on your Web page. You can download the compiler from the CoffeeScript website.

Now let us look at how to use CoffeeScript in your Web page. Open your text editor and type the following code:

<html>
<head>
<meta charset="utf-8">
<title>Names</title>
</head>
<body>
<script src="coffee-script.js" type="text/javascript"></script>
<script type="text/CoffeeScript">
name = prompt "What is your First Name?"
name2= prompt "What is your last Name?"
fullname=name + name2
alert "Hello, #{fullname}"
</script>
</body></html>

Please note that in the 7th line, I’ve included the CoffeeScript compiler in the coding. Now save this file in your Web server and run it. You will see that CoffeeScript runs in your browser.

The advantages of CoffeeScript
CoffeeScript has numerous advantages over JavaScript. I am pointing out a few important ones here.
1.    Very little coding is involved when programming in CoffeeScript, as compared to JavaScript.
2.    All the good features of JavaScript are present in CoffeeScript.
3.    You don’t have to debug any } in your script.
4.    You can use any existing JavaScript library seamlessly with CoffeeScript.
5.    With the proper use of whitespace you can make your script more readable as well as maintainable.

The disadvantages of CoffeeScript
CoffeeScript has only a few disadvantages. When you’re using CoffeeScript, there’s an additional compilation step involved in the process, but Jeremy Ashkenas says that the CoffeeScript team is trying to mitigate this in the future. Another limitation is that there are only a few resources available for this language, but when you want to learn CoffeeScript, the coffeescript.org website is a great place to start. You can find many examples and also resources available for CoffeeScript.

The final word
CoffeeScript is targeted at JavaScript programmers. Its sole purpose is to remove all the rough edges from JavaScript and provide a smooth way of programming in JavaScript. CoffeeScript can be fairly simple to programmers who began with JavaScript and also to the people who are from a Python and Ruby background. But those who have a background in C or Java might feel a little different. Still, CoffeeScript is definitely worth a shot for every programmer. Now, programming in JavaScript has an easy way and a hard way – the choice is yours.

References
[1]    1.http://Coffeescript.org/
[2]    http://en.wikipedia.org/wiki/Coffeescript
[3]    CoffeeScript: Accelerated JavaScript Development by Trevor Burnham