Coffeescript: To switch or not to switch

For a long time during the development of 3DTin I was toying with the idea of switching to Coffeescript (“CS” henceforth) from Javascript (“JS” henceforth). I was looking for a comprehensive guide about what are the pros and cons for such move. I didn’t find any such document at the time. Now I have been using CS on-and-off for 3DTin in past 6 months. I have learnt a lot about the potential benefits and pitfalls of CS. This blog post is a collection of what I’ve learnt. Hopefully it will benefit those who are wondering whether to jump the boat. But note that, my experiences are not conclusive. I am still not sure that complete switch to CS is a good thing for every JS project.

Let’s get started…

Coffeescript is not a language

A better characterization of CS is a set of preprocessor macros (think of C preprocessor). It’s just that Coffeescript is such a complete set of macros that it can pass as a language. It’s more like a shorthand for JS. Why is it important to think it like this? For two reasons:

1. You cannot get away from learning (or better mastering) Javascript. One of CS’s design goals is to stay as close to JS as possible and not implement language features that JS cannot natively support. That means even if you use CS everywhere in your project, you should have good understanding of JS.

2. You can use CS alongside JS. Since CS is merely a shorthand for JS, some files in your project can be written in CS, while other are written in plain JS. That helps in adopting CS in already big Javascript codebase, like ours.

If you call Coffeescript a language written on top of Javascript, many people right away assume it’s bound to be slower than corresponding Javascript (which is never true). (Do C preprocessor macros inherently make the generated C code slower? Not unless they are defined so)

The iterations

Iterating is something we do so many times. Therefore writing “for(int i=0, l=arr.length; i<l; i++) { … }” every time is very painful, especially if you are used to Python’s way of iteration “for obj in arr: …”.

In pure JS you have to use the long form for incantation. There is `forEach` in modern JS implementations, but who knows in which browser it breaks in what way. Our solution for this problem is underscore.js’s _.each function. It is everywhere in our code.

Only recently however I realised, that liberal use of _.each can lead to significant slow downs. If the loop count is very large compared to the time spent in the body of the loop, you will see clear improvement in speed by using old-fashing for loop instead of _.each. CS gives you a compact way of iterating over an array and it automatically converts it to the most efficient JS code for doing it.

This iteration in CS
translates to this in JS

Best of both the worlds.

Named arguments

Naming the arguments is the best way to implicitly document the source code.

Moreover, in an ever-evolving environment the function signatures keep changing very often. If you rely on positional arguments, every time you add a new argument to the function, you have to check all the places from where it’s already being invoked and check that the new argument doesn’t break them. In JS, most of the times such new arguments are optional for the logic of the function, i.e. they can be undefined. Therefore they can normally added at the end of the argument list, so that the existing invocations won’t need any change. For example, your current function signature is function foo(arg0, arg1). You decide to accept another optional argument newArg. You can change definition of foo to function foo(arg0, arg1, newArg). All the existing invocations of foo won’t have to be changed, provided the body of foo handles newArg being undefined properly. But what if it makes sense to add newArg before arg0?

In such circumstances, it helps to have named arguments. JS doesn’t support them.

For that matter CS also doesn’t support them seamlessly, but it’s easy enough to do. You can also add a line of code to gracefully define default value for an argument.
I learnt this trick from this Stackoverflow question.

Built-in classes

There are many ways to define Classes in JS, because they aren’t natively supported. We use Base.js in 3DTin. With CS, classes are supported as part of language definition. You can define your classes in a more familiar OO syntax without worrying about all the black-magic with prototypes.

Avoids variable leaking

In JS it’s very easy to forget to add var before a variable, resulting in that variable getting defined in global namespace. Do not think that creating scopes with (function() { … })() blocks is going to help. It helps only if you define the variable with var, then it won’t be visible outside that scope. But if you forget to add var, it will leak and will get defined as member of the window object. Here’s a proof.

In CS you don’t have to worry about explicitly declaring any variables. The CS compiler automatically generates the necessary var declarations for all the variables you use. IMO this is one of the biggest advantages of CS.

this. becomes @

In object oriented JS code, you are always going to access members of the class from inside it using this. prefix. If there was a more compact way to do this, it could save a lot of keystrokes and source code real-estate. CS designers realized that and have provided a shorthand for this usage.

The Fat arrow

There are lots of callback functions in typical JS code. Classes are also functions in JS. That leads to a problem with the use of this keyword sometimes. Inside the body of a function, this refers to the context of that function. Inside the body of a function that is part of a prototype, this context is the instance of the object. Therefore if you have written this, inside a callback function body, that is defined inside a prototype member function, which is it going to point to? It points to the callback function’s context. But many times you assume it’s referring to the instance of the object. This is a common mistake a developer makes while starting with JS. If you want to refer to the instance of the object from inside the callback function, then this is the solution for it.

CS Fat arrow notation lets you write this in a more compact manner.

The use of fat arrow => automatically tells CS compiler to define a reference to outer context, so that the code inside the closure body can use simple @ notation and still resolve to the right context. We have such pattern all over the code. It’s easy to imagine then how cleaner our CS code looks than the original implementation.

return is not necessary

CS automatically adds a return wherever it deems it necessary (and also unnecessary). This is a huge benefit while writing functional code.

You can write
instead of

**
**String formatting

Are you tired of writing
CS makes it easy for you.

**
**Parenthesis during function calls - can be skipped (almost)

CS lets you skip Parenthesis during function invocations. This can be a good thing or a bad thing. It can make your code look more beautiful, but its overuse can make it confusing. Also the skipping rules are not consistent. Take a look.

**
**Braces and commas for dictionaries - can be skipped

Similar to parenthesis, you don’t have to use braces while defining dictionaries / maps / objects. CS will automatically infer their structure based on context or indentation. This contributes a lot towards cleaning up redundant tokens from your source. If you are going to put each name-value pair on new line, you can get rid of commas too.

Translates to

**
**Spanning source lines

Since CS infers a lot of things from indentation, when you try to break a long line of source into multiple lines, you can trigger compilation failures or at worse mis-interpretation.

In closing
In past 6 months I have used CS for all new source code and rewritten some JS code in CS if it made sense. I clearly saw certain benefits, but also some pitfalls. Not sure which path I will continue on. But I hope this post will help you make your own decisions.

It’s of enormous help to have a continuously running watch script that compiles coffeescript files as you save them. I’ve written such script that watches all coffee, jade and less.css files in a directory tree and compiles them as soon as they change. You can find it here.


Home


Archive

2018

Violet end of spectrum

Vipassana Meditation

Why gamers like pixelated games

2017

Collecting Vs Hoarding Netflix

Game Design tip for Programmers - Less Automation

Review Ghost In The Shell - The blinds scene

Why Electron is the best development platform?

Project Dialog

2016

Don't Panic

The Entanglement Pattern

The flying cars analogy

Road Trip of Atlantic Canada

Having done attitude

2015

Before fixing performance issues

No Exams, Yes Video games

Podcasts Français

2014

Quotable Quotes

Conned?!

2013

Uruguay's President

New rules for Formula 1

Software Engineering Code of Ethics and Professional Practice

Something's missing

2012

Coffeescript: To switch or not to switch

Water from air

The single most reason that keeps me using Vim

Time travel fiction

When your git branch diverges from your remote

Something like Olivia - John Mayer

Online courses - New technology, Old rules

Kelsey Grammer is spectacular

Why Patriotism doesn't make sense

Why sea steading is important to pursue?

Prometheus

Rolling back latest git commit

Google Lunar X Prize

iTunes Download stopped (err =9006)

Good essay on user centric software design

Why we need to explore Seasteading?

2011

Master pieces from screen

How to write interactive CLI utility in node.js

The Gods Themselves by Isaac Asimov

Why OpenGL ES is so hard?

How to print stack trace anywhere in Javascript

It's not fair to compare Android with Internet Explorer

How to debug WebWorker threads?

Why can't I criticize Government if I don't vote? I sure can.

Elon Musk quote

Don't label yourself

Why the hi-tech minds are writing Social apps?

Truce with exercise

JavaScript is the next C

Ever growing todo list is a good sign for creative projects

Lesser women in tech... So what?

HTML5 offline cache - use swapCache carefully

How Wikipedia and Flattr can together change the World

2010

Discovering LastPass

Functional programming in Javascipt using Underscore.js

Youtube ETA - Chrome extension

Why secure airports when it's planes that fly?

Mac book red light audio jack problem on Linux

How to save HTML5 canvas image to Google App Engine

Why don't they publish eBooks for free but with embedded ads?

Silicon Valley and Hi-tech

Reality distortion field around

Indirect experiments

Music sharing

ReaderScope 2.0.6 - Find Comments

ReaderScope 2.0

predictably irrational

ReaderScope upcoming changes

Tuxmac

Why "Open" is not the first concern of user?

Mutt, Gmail, gdata, notify-send: A Perfect Email solution

Are you the Matt Damon of your game?

ReaderScope 1.9 - OAuth

New app "Find Comments"

@font-face-lift

ReaderScope 1.8.{2,3} - new authentication and global share

Portable apps for iPhone, Android, Pre, n900 - Can Processing.js help?

ReaderScope 1.8.1 - rethinking features

ReaderScope 1.8 - Random

Android fragmentation : How big a deal is it?

on Dropbox

iLikeIt

ReaderScope v1.7 - Widget, new Icons and .... Ads

on Git: tips for SVN users and Git in Dropbox cloud

How to do an online IDE for Android app development

Anti Asserts

Bono's top ten list

Make Android speak your Twits with "TwitSpeak"

2009

Reality of colors

Talking Twitter client

ReaderScope 1.5 - quicker, better, prettier

Preview android.R.drawable.* images

Is definition of "Evil" changing?

on Music: Battle Studies

ReaderScope 1.4 (with a Theme Pack)

On Chrome OS

Black on White

Android AsyncTask template

The AND-OR problem of laptop and mobile phone

ReaderScope v1.3.3 - offline podcasts

ReaderScope v1.3.2 - Social Channels

ReaderScope v1.3 - Beyond Google Reader

Frets on Fire for Maemo - Update

ReaderScope 1.2.7 - Podcasts, Expanded View

Sprint HTC Hero problems with ReaderScope

ReaderScope 1.2.3 - Search

ReaderScope 1.2.1 - Auto Login

ReaderScope v1.2

ReaderScope 1.1.3 - SDCard storage

Crash report for Android App

Wifi and Battery

ReaderScope 1.1.2

ReaderScope 1.1.1 quick-n-easy features

ReaderScope 1.1 - Social Beacons

ReaderScope 1.0.2 - making deep cache simple

ReaderScope 1.0.1

ReaderScope 1.0

Detecting HTC magic on Fedora

ReaderScope beta4 - offline fun

ReaderScope beta3 - Tweet the news

ReaderScope Beta2

ReaderScope beta1 is out

Intercepting Up/Down keys from bash script

Makeshift XML beautifier in python

HTC Magic (Indian version) - expectations and facts

using android AsyncTask

Android development with Vim + Eclim

Cutewit (preview)

Einstein's Dreams

Preprocessing the GUI

Evas + Inkface in v0.2.5

easy source

FoF - PyOpenGL = miniFoF (possibly for n810)

FoF update

Twitter client with inkface-pygame v0.2.2

Frets on Fire on Maemo 5 (Fremantle)

Static IP configuration on Fedora 10

Inkface+pygame v0.2.0

Smooth scrolling with Inkface+pygame

Inkface v0.2 update and automated GUI testing

Testing Android (Koolu Beta 3) on Openmoko Freerunner

Clutter animation paths with Inkscape+Inkface (v0.1.3)

Turning a page

Planning Inkface v0.2

Debian repository on Google App Engine

Inkface + Clutter

Inkface v0.1.2, Twitter-inkface client

2008

Inkface update

Debugging python reference counts

Paul Graham nails it again!

Fedora 10 on MacBook 2,1

A great essay

Thanksgiving at Crater Lake

Digital SLR buyer's guide

more fun with notify-send

(k)ubuntu 8.10 - not ready for my home yet

Migrating to Google App Engine

Android opened - first looks inside

Has it started?

Inkface v0.1

Musical discovery of the week

Die Berlin-Affäre

aus Berlin

Inkface - SVG based GUI design

Script fun

Visualizing source code

OpenMoko photo tour

New connection with the past

George Carlin - favorite clip

temperature

80-20 rule

Python fun

OSiM'08 Berlin, Germany

Of games

"Wine" tasting

Today's slashdot and open source

Cost of Open Source

Lions for Lambs

Ubuntu reviewed

Flickr uploads from n810

Cringely and Paul Graham

Accelerometer brainstorming

Clutter Webkit

OSiM USA 2008 - Day 2

OSiM USA 2008 - Day 1

Google code

Gr8 commercial

OSiM USA 2008, see you there

OpenMoko, Android and a great hacking post

two great videos

Blog from nokia tablets

2007

cool n770 hack

Picasso

Colbie Caillat

Firefox 3 is brilliant!!!

XML RPC server inside apache mod_python

best effort technologies

coding Monalisa

formula of a horror movie

next desktop jump

The "Screen"

Nice review article on virtualization technologies

Once again... a quote from 'Troy'

Story of a random number

quotes from George Carlin

"from time import sleep"

Sea surfing under the Golden Gate

Trip videos

2006

across two hours

What I read...

How do I backup to Amazon S3 storage service

Stranger than fiction

Gas prices... seems like big scam

Another nice quote

Hilarious nerd comment

Programming & Painting

Why do we like fiction?

Troy

If Harry Potter were a computer hacker ...

Gentoo, XGL, HGG

Henry Ford

VI - A capable IDE

New blog

Safari Bookshelf

2005

Back to the L4

Quotes

GCC 2.95 rpms

repeat (ps | grep) = filtered top

Halo fixed on ATI Mobility Radeon 9000

DirectX Installation Problem

Warning: const is a keyword in ANSI C

Not much on L4 front

Last two weeks

GRUBing

Stumbled on HURD

Installed HURD console

Make problem solved

2004

Handy way to create stack trace