Using CoffeeScript In Django Projects

About a couple of months ago we released our open source projects page, it is a Jekyll site hosted on GitHub which we experiment with and show our projects on. It started with bare JavaScript and CSS files, included one by one, and then we started using grunt to concatenate JavaScript files.

As Python developers, we love the idea of not having braces and semicolons, so we decided to try this popular JavaScript preprocessor CoffeeScript that we had heard very good reviews of but have never tried.
Given that we only had a small JavaScript file it was easy for us to make the change. CoffeeScript is a preprocessor that removes braces, semicolons and provides syntactic sugar and overall syntax improvements to JavaScript, helping to produce cleaner and easier to read and write code.
After we transitioned, it was very clear that JavaScript files were easier to read and writing them was a more enjoyable experience.

Following we want to show you some of the nice things that can be done using CoffeeScript and give you a small look into its syntax.

Arrow and fat arrow -;, =;

The arrow
-; and fat arrow =; are used to define the body of a function.

# Sum two numbers.sum = (a, b) -;  a + bsum 1, 2# =; 3

This is equivalent to:

# Sum two numbers.
var sum = function(a, b) {
  return a + b
};

sum(1, 2);
# => 3

The fat arrow
= sets the context of the callback to the current this, and the @ is a shortcut for this.

Account = (customer, cart) - @customer = customer @cart = cart # Use attributes from `Acount` in jQuery callback.$('.shopping_cart').bind 'click', (event) = @customer.purchase @cart

Adapted from CoffeeScript docs

String interpolation with #{}

We often use pluses to concatenate string or have dynamic values in them, using CoffeeScript this can be simplified.

planet = 'Mars'
greeting = 'Hello #{planet}!'
# = 'Hello Mars!'

The existential operator ?=

This operator comes in handy when assigning a value to a variable that might not be defined.

age = null # Default age to `0` if not age.age ?= 0

List comprehensions

numbers = [1, 2, 3, 4, 5]

# Square numbers from array.
x * x for x in numbers
# = 1, 4, 9, 16, 25

These are a couple of things that can be done using CoffeeScript, however, you can find plenty more examples at
CoffeeScript docs page.

Using CoffeeScript in Django projects

The most common approach to use CoffeeScript in Django projects is to install the Node JS package and compile files with it using django pipeline, in this way we can have a seamless integration. To do so, follow these steps:

1. Download Node JS and install it following the installer instructions.
   
2. Install CoffeeScript command line tool globally issuing $ npm install coffee-script -g.
   
3. Install Django Pipeline following the installation guide.
   
4. Add CoffeeScriptCompiler to the PIPELINE_COMPILERS list and specify the location of CoffeeScript binary file which in our case is located at /usr/local/bin/coffee.
5. Load your CoffeeScript files inside a compress directly or specifying them in PIPELINE_JS.

Another approach is to use
Django Compressor. Instructions on how to do so, can be found in this StackOverflow question.

Conclusion

Over the time, we've found that using preprocessors like
Sass for CSS, has helped us a lot in managing complexity and keeping our projects easier to maintain, now, we can't wait to try CoffeeScript out in some Django projects and see how it works.

To learn more about
CoffeeScript follow these links

• CoffeeScript Documentation
• CoffeeScript Cookbook
• The little Book on CoffeeScript
• CoffeeScript Repository
• JavaScript to Coffeescript converter