CoffeeScript: Learn Your Coffee

[Eric Hansen]

JavaScript is a very popular language, whether you like to use it or not. I, personally, have always loathed JavaScript (and Java itself), even with my rising interest in scripting languages such as Python.

When you look at how JavaScript has morphed, however, it is quite interesting. Long gone are the days of simply going to DynamicHTML and copy/pasting the JavaScript code to make marquees happen. Now you can write websites that render perfectly fine in mobile or desktop without even writing two different versions of the website (which, I do know is also thanks to CSS but JavaScript helps out a lot as well). There’s also a plethora of libraries to help in development, with some popular ones being jQuery, Prototype.js and YUII.

Now there’s even advancement in what can be considered server-side JavaScript as well. The most popular from my experience being Node.js, but there are others. Even better though, is that there’s a flavor of Node.js that has syntax very similar to languages such as Ruby or Python, which both are growing very strongly in the realm of web application development/deployment/etc… Welcome CoffeeScript. It requires Node.js to run, but can be considered a language in itself.

This guide is going to walk through installing CoffeeScript and writing a very simple “Hello World!” application in it. Mostly due to the fact that I’m still learning the language itself too, but also because I don’t want to throw a lot of “this language does this” when I just want to highlight a simple feature.

Install
This will be installed in an Ubuntu LXC container. While being LXC doesn’t really matter, the process to install and run CoffeeScript (CS) may vary.

As always you’re going to want the newest packages, so update and upgrade whatever you need:

root@coffeescript:~# apt-get update && apt-get upgrade
[...update output trimmed…]
Fetched 3,358 kB in 3s (1,037 kB/s) 
Reading package lists... Done
Reading package lists... Done
Building dependency tree 
Reading state information... Done
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

CS is based on Node.js, so we need to install that and NPM (Node.js Package Manager):

root@coffeescript:~# apt-get install curl build-essential openssl libssl-dev nodejs npm

If not already installed, then this will also install the build-essential packages as well (gcc, make, etc…). For me this was ~46 packages, 35.8 MB to download and total 97.8 MB space used when all was said and done.

When trying to search NPM for CS, I ran into the saddening “self-signed certificate” error:

root@coffeescript:~# npm search coffeescript
npm WARN Building the local index for the first time, please be patient
npm http GET https://registry.npmjs.org/-/all
npm ERR! Error: SSL Error: SELF_SIGNED_CERT_IN_CHAIN

One of the things you can do is update NPM to the latest package:

npm install npm -g --ca=null

However, if you have the luck like me, you’ll still get the same error. So, what you need to do is basically tell NPM to use known registrars (per Node.js’ documentation):

npm config set ca=""

Then you can run this:

root@coffeescript:~# npm search coffeescript

No errors! However, it’s going to build a database of the packages, which can take a while at first itme use.

After that’s finished, we’ll install CS:

root@coffeescript:~# npm install -g coffee-script

Please take note of the “-” in coffee-script. If you type it in without that, you’ll see an error such as:

root@coffeescript:~# npm install -g coffeescript
npm http GET https://registry.npmjs.org/coffeescript
npm http 304 https://registry.npmjs.org/coffeescript
npm WARN deprecated [email protected]: You misspelled 'coffee-script'
> [email protected] preinstall /usr/local/lib/node_modules/coffeescript
> node super-evil-script-omg-for-reals.js
You misspelled 'coffee-script'

Making a world to say hello to
We’ve got Node.js, NPM and CS installed, so lets make a “Hello world!” program. I say program because CS can compile coffee scripts and convert it to JavaScript, so we’ll look at that as well.

In your text editor, put this in there:

console.log(“Hello world!”);

Save it as hello.coffee, and now go to your terminal:

coffee hello.coffee

This should output:

root@coffeescript:~# coffee hello.coffee
Hello world!

So we got this, lets now make it into usable JavaScript! The order matters here (seems the “-c” switch needs to be last), so we’ll compile this one script to hello.js:

root@coffeescript:~# coffee -o . -c hello.coffee
root@coffeescript:~# ls
hello.coffee  hello.js  node_modules

The “node_modules” folder can be ignored (should also be empty). We’ll peak into the hello.js file:

// Generated by CoffeeScript 1.6.1
(function() {
console.log("Hello world!");
}).call(this);

If we put this into a simple website and loaded it into our browser, and went to our browser’s console log, you’ll see “Hello world!” is printed.

Conclusion
This is a very simple guide to get your feet wet into CS, and probably adds very little. However, this does help get you introduced and set up with it so you can learn more, read the tutorials and become familiar with your coffee (pun intended!).

 

[DevynCJohnson]

I love CoffeeScript. I know some JavaScript and I can definitely say that CoffeeScript is better. I learned CoffeeScript very easily and I love how CoffeeScript cross-compiles to JavaScript very easily. Code can be written more quickly with CoffeeScript than JavaScript.

CoffeeScript:

square = (x) -> x * x

Equivalent JavaScript:

var square;
square = function(x) {
   return x * x;
};

I have never had an issue with the cross-compilation. CS converts to JS very well.

http://coffeescript.org/

 

[Eric Hansen]

My gripe is that it depends. What you did is compile the CS to JS, which is fine. But normally someone would write the JS as:

function square(x){
    return x * x;
}

CS just makes the code more readable, especially if you're coming from a background like Python or Ruby where indentation makes all the difference.

 

[ryanvade]

I prefer to have more brackets, just seems more clean.

 

[Eric Hansen]

I prefer to have more brackets, just seems more clean.

I hear that a lot about languages like CS, Python, etc... from people who are familiar with PHP, C++, etc...

I feel indentation makes it cleaner, compared to brackets that can look like this:

public function someFunction($arg1, $arg2){ $arg1 = "linux"; $arg2 = "org"; echo("you are visiting ".$arg1.".".$arg2); }

It's completely legit, but not as easy to read as something like:

def someFunction(arg1, arg2):
  arg1 = "linux"
  arg2 = "org"
  print("You are visiting %s.%s" % (arg1, arg2))

Or in CS:

someFunction = (arg1, arg2) ->
  arg1 = "linux"
  arg2 = "org"
  console.log "You are visiting "+arg1+"."+arg2

 

[Jon Brookes]

It depends on the languages you have come to programming with I think. Of course you can write code like C, Perl etc in a single line. Some find (in Perl) a peculiar kind of fun in writing code that is 'obfuscated' in this way. However because you can do a think doesn't necessarily mean you should. If you write in Perl you can follow proper standards for indentation, using 'perltidy' to automatically format your code in a way that is easy to read ( just as readable in my opinion as some Python or Ruby ). Another language, 'Go' has it's own formatting tool that is similar in principle called 'gofmt' which enforces proper indentation and formatting.

Any how language indentation .vs. brackets aside, just to say I liked your article on Coffeescript and thank you for publishing this. It has been helpful for me to get it running under Ubuntu. I am using this to understand CS that is in projects I am looking at on Github.

 

[DevynCJohnson]

@Jon Brookes , Linux.org has an article index that lists all of our articles and sorts them by topic - http://www.linux.org/threads/reading-guides-indexes.6034/

Here are our programming articles - http://www.linux.org/threads/programming-development-reading-guide.6359/