CoffeeScript has been around for a few years but has been gaining a lot more traction recently. For those unfamiliar with this language it allows you to write Javascript using a more Ruby-esque syntax. It’s brevity and clarity have made it increasingly popular and I thought that it might be good to find a way to make use of it from within VisualForce pages.

CoffeScript is “compiled” to JavaScript which is then sent to the users browser, this means that browsers don’t need to know anything about this new language but developers can write more robust JavaScript quicker. And whilst this is great news for browsers it’s not so great for the prospects of using CoffeeScript on the Force.com platform. Why? Well, the way that things are expected to happen in the CoffeeScript world means that we need a compiler that can run server side. Which in turn means we need a CoffeeScript compiler written in Apex.

Obviously writing a compiler in Apex isn’t beyond the realms of possibility but it is beyond the realms of what I’m willing to do to get this to work at the minute. It is also probably the best solution to the problem but I decided to look for an alternative.

My first thought was inspired by the fact that CoffeeScript is written in CoffeeScript. Given this and the fact that CoffeeScript is just JavaScript I realised that it must be possible to run the CoffeeScript compiler in the user’s browser. Unsurprisingly this is true and has been done. In fact if you include the coffee-script.js script and then tag your CoffeeScript in <script type="text/coffeescript"> tags the CoffeeScript compiler will process your scripts in the browser. Nice. Well kind of. It seems a bit wrong in my mind to be foisting this effort onto your users and the approach is frown on by the CoffeeScript community in general.

So, whilst this approach would have made it possible to use CoffeeScript in VisualForce I set out to look for another way of achieving this that was cleaner to the developer and the end user. In this vain I turned my attention to thinking of other places that I could run JavaScript. The immediate, and somewhat obvious, answer was node.js running on Heroku. This was a simple solution: node.js is great at executing JavaScript and the CoffeeScript compiler is even available as a npm package. The idea was a simple service which accepted a request body containing CoffeeScript, compile it up and return the JavaScript… nice!

The JavaScript above runs on node.js on Heroku and does exactly what I described in the previous paragraph. It’s really that simple. I was using uglify-js to minify the output but left it out of the examples to keep them to the point. Free free to have a play with this, just post some CoffeeScript to http://high-window-9445.herokuapp.com/ and you should get a JavaScript response.

So now that we have a server based approach to compiling CoffeeScript how do we make use of it easily from within VisualForce? My aim here was to keep it simple; it should be as easy as add a script tag. To achieve this simplicity I put together a basic Apex component which takes the name of a static resource (your CoffeeScript file) and in turn outputs JavaScript.

Then in the controller all we need to do is find the CoffeeScript resource, pass it out to our Heroku instance and send the response to the browser – simple.

There we have it, a fully functioning CoffeeScript VisualForce component; we too now have access to the benefits that CoffeeScript brings!

Using it is very simple: upload your CoffeeScript as a static resource and then include a line like this in the VisualForce page that you want to use the uploaded script in. Hey Presto! Job done.

Obviously there are short comings of this component as it stands one massive improvement for example would be to cache the returned JavaScript as another static resource so you only need to call out to Heroku once. There probably needs to be some better error handling; at the minute I just return a blank string if things went wrong, whereas it might be nice to know why.

Having said that I have achieved what I set out to do and hopefully have provided enough of a platform for those that want to include CoffeeScript in their VisualForce to get started with. In the meantime if I have another evening where I’m feeling a little bored I might round this component out and add it to GitHub for the easy consumption by the masses.