HiFi is the First Hosted CMS with CoffeeScript Support

For website developers time is a valuable resource. Website development requires time spent designing, time spent turning a design into HTML and CSS, and time spent making a site interactive with JavaScript programming. One of our fundamental goals with HiFi is to make build-outs move faster for web development professionals by providing the best power tools available. Today we’re excited to announce support for automatically compiling and minifying CoffeeScript, "a little language that compiles into JavaScript". CoffeeScript can improve productivity and reduce your code footprint compared to writing pure JavaScript.

What is CoffeeScript?

The project's own description captures it nicely:

CoffeeScript is a little language that compiles into JavaScript. Underneath all of those embarrassing braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

The golden rule of CoffeeScript is: "It's just JavaScript". 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 (and vice-versa). The compiled output is readable and pretty-printed, passes throughJavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

CoffeeScript is a power tool for JavaScript development. It borrows inspiration from other great languages such as Ruby and Python to produce a beautiful, concise syntax. For a feature-by-feature walkthrough of the language check out coffeescript.org, these are but a few of the highlights.

1. Function Syntax

JavaScript functions and callbacks are frequently to create interactive websites. Consider this jQuery snippet that toggles the behavior of clicking on a target div:

$('#target').toggle(
  function() { alert('First handler'); }, 
  function() { alert('Second handler'); }
);

Compare this with the equivalent CoffeeScript:

$('#target').toggle(
    -> alert 'First handler',
    -> alert 'Second handler'
)

Functions are denoted with the arrow syntax Whitespace is significant so statements do not end in semi-colons and function bodies are not wrapped in braces. You may also notice that parenthesis are optional when calling a function. CoffeeScript’s language design choices tidy the syntax up quite a bit.

2. Implicit Returns

This is a move borrowed from Ruby’s playbook and it is wonderful. Let’s take a look at a basic example, squaring a number. Here’s the JavaScript version:

function(x) { return x * x; }

CoffeeScript:

(x) -> x * x

The last expression of a function automatically returns. Notice, too, we have demonstrated how functions define parameters.

3. Everything is an Expression

A natural complement to implicit returns is the idea that everything is an expression, something Rubyists love. Consider the following function:

grade = (score) ->
	if score >= 90
		if score > 93
			“A”
		else
			“A-”
	else if 90 > score >= 80
		if score > 83
			“B”
		else
			“B-”
	else
		“C”

The letter grades are returned from within the nested ifs. This little snippet also shows off a cute little technique borrowed from Python which allows chained comparison operations. Variables can also be assigned the result of an if statement.

targetDiv = 	if foo
			$(‘#bar’)
		else
			$(‘#baz’)

Or, more concisely, using the then keyword:

targetDiv = if foo then $(‘#bar’) else $(‘#baz’)

4. Object Literals

Object literals can use YAML-like syntax and indention to define nested objects. Commas are optional. Consider the following JavaScript/jQuery snippet:

$.ajax({
	url: 		‘search’,
	success: 	function(data) { 
		console.log(data); 
	},
	data:		{
		query:	“Search Terms”,
		page:	1,
		results:10
	}
});

Here is the equivalent CoffeeScript:

$.ajax
	url: 		‘search’
	success: 	(data) -> console.log data
	data:
		query: 	“search terms”
		page: 		1
		results:	10

5. Simple Object-Oriented Classes, Inheritance, and super

JavaScript’s prototypal system of inheritance is powerful but awkward to work with. CoffeeScript’s classes are easy to define, extend, and work with. The @ symbol is an alias of ‘this’ or ‘this.’ when followed by a symbol.

class Vehicle
	constructor: ->
		@wheels = 1
		console.log ‘Vehicle constructed’
		
class Car extends Vehicle
	constructor: ->
		super
		@wheels = 4
		console.log ‘Car constructed’

Using CoffeeScript with HiFi

Using CoffeeScript with HiFi is actually no different than using plain Javascript! From the design tab, add a new script and give it a name with a '.coffee' extension. This will create a new CoffeeScript file for you to work with. When you are ready to actually include it in your template, just use the js tag:

{% js 'somescript.js,setup.coffee' %}

You can include as many scripts, Coffee or plain JS in this tag and HiFi will automatically compile your CoffeeScript into Javascript. It also knows when your CoffeeScript files change and recompiles them on the fly.

Once you are done developing, just add the min flag to your JS tag:

{% js 'somescript.js,setup.coffee' min %}

Now, in addition to compiling your CoffeeScript files, all files listed will be compiled together and then minified using the Google Closure compiler. HiFi will still recognize when your files change and automatically recompile and minify these for you. It's just that easy.