This is CoffeeScript

http://robots.thoughtbot.com/post/9251081564/coffeescript-spartan-javascript

by franze • 15 years ago

184 89 15 years ago

robots.thoughtbot.com

franze• 15 years ago

note: below the pics is an actual readworthy article.

pointyhat• 15 years ago

Thanks for the heads up. I didn't get that far initially.

dstein2• 15 years ago

The problem with Coffeescript is if you already know JavaScript, it's completely unreadable. Looking at code like this, I have absolutely no idea what it does:

  class ItemView extends Backbone.View
    render: ->
      @options.items.each(@renderItem)
    renderItem: (item) =>
      @el.append item.get("title")

It doesn't make sense because there are magic variables appearing out of nowhere - @options, @el, append -- what are these? I'd have to study the resulting JavaScript to understand what it's really going to do.

qrush3• 15 years ago

How is that not the case for any language?

(This also might be a bad example, but it was based off of code I wrote)

davidw• 15 years ago

Just as a data point, most "on top of" languages seem a bit more distant from what they sit on top of.

In other words, C is somewhat cross platform, and much higher level than assembler. Ruby does way more out of the box than C does.

Coffeescript seems to mostly just be a modified JavaScript syntax, although I have to admit I haven't looked at it that closely.

dstein2• 15 years ago

Coffeescript is adding an abstraction level, but all the complexity of JavaScript remains, so while you write Coffeescript, you have to sort of compile it in your head. I could maybe get on board if it went one whole level of abstraction further.

r00k• 15 years ago

I'd have to study the resulting JavaScript to understand what it's really going to do.

Once.

And then you could use shorter, more convenient syntax for the rest of your life. Worth it?

jashkenas3• 15 years ago

I'm afraid you're getting tripped up by the Backbone.js library, not the language itself...

`this.options` is the options object that was passed when the View was created, and `this.el` is the default DOM element that wraps the View. For more info, see:

http://documentcloud.github.com/backbone/#View-constructor

http://documentcloud.github.com/backbone/#View-el

Cushman7• 15 years ago

This is the major problem with CoffeeScript: it seems so straightforward, there must be something wrong with it.

randomdata• 15 years ago

The same could be said of any language you are unfamiliar with. Ignoring the inheritance, which should be familiar to anyone with class-based OO experience, that code basically translates to:

    function ItemView() {
      this.render = function() {
        this.options.items.each(this.renderItem.bind(this));
      }

      this.renderItem = function(item) {
        this.el.append(item.get("title"))
      }
    }

In this example, I don't see any significant difference as far as readability goes, to be honest. I will note, in case it is not entirely clear, that the use of Backbone in the example is unrelated to CoffeeScript.

mgutz2• 15 years ago

Except you left out setting the prototype chain to extend from the super class. CoffeeScript expresses it succinctly. The example above, while readable, already has much more noise than signal.

maccman• 15 years ago

Also, HNers may find my open source book on CoffeeScript useful: The Little Book on CoffeeScript http://arcturo.github.com/library/coffeescript/

dmix• 15 years ago

I've used CoffeeScript extensively with a backbone.js project I was working on. I really liked it (and backbone).

But I haven't been able to bring it into my main rails app since I'd like to have all of my JS consistently in coffeescript. I don't like having both JS/CS, just like I don't like having HAML/ERB mixed together.

It would be a big project migrating it over and not as simple as HAMLizing a project.

Maybe one day I'll do it, or wait for a future rails projects.

DevX101• 15 years ago

There's a javascript to coffescript converter: https://github.com/rstacruz/js2coffee

Although I did have a few problems with some more complex code, it seemed to do the trick for more straightforward javascript. You'll lose your comments, but it's worth checking out.

seanalltogether2• 15 years ago

It seems like the removal of parenthesis is a bad idea, because it's bound to create a bunch of inconsistent code. Notice how all the rest of the code samples on the page keep the parenthesis in?

qrush3• 15 years ago

Yeah, I'm undecided yet as to which is best. My colleagues seem to be promoting keeping the parens in. Typically when we try stuff like this I like to push it to the max to see how it feels, then scale back.

bstar77• 15 years ago

I approach this the same way I approach Ruby... I only use parenthesis when they improve readability of a confusing statement or are required (function call with another function call-with params-as a param). As you can see, this statement required parentheses ;-)

stdbrouw2• 15 years ago

It does create some inconsistency (even though CoffeeScript is in many ways one of the most consistent syntaxes I've seen) but you gain a lot in readability sometimes, and it makes it so easy to craft great domain-specific languages.

Cushman7• 15 years ago

I find it's a good smoke test for readability. Use parens to bind up atomic expressions in a line. If there are too many parens on a line, it's a good sign that you should break it up into two instead. It wouldn't be better lookin' with more.

freddealmeida• 15 years ago

points for using 300 to explain coffeescript

akdetrick• 15 years ago

I don't subscribe to the notion that you can write code faster with less keystrokes (vi/emacs, anyone?). I do however, understand that a cleaner syntax would lend some readability and simplicity to your code once you learn said syntax. Ultimately, I find that the problems that CoffeeScript solves, and solves quite well, are not really that big of a deal for me given that I've been working with Javascript enough to get used to the quirks. I'm not sure if I'll ever use it myself, but I can't blame anyone who would; this article does a good job explaining some of the benefits.

seanalltogether2• 15 years ago

I agree with this. As a counter example I can completely understand why some people use GWT because it provides a development infrastructure and code enforcement that you just can't get from normal javascript coding. I can't say that CoffeeScript provides enough of a change in discipline over normal javascript coding.

mamp• 15 years ago

The problem with Javascript is that because of political reasons it has only evolved slightly in the last 12 years, so it takes a lot of effort to avoid the bad parts.

I about CoffeeScript as JSLint + Syntactic Sugar. Both of which mean you need less heroics to get Javascript right.

danenania2• 15 years ago

"Ultimately, I find that the problems that CoffeeScript solves, and solves quite well, are not really that big of a deal for me given that I've been working with Javascript enough to get used to the quirks."

I wouldn't expect you to believe me until you've used CoffeeScript for a little while, but I think you're definitely wrong about this. CoffeeScript simply has better syntax than plain js in every way, and any js developer will be more productive using it. The only drawbacks are dealing with file conversions and debugging, but these are something like a 10% penalty at worst on top of a 100%+ productivity boost. It's not just an aesthetic preference thing. CoffeeScript is a much better language and is pretty much guaranteed to save you time and mental effort.

awj• 15 years ago

> CoffeeScript simply has better syntax than plain js in every way, and any js developer will be more productive using it.

That's a pretty bold claim. Have any examples to back it up? Most of what I've seen of coffescript (note: I haven't looked hard) seems to be relatively similar syntax with fewer characters or fixing JS gotchas that many developers are familiar with.

Both of these are useful things, but they don't make a 100%+ productivity boost in my mind.

boucher3• 15 years ago

I don't particularly like all of the syntax choices in CoffeeScript, and I absolutely don't subscribe to the theory that fewer keystrokes means cleaner code, but on anything complex I think CoffeeScript is a better choice than vanilla JavaScript.

It really is true that having a compiler make it impossible to screw up your scope saves you from a lot of mistakes. This feature is probably the thing I wish we had put in Objective-J most. It's also really nice to have a syntax for classes.

tjogin• 15 years ago

Sounds like a bit of a straw man to me. It'd depend on just how big the difference in the number of keystrokes there are, would it not?

Do you not agree that writing 100 lines of code instead of 1000 lines saves time, when writing it but perhaps most importantly when reading it and developing it further?

I'm not saying CoffeeScript cuts down the number of lines of code by a factor of ten, but, depending on what you do with it, often by 50% or more.

Making it about "keystrokes" is a bit disingenuous, it's about cruft (aka "keystrokes") but it's also about lines of code, imho.

mrkurt• 15 years ago

I'm less concerned about raw keystrokes than I am about repetitive things that I have to keep in my head at all times.

Simple iteration over the key/value pairs of a javascript object requires that I remember to check hasOwnProperty at the right times. Soaking up nulls is a pain. Dealing with args kind of sucks. There's quite a bit more.

It's less valuable that these things can be done with shorter character sequences, and more valuable that I don't have to think about them nearly as much.

bilalhusain2• 15 years ago

When I first checked out coffeescript, I had a feeling that Jeremy was unfairly trying to show it off as cool by being less verbose than javascript - a feeling I found echoed in one of the tweets by Zed. But after actually using it, I realized that I had missed the whole point.

Coffeescript has that ruby-esque intuitiveness. A lot of time I refactor code on a gut feeling that it'll work, coffee -p, yup it does ... 9 out of 10 times. closure, is, in, of, soaking null references lets you focus more on your code rather than on patterns, handling corner cases and avoiding mistakes; and I just discovered the fat arrow thanks to this post. (Yup, the documentation is all there on the homepage but, agree or not, learning is incremental and involves mistakes and serendipity.)

jashkenas3• 15 years ago

Dug up Zed's tweet: https://twitter.com/#!/zedshaw/status/101746443949322240

... which does indeed miss the point -- the side-by-side comparison on the homepage is not to show you what the equivalent handwritten JavaScript would be -- it's the actual JS output compiled from the CoffeeScript on the left. More of a "nothing up my sleeves" and no bullshit maneuver.

In a perfect world, CoffeeScript would compile into the JavaScript you would have written in the first place -- but that's quite a tall order.

bilalhusain2• 15 years ago

<public_display_of_affection>

Dear sir,

I'm jumping on my bed right now out of ecstasy, for my unworthy comment has garnered a reception, from a noble soul like yours.

You just made by day. In fact, you do it through the means of coffeescript everyday. Thank you for coffeescript, kind sir.

Hats off.

A broke, insecure, forever alone developer.

</public_display_of_affection>

Cushman7• 15 years ago

Especially since if I had to write that JavaScript by hand, I wouldn't.

ori_b2• 15 years ago

If you're doing a side-by-side comparison, then you want to compare with what a human would write, not with what a compiler would write. Otherwise, you're not really showing the advantages of your language, you're showing how easy it is to read the object code -- something that's only really an advantage when debugging your compiler and/or trying to map the generated output back to the source for debugging purposes.

I mean, look at what Hello World in C is, compared to Hello World in Haskell!

http://pastebin.com/sePpUJ1J (Haskell source)

http://pastebin.com/seqAy4VD (C, generated from the Haskell above)

Clearly C is unreadable garbage! (It's less expressive than Haskell, for sure, but showing generated output makes it look far worse)

funkah• 15 years ago

I agree that "function" is too long, but I'm not a huge fan of these arrow keywords because they're not very easy to type. But something like TextExpander would make a simple fix.

stdbrouw2• 15 years ago

Not easy to type? What kind of a weird alien keyboard do you have? :-)

chc2• 15 years ago

The arrows are easy enough for me. Middle finger hits the - or =, pinky hits shift and index finger hits >. It's drastically less finger-work than f-u-n-c-t-i-o-n-shift-(-)-space-{-}. The only languages I can think of off the top of my head with easier syntax for anonymous functions are Scala (a pair of parentheses is literally all you need) and Clojure (with its #() syntax), which both seem to have put a lot of effort into making them easy.

In particular, Ruby and Python both require more typing. At their most concise:

  Ruby:   -> {}

  Python: lambda:

thezilch• 15 years ago

You may be stuck with your IDE:

  JavaScript: fu<tab><shift-)>
    function(){
      <cursor>
    }

  Python: la<tab>:

The remaining characters should be filled in by most modern IDE / IDE plugins.

dreamdu5t• 15 years ago

The bottleneck is never the time it takes to type the code.

Honestly, CoffeeScript is neat but it's not much of an improvement over JS. It's just as ugly and unreadable. It's only an improvement if you're counting characters.

I don't find CoffeeScript any less ugly or readable than JS. It seems incredibly redundent.

alfbolide2• 15 years ago

true we should all write machine code.

Almaviva• 15 years ago

If someone likes x over y, it means they must like the most extreme thing possible that is different from y in the way x is!!

Why make that point? It has absolutely no intellectual content.

hakl• 15 years ago

High-level languages are more than just syntactic sugar.

rgbrgb• 15 years ago

Agree to disagree about what is UGLY.

statictype3• 15 years ago

It's not about the time it takes to type code. Code that requires less typing is more succinct and therefore easier to read and understand.

You don't find it easier to read. Fair enough. I think a lot of people do. I personally found it much easier to write structured code in Coffeescript than in Javascript straight.

danenania2• 15 years ago

I'm sorry but what? Are python and ruby ugly and unreadable? Are they on the same level as js? Because coffeescript syntax is essentially a combination of the best aspects of both with a cleaner lambda syntax. I'd love to hear which languages you find beautiful and readable if cs doesn't meet your standards.

alfbolide2• 15 years ago

The fat arrow by itself make it a mandate for everyone who wants to write OO js write Coffeescript.

collint2• 15 years ago

"Just like JavaScript but nicer to type." was a decent pitch to make CoffeeScript sound safe. But it's become so much more. And you get past the simplicity of that pitch quickly if you use CoffeeScript earnestly.

Going through the Table of Contents on http://jashkenas.github.com/coffee-script/ I've picked out the features of CoffeeScript that make it a different beast than just a JavaScript without warts.

* Lexical Scoping and Variable Safety * Conditional Assignment * Splats * Comprehensions * Everything is an Expression (&implicit return) * The Existential Operator * Classes, Inheritance, and Super * Destructuring Assignment * Function binding * Chained Comparisons * Extended Regular Expressions

This is beyond a simple sweetener for your JavaScript code. Yes, you could write your JavaScript like you write your CoffeeScript, but you wouldn't.

Try this little jewel in Try CoffeeScript and you'll see what I mean:

[open, contents..., end] = "<impossible>".split "" alert contents.join ""

boucher3• 15 years ago

I think the jury is still out on whether or not the existential operator is too clever for its own good (in particular when used as part of a chained expression).

collint2• 15 years ago

What is so clever about a nil object check?

I suppose if you're using it to make skirting the "Law of Demeter" and thats something you don't want to do it could seem like something bad.

But I'll take "foo?.bar()" over "foo.bar() if foo" gladly.

richcollins• 15 years ago

I find it quite useful in Io, including chained expressions.

statictype3• 15 years ago

My only major complaint with Coffeescript is that it doesn't have a construct for handling the context-sensitive 'this' keyword. I still have to write

    self= @

at the top of functions. The fat arrow for binding 'this' certainly helps but when you have to be really careful when writing code that nests several functions.

Also, would be nice if the for-loop had a way to automatically wrap the block in a function without having to write

    for(var x in lst) do (x) ->
              whatever(x)

JoelMcCracken• 15 years ago

Not sure that I understand you. Do you mean that you find it odd to use =>, and thus resort to self=@ for your callbacks?

Also, sometimes I do

    $.each lst, (i, item) ->
      whatever x

because I always use jQuery in my projects.

d4n3• 15 years ago

I often have to resort to self = @ when using jQuery in classes.

Because of how jQuery binds the queried element to this, and the fat arrow overrides this, there doesn't seem to be another way to access both your class and the jQuery element in the same function.

for instance:

    class ButtonLogger
    
      constructor: ->
        @clickedButtons = []
        
        $(document).ready => @init()

      init: ->
        self = @

        $('button').click ->
          $button = $(@)
          self.clickedButtons.push $button.attr 'id'

M1573RMU74710N2• 15 years ago

I'm not sure I understand your first complaint.

The fat arrow is a great helper and saves a lot of work in various situations....obviously it doesn't cover all situations...but in the situations it doen't cover I'm not sure what I'd expect the language to do.

Could you give an example of what you imagine the feature to be?

I'm just not sure if something as simple and easy as

    that = @

needs improvement. Anything beyond what that and => covers, to me seems like something a library should handle...and CS makes that very easy.

For you second one, what about

    do ( -> whatever x ) for x in foobar

One of the things I like about CS is that it is very conservative about not adding helpers for every little thing you can think of. It chooses a few very powerful and fundamental building blocks, and let's you use those to build up yourself.

I can respect some people wanting more though.

statictype3• 15 years ago

I did not know about the

    do () for x in foobar

syntax. Thanks.

M1573RMU74710N2• 15 years ago

Sorry, my comment should read:

"""

    ( do (x) -> whatever x ) for x in foobar

    foo  = (x) -> whatever x
    foo x for x in foobar

    for x in foobar
        do (x) -> whatever x

I find all of these pretty readable and easy. The former in simple cases like "whatever x", and the latter two when you are doing more than just "whatever x".

I think it's important to distinguish cases like this and that the syntax is clean enough without adding some helper that makes what's going on implicit

"""

In the section where it says:

""" do ( -> whatever x ) for x in foobar """

donpark• 15 years ago

First week of using CoffeeScript, I was mostly writing code and it felt foreign. Second week, same but it now felt convenient and I used it like a DSL. Third week, I was reading code as much as writing it and it suddenly became essential.

CS does have some rough spots that feels at odd with rest of the language but, overall, it brings clarity and convenience at minimal cost.

scubaguy• 15 years ago

Perhaps the biggest strength of CoffeeScript is that it takes JavaScript, where there are many different ways to do OO inheritance; write and use functions; perform functional tasks such as list comprehension and provide a consistent and simplified syntax to do them. Because CoffeeScript is language designed how JS developers write code today, it feels more natural and fluid. It makes JS programming simpler.

scdc• 15 years ago

>var html = "<option value='" + this.id + "'>" + this.get("title") + "</option>";

>This is such nonsense. Why did we put up with this? In CoffeeScript, you can write:

>html = "<option value='#{@id}'>#{@get("title")}</option>"

I have to say, the first one is much easier for me to read and understand.

tlrobinson2• 15 years ago

Am I the only one who thinks this is horribly difficult to visually scan?

    item = new Item title: "Awesome", id: 2

Less isn't always better. I like the parens, at least if there's more than one argument.

    item = new Item(title: "Awesome", id: 2)

It's much easier for me to glance at this and know what's going on.

jrockway2• 15 years ago

What else would it mean?

tlrobinson2• 15 years ago

I can understand what it means, it just takes slightly longer to comprehend without the parens providing a visual cue that it's a function call.

It only gets worse with nested function calls:

    item = new Item title: new Title "Awesome", id: 2

The syntax isn't ambiguous, but that doesn't mean it's easy for humans to parse.

jessedhillon2• 15 years ago

In a language where there are two drastically differing ways to express the same idea, it could mean anything.

rikthevik• 15 years ago

It could easily mean that item is a 2-tuple.

item = (new Item title: "Awesome", id: 2)

qrush3• 15 years ago

http://news.ycombinator.com/item?id=2912770

mgutz2• 15 years ago

Love CoffeeScript, but yeah omitting parens makes it hard to read in this case. I follow Visual Basic convention. Use parentheses when using the return value. In this case, the constructor function returns an object. Omit parentheses otherwise, i.e. using a function as a method (no return value).

Cushman7• 15 years ago

All I can say is you get used to it, and it encourages you to write in shorter sentences, which results in more readable code overall.

7mythie• 15 years ago

I've been playing around with coffeescript for a month now and I'm still undecided about whether these punctuation marks improve the syntax or not. Typing out "function" doesn't really take that long and it's much more readable than "->". On the other hand, I miss the parentheses and semi-colons. Without those punctuation marks the code feels more ambiguous. Maybe I'm just stuck in my ways, hopefully something will click soon.

Spyro7• 15 years ago

I am a recent coffeescript convert. When I first heard about coffeescript I dismissed it offhand as a pointless abstraction over javascript, which I judged to already be a high level language. (In retrospect, I am ashamed to say it, but I think that I found the syntax to be intimidating.) I then went on to continue, happily, writing thousands of lines of javascript.

Somewhere along the way, I came across Paul Grahams essay "Succinctness is Power" ( http://www.paulgraham.com/power.html ), and I thought about how my productivity could be increased if I had access to a language that offered me the ability to do more with less. That was when I decided to revisit Coffeescript.

For my first task, I decided to rewrite some of my simpler javascript code into Coffeescript just to get a feel for it. Initially, the things that had initially repulsed me were somewhat irritating:

* The lack of parenthesis and brackets - I doubted that it would be possible to maintain code readability without them

* The reliance on indentation

* The overall "strangeness" of the appearance of coffeescript code (to someone with a predominantly java background)

Here's the thing though. All of those objections are only surface deep. Once I actually started to code in Coffeescript, I found that I became completely comfortable with the syntax. As a matter of fact, I don't think that I could ever go back to conventional javascript again. Especially because I would lose (among other things):

* An elegant syntax for writing classes using javascript

* List comprehensions

* Elegant string interpolation (it's the little things that count)

It is easy to be skeptical about coffeescript if you natural lean away from things that are surrounded by hype, but, take it from me, coffeescript really is an extremely valuable tool that no web developer should be without. It is more than just a way to write pretty javascript. It is a powerful, flexible, and elegant language in its own right. Don't be turned off by its syntax, give it a try today!

perfunctory• 15 years ago

anybody wants to guess what this code compiles to?

  a [1] = 2

TrevorBurnham• 15 years ago

I'm the author of the PragProg book on CoffeeScript (http://pragprog.com/book/tbcoffee/coffeescript), and I run @CoffeeScript on Twitter.

It's always fun to see a "CoffeeScript rocks" article like this explode on HN and Twitter. But it's even better to see stuff that people are building in CoffeeScript. The language has reached the point where it's gaining real traction in production settings, and not just among the beautiful code addicts at 37signals. There was a YC job posting about a week ago for a "CoffeeScript drinking frontend engineer" (http://news.ycombinator.com/item?id=2877677); they're also using CoffeeScript for a Node.js server, and even for MongoDB queries. I'm really excited to see that become a more common occurrence.

jvoorhis• 15 years ago

Why raise so much snark straightaway about keywords, and then gripe about the silly ones later?

I've written thousands of lines of JavaScript, and a coupla hundred of CoffeeScript. CS is a usable, rather polished JS overlay, but I only understand it in terms of JS. In any case, I know which will be around longer.

MHBerryman• 15 years ago

Just thought I'd share the CoffeeScript + jQuery article in Septembers issue of Linux Journal:

http://www.linuxjournaldigital.com/linuxjournal/201109/?pg=3...

This is CoffeeScript

Related Stories