Tutorials and snippets to get started with CoffeeScript

by Jean.

JavaScript is definitely an important part of a website as it allow the developer to interact directly with the web browser. Since 2005, lots of new JavaScript techniques and tools such as Ajax and jQuery became extremely popular and made the web a better place. Today, I’m introducing to you CoffeeScript, a new language that make JavaScript better and simpler.

What is CoffeeScript?

To keep it simple, CoffeeScript is a little language that compiles into JavaScript. If you ever coded in languages such as Python or Ruby, you’ll probably love CoffeeScript a lot. Instead of awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart.

The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

Installing CoffeeScript

Installing CoffeeScript is not hard at all. The first thing to do is to make sure that you already installed a working copy of the latest stable version of Node.js as well as npm, the Node Package Manager.

Once done, you can install CoffeeScript by running the following command:

npm install -g coffee-script

CoffeeScript is now installed. Next step is to compile a .coffee file into a .js file. Use the following syntax to do so:

coffee --compile example.coffee

CoffeeScript.org is the official website of the CoffeeScript language. Don’t hesitate to visit it, it’s full of helpful ressources.

Tutorial: Basics of CoffeeScript

A great tutorial that demonstrate all you need to get started with CoffeeScript: installation, configuration and first lines of codes.
View tutorial

Tutorial: Rocking out with CoffeeScript

A very complete tutorial that will make you a real CoffeeScript coder: it will show you how to write your code, how to indent, how to use classes, conditionnal statements and more.
View tutorial

Tutorial: Creating an iOS-like Home Screen with CoffeeScript

Now, let’s code something concrete: this tutorial will show you how to create an iOS-like home screen, using CoffeeScript. A great way to learn by the example.
View tutorial

CoffeeScript snippet: Shorten url using Google’s Goo.gl service

Short urls are very useful, especially on social networking sites like Twitter. Want to be able to create your own short urls using Google goo;gl service? No problem, just use the following code. Please note that you’ll need your own Google API key for the code to work.

shorten_url = (url, success_callback, error_callback) ->
  xhr = Titanium.Network.createHTTPClient()
  xhr.open "POST", "https://www.googleapis.com/urlshortener/v1/url?key=" + apikey
  xhr.setRequestHeader "Content-type", "application/json"
  xhr.onload = () -> success_callback xhr.status, xhr.responseText
  xhr.onerror = () -> error_callback xhr.status, xhr.responseText
  content =  "{\"longUrl\": \"#{url}\"}"
  xhr.send content

→ Source: http://developer.appcelerator.com/question/125880/…

CoffeScript snippet: Read in a file

CoffeeScript make reading files very easy, as shown below:

fs.readFile 'data.txt', (err, data) -> fileText = data

→ Source: http://ricardo.cc/2011/06/02/10-CoffeeScript-One-Liners-to-Impress-Your-Friends.html

CoffeScript snippet: Fetch and Parse a XML web service

Fetching and parsing XML or .json files from web services is quite common when coding modern web applications. Here is how you can do it using CoffeeScript:

request.get { uri:'path/to/api.json', json: true }, (err, r, body) -> results = body

→ Source: http://ricardo.cc/2011/06/02/10-CoffeeScript-One-Liners-to-Impress-Your-Friends.html

CoffeeScript snippet: Finding substrings

Another very common task, made easier with CoffeeScript:

message = "This is a test string. This has a repeat or two. This might even have a third."
message.indexOf "This", 0

→ Source: http://coffeescriptcookbook.com/chapters/strings/finding-substrings

CWC Special Deal!

Get one year of quality hosting + domain from A Small Orange for only $40 with our exclusive deal!

Featured WordPress Theme

Bridge - Creative Multi purpose WordPress theme

  • http://www.100webhosting.com Jasmine

    CoffeeScript looks cool. I like the iOS Home Screen script, the demo looks really awesome!

  • http://docraptor.com/ Tyler

    Awesome! I’m going to spend all of February learning something new every day and blogging about it, and this tutorial will definitely help. I’ve been meaning to look into Coffeescript for a while anyway.

  • http://www.geniusthesis.com/ Bharat Mandava

    CoffeeScript is really awesome. Cool tutorials are listed here, will try them.

  • http://www.crearedesign.co.uk adam

    Cheers for a sharing this, i personally haven’t heard of coffee script before, however from reading this blog i can see just how powerful this framework is and how popular this could be in the future. Its definitely something I am going to start researching into, as i believe this could be the next big step in web development.

  • http://IMNewsWatch.com Phiil Cullum

    It’s been 40 years and 20 days since I wrote any serious code. I feel a need to get back to my roots a bit, but I am concerned about the learning curve since my synapses don’t function as well as they did 40 years ago. Is CoffeeScript less challenging than, say, C++ or Java? Would it be a good choice for re-acclimating myself?

    • SiM

      Are you kidding? Coffeescript is a simple language and u can practice on a REPL console as much as u like!