Insights
Using CoffeeScript In Django Projects
Pablo Vallejo
2 min read.
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 ?= 0List 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:
- Download Node JS and install it following the installer instructions.
- Install CoffeeScript command line tool globally issuing
$ npm install coffee-script -g.
- Install Django Pipeline following the installation guide.
- Add
CoffeeScriptCompilerto thePIPELINE_COMPILERSlist and specify the location of CoffeeScript binary file which in our case is located at/usr/local/bin/coffee. - Load your CoffeeScript files inside a
compressdirectly or specifying them inPIPELINE_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
Vera Mazhuga