CoffeeScript FIrst Impression

Today I tried to use CoffeeScript for the first time. Some of the other guys at my new job like it and it's not often that you are encouraged to use more cutting edge, less supported, less proven technology so I figured I'd give it a try on my current work project.

So far I'm not impressed. Maybe it's because I don't really dislike JavaScript in the first place, but I don't feel like what I've gained outweighs what I've lost. The syntax is a bit more terse and I've gained list comprehensions. It's not even that much more terse than what I normally write since I take advantage of jQuery's additions to shorten things up and the jQuery code I have written wrapped in CoffeeScript wasn't significantly shorter so far. I also don't mind typing brackets and semi-colons, so I don't really care that I don't have to do that now. On the other hand I feel like I've lost quite a bit.

Here's a quick example of submitting a form via ajax in JavaScript and CoffeeScript.

JavaScript I would have written

$(document).ready(function () {
    $('#someForm').submit(function (e) {
        e.preventDefault();
        $.ajax({
            url: $(this).prop('action'),
            cache: false,
            asynchronous: true,
            type: 'POST',
            dataType: 'json',
            data: $(this).serialize()}
        ).done(function (data) {
            $.each(data.errors, function (name, value) {
                    $(value).each(function (index, error) {
                        $('#id_' + name + '_errors').append('<li>' + error + '</li>');
                    });
                });
         })
        .fail(function (data) {
            $('#server_error_modal').show();
        });
    });
});

CoffeeScript:

$ ->
    $('#someForm').submit (e) ->
        e.preventDefault()
        $.ajax $(this).prop('action'),
            cache: false,
            asynchronous: true,
            type: 'POST',
            dataType: 'json',
            data: $(this).serialize(),
        .done (data) ->
            if data.errors
                # v will be a list.  Loop over all off the errors, then append an li for each error in v
                $('#id_' + k + '_errors').append('<li>' + error + '</li>' for error in v) for k, v of data.errors
        .fail (data) ->
            $('#server_error_modal').show()

The biggest issue I see is debugging. Now I write my code in CoffeeScript, but what actually ends up on my website and being executed is JavaScript. So what I get to step through in my debugger is different code than what I have to make changes to. That's kind of a pain in the ass. On top of that the JavaScript that it generates is, for me, harder to read and trace through than my own.

Here's what that CoffeeScript compiles down to and is what my debugger steps me through:

(function() {
  $(function() {
    return $('#someForm').submit(function(e) {
      e.preventDefault();
      return $.ajax($(this).prop('action'), {
        cache: false,
        asynchronous: true,
        type: 'POST',
        dataType: 'json',
        data: $(this).serialize()
      }).done(function(data) {
        var error, k, v, _ref, _results;

        if (data.errors) {
          _ref = data.errors;
          _results = [];
          for (k in _ref) {
            v = _ref[k];
            _results.push($('#id_' + k + '_errors').append((function() {
              var _i, _len, _results1;

              _results1 = [];
              for (_i = 0, _len = v.length; _i < _len; _i++) {
                error = v[_i];
                _results1.push('<li>' + error + '</li>');
              }
              return _results1;
            })()));
          }
          return _results;
        }
      }).fail(function(data) {
        return $('#server_error_modal').show();
      });
    });
  });

}).call(this);

So if something goes wrong, I have to figure out what is broken in THAT code and then figure out what needs to change in the CoffeeScript above to fix it. Not cool.

Secondarily is the support and reference material. Most of it out there is written for JavaScript, not CoffeeScript. It's not a deal breaker and fairly minor because I can fairly easily apply the CoffeeScript syntax to the JavaScript examples, but it's a bit of extra time I wouldn't have had to spend if I were just writing JavaScript. I came across CoffeeScript Cookbook, which I'm sure will be helpful, but the first thing I tried to use it for was out of date. I was looking up how to make jQuery $.ajax() calls before CoffeeScript's syntax had fully clicked for me. The cookbook has an example of this, but it's using the old success and error attributes rather than the new $.ajax() which uses jQuery's Deferreds.

On top of those issues, I have to install extra tools onto my dev environment and server, add extra libraries to Django, etc. Basically making the entire process more complex and difficult, from initial setup of an environment to actual coding and debugging, just so that I can avoid typing a few brackets and semicolons.

I'm going to stick with it through this current project, though. Maybe I'll change my mind after I've spent a bit more time with the language. I love experimenting with different languages and programming styles and am always encouraging other developers to spend some time with as many languages as they can, so I'm going to take this opportunity to take my own advice and get comfortable with another language.