CoffeeScript: like aspirin for JavaScript

CoffeeScript is a language that compiles down into JavaScript. “But why? JavaScript is so simple?” Bullcorn.

If you don’t use JavaScript everyday the language is wonky and frustrating. When you need quick snippet of Javascript to build into a page you may know how to do it with three or four different languages but struggle with the touchy syntax that has long given developers headaches.

Give CoffeeScript a try, you’ll like it. If you do, give them a hand with development too.

[via @hornbeck]

Comments

  1. captain says:

    Almost reminds of the old QBasic or Visual Basic.

    Now, I have to use Python and/or Ruby. Using the C/C++/C# class of languages like Java(Script) always gives me a case of schizophrenia.

    I like quick, easy and dirty. Just get err, done!

  2. ccwii says:

    If I didn’t have almost 9 years of C++ pounded into my head I would consider giving that a try.

  3. ocentertainment says:

    Programs writing programs?

    …How perverse.

  4. jashkenas says:

    Quick note: If you check out the source, you’ll be seeing the next version of CoffeeScript (to be released in the next couple of days), which uses Python-style significant whitespace to delimit blocks, instead of closing them with a period.

    If you’ve got a bug or syntax suggestion, feel free to open an issue here: http://github.com/jashkenas/coffee-script/issues

  5. Kevka says:

    I would rather like a language with C# syntax, because the worst problem with JS is OOP. I have written some LIBs using OOP for my Website but it always comes down to more code than necessary. Having typified variables at least in the first stage (before translating into JS) could enable the compiler to at least find some errors.
    In general I like the idea of developing a language that is translated into JS though, because there won’t be a replacement of JS for long. Having a compiler that compiles into JS also enables you not to care about different browsers because the compiler could include dynamic browser checking which allows to work around differences between different browsers.

  6. captain says:

    9 years of C++, ccwii?

    Are you still sane?

    Practice yoga or something, man. Relax your mind.

  7. esker says:

    Ugh, it’s so ugly. Who on earth came up with the idea of using colons for assignment? And reversing the order of if statements?

    I think it would take me longer to figure out how to write “hello world” in this thing than write an entire website in pure javascript.

  8. esker says:

    Addendum, I do like the presence of “for” (though I’d rather call it foreach or something, instead of conflating it with for). Too bad the screenshot at the top of this article doesn’t make mention of it.

  9. TRB says:

    Looking at the included picture, I find the right hand side easier to read than the left. Javascript may have headaches, but at least the syntax is easy to handle. WTF were they thinking with colons and that weird ordering of statements.

  10. darren says:

    hrmm… it isn’t using colons for assignment, only for definition. Note javascript uses them in this way for object definitions.

    And those complaining about the syntax being hard to handle… umm, how few languages do you know, actually?

    Generally it seems to be a language based on definitions instead of assignments and such. This reduces the number of lines needed in many cases and makes the program simpler to debug. I’m curious to see it developed further, as it is described as “seriously alpha” currently.

  11. ashton says:

    If you really want to have an intermediary language for Javascript, use Pyjamas, it takes Python code and produces Javascript. There’s no need to make yet another scripting language when you already have some really nice ones (especially one with such an odd syntax, there’s a reason most languages follow certain formats)

    Personally, I find Javascript to be a very powerful language to work with. It has it’s quirks (determining scope can be mindbending), but with the addition of libraries like Prototype you can do all sorts of cool things. If you are just doing basic things, it’s not even that complicated of a syntax.

  12. Aaron says:

    You could use this and its ugly syntax or…

    Try haxe[http://haxe.org/] to compile to javascript, php, flash10, or the “neko” virtual machine running on linux, windows or mac.

    There are features specific to each target but the base language and utility classes are usable across all compile targets.

  13. therian says:

    the right colon is much clearer to understand

  14. Mutant says:

    Okay, maybe I’m just a little biased towards JS, but; I find it very easy to use. The only things that are a pain are the lack of crossbrowser support on some more complicated stuff I’ve done (changing innerHTML dynamically with getElementsByTagName), and the fact that I end up having to use toString() and parseFloat() more than I’d like to. But those are pretty easy to get used to. And like many others stated before me. Why re-invent the wheel? There are plenty of good languages out there other than C based ones, and most likely you can find a program to convert them to JS.

    P.S. I’d heard of Haxe before, but never looked at it. THIS IS AWESOME LOOKING! I wonder if it works in reverse as well. (Import JS). If so.. then could i convert JS to Flash? o.O I MUST look into this program more.

  15. Chris says:

    JavaScript itself is a pretty nice language, the DOM API however is a shambles, and as most people only come across JS in the browser then they assume it’s JS’s fault. Check out Douglas Crockford’s article http://javascript.crockford.com/javascript.html for more info on JavaScript itself.

    @Mutant If you’re just after hacking a few things together on a web page, then I’d suggest using jQuery or MooTools, which abstract away the browser inconsistencies and give you a nice, clean and well documented API to work with.

    I quite like the idea of CoffeeScript, though the period block closing is a bit confusing. It would be really cool to see a C# style yield/IEnumerable feature added.

  16. x says:

    anyone heard of

    var num = (oposite_day?-42:42)

  17. Mutant says:

    You have a point about DOM I must admit. The fact that it’s so hard to simply retrieve the page source of an iframe from the parent page is rather annoying, as well as the fact that getting the CSS styles of an element. The latter will usually just alert as a blank. Having to load an entirely new stylesheet dynamically is a tad irritating.

    As for JQuery, I know a tad and have actually been looking into learning more recently. I love how versatile JQuery is when it comes to finding the right part of a page you want to change. With JavaScript, finding a particular part of a page can be done easily with .split() and such, but once you’ve used methods like split, you can no longer change its value dynamically. JQuery remedies these flaws quite nicely. Visual effects like fadeout are nice too. :D

  18. Mutant says:

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    The above message was @Chris btw. Forgot to mention that.

  19. hackeron says:

    The examples they give are really, really bad. For instance Javascript will auto assign variables, you don’t need to explicitly say var every time and the loop example is atrocious! A real comparison would be:

    Assignment:
    number = 42; vs number: 42

    Functions:
    function square(x) { return x*x };
    vs: square: x => x * x.

    Array comprehensions:
    var result = [ math.cube(i) for each (i in list) ];
    vs: cubed_list: math.cube(num) for num in list.

    How exactly is CoffeeScript cleaner?

  20. Chris says:

    @hackeron Agreed the examples aren’t great but I think your examples are a bit over simplistic –

    Assignment: It is true that JS will automatically create a variable if it hasn’t formally being created (with var). However it will be created in global scope which can cause problems. I haven’t tried it myself but from the documentation it appears that CoffeeScript is not creating globally scoped variables. http://jashkenas.github.com/coffee-script/#lexical_scope

    Functions: I think the syntax foo.bar(x => x*x) is more readable than foo.bar(function(x){return x*x;}) for lambda expressions.

    Array comprehensions: I think the syntax you are using is only available in JS 1.7 which doesn’t yet have support across all the browsers (not mentioning any names….IE!). https://developer.mozilla.org/en/New_in_javascript_1.7#Array_comprehensions and http://en.wikipedia.org/wiki/JavaScript#Versions

  21. poot says:

    Wow…just WOW…a language to create another language. That is stupid. Now what if you have some JS code not generated by this thing, can it reverse engineer it back to something half way readable in its syntax. Just grab a book and learn to code properly, don’t piggy back off of garbage that will be fast to create 1st time around, because these are the ones that are a pain to maintain.
    JS syntax is not much different from Java Syntax, especially DOM.

  22. getoffmylawn says:

    @poot – I don’t normally throw out ad-hominems, but you sir, are an idiot.

  23. mrodent says:

    if you need to go beyond JS it’s surely gotta be better to go for one of the Python –> JS solutions, that way you’re learning an elegant, consistent, tried and tested, well-designed language with a vast community and ecosystem behind it. And skills which will probably be useful if the world, in its fickleness, once again decides JS is naff after all…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 96,650 other followers