

How CoffeeScript makes jQuery more fun than ever - buhrmi
http://buhrmi.tumblr.com/post/5371876452/how-coffeescript-makes-jquery-more-fun-than-ever

======
Klonoar
While I like CoffeeScript, I feel I need to note that this isn't really a
great example - in fact, I'd call it an incorrect example:

    
    
        var elem, formValues;
        formValues = (function() {
            var _i, _len, _ref, _results;
            _ref = $('.input');
            _results = [];
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                elem = _ref[_i];
                _results.push(elem.value);
            }
            return _results;
        })();
    

That's... needlessly _bad_ , so to speak. That could be rewritten in a much
more readable fashion, like so:

    
    
        var formValues = (function(inputEls) {
            var results = [];
            inputEls.each(function() {
                results.push($(this).val());
            });
            return results;
        })($('.input'));
        

If CoffeeScript is generating the first block seen here, then I'd actually be
concerned, but perhaps I care more about this than some. Either way, while...

    
    
        formValues = (elem.value for elem in $('.input'))
    

...is certainly nicer, I don't really think it's necessary to further
bastardize the views held on Javascript syntax in general. The first block in
this comment is, to put it bluntly, _utter shit_ , and does nothing but
continue the trend that "oh god Javascript is horrible".

~~~
TrevorBurnham
The JavaScript compilation you propose isn't standard JS: arrays don't have an
`each` method. Also, even if such a method existed, your code would fail
because

    
    
        $(this)
    

would resolve to `$(window)` in your function. To avoid that, you'd need to
use `.call(this)`... but then how would you compile `break`, `continue`, etc.?

I'm not saying CoffeeScript's output has no room for improvement, but given
the challenge of compiling to working JS in all cases without modifying
prototypes or adding tons of helper methods, I think you're being a little
harsh.

~~~
Klonoar
Uhh, no, you're incorrect (albeit in a sense, I'll admit).

The entire article was about _jQuery_ and CoffeeScript, so my example was
built using _jQuery_. This entails a .each method on DOM collections, and
$(this) will properly scope being inside that $().each method.

M1573RMU74710N summed up what I aimed to do here, though, which was show that
the resulting code isn't actually _that bad_. In my opinion the article in
question is making a case that _all_ Javascript looks horrible, when in
reality that's simply not the case.

Edit: I see it noted in another comment on this thread that you're writing a
book on this... and you couldn't tell I was using jQuery, when I pass in the
results of the selector call as an argument? Tut tut...

~~~
TrevorBurnham
Sorry, you're quite right! I misunderstood the point you were making.

------
ddemchuk
I guess I could be ignorant here, but I don't really feel that Coffeescript
makes things easier/more elegant/better than just using jQuery. I'm not
particularly a fan of abstracting abstractions in the first place so I'm
probably biased, but I find jQuery to be clean and concise already. An example
from the article:

$.post(

    
    
      "/posts/update_title"
    
      new_title: input.val()
    
      id: something
    
      -> alert('done')
    
      'json'
    

)

All coffeescript really did there was remove the commas and subtly change the
syntax. That's not an improvement at all, it's just a lateral syntax change.
If anything, the lack of commas almost makes it harder to read.

Why change to coffeescript and add another step (compilation of coffeescripts)
into the mix when jquery was already pretty good to start with? Just seems
like its something that would make it hard to take on new coders when your
business starts scaling because they would need to know yet another meta-
abstraction.

~~~
TrevorBurnham
[Obviously I'm biased because I have a book to sell, but...]

I'd call the gains "small but significant" in that case. The corresponding JS
would be

    
    
        $.post("/posts/update_title", {
          new_title: input.val(),
          id: something
        }, function() {
          return alert('done');
        }, 'json');
    

What I really dislike about this is the use of curly braces to denote two
completely different things: an object literal, and a function. Functions are
extraordinarily privileged entities in JavaScript; they're the only way of
creating scope, and they also change the context (`this`). Object are just a
bunch of key-value pairs.

So to me, JavaScript's semantics are much clearer through the lens of
CoffeeScript semantics: Curly braces are only used for object literals, and
functions are denoted by a distinct symbol followed by indentation, except in
one-liners like the above.

The extra compilation can be annoying (through largely transparent thanks to
tools like Barista and the upcoming Rails 3.1 integration), but for me, it's
always felt worth it. Debugging is harder, true, but I write code with fewer
bugs in the first place. On net, learning CoffeeScript has been both a
pleasure and a productivity boost.

