December 03, 2011

Coffeescript: Organizing Classes In Separate Files

Coffeescript is so hot right now and everyone loves it and so do I. The syntax for creating classes without having to use prototype.whatever() is a joyous abstraction the more I get into it.

class Taco

  constructor: (@filling) ->
    @filling = 'carnitas' unless @filling?

When I started organizing classes in separate files (taco.coffee.js, burrito.coffee.js, etc.) I ran into a little bit of trouble creating instances of those classes in my main application.coffee.js file. Turns out I needed to declare my classes on the global window object to make it work.

class window.Taco

Then you shouldn’t have problems instantiating those classes from other files that are part of your application.

  • http://afran.co/ Anthony

    Thanks for the tip. Is there a way to be able to have separate files in development. But combines the files into one for production? I like separating the different classes but don’t like having users downloading separate JS files.

    • Anonymous

      I’ve only done this so far in the context of the Rails Asset Pipeline which by default concatenates the files in production just like you describe (see the Rails guides). Maybe check out this coffeescript-concat utility which I’m going to try at some point.

      • http://afran.co/ Anthony

        Ah. I see. Since I’m still on Rails 2.3 I don’t use the Rails Asset Pipeline yet. I’ll take a look at other solutions. Thanks!

        • Anonymous

          Gotcha. In that case check out Jammit – http://documentcloud.github.com/jammit/ – which is an awesome solution for concatenating and compressing assets that should work in both 2.X and 3.X Rails projects.

    • http://twitter.com/fresheyeball Isaac Shapira

      For those of us who do not have the option of using server-side technologies to compile coffeescript, I highly recommend codekit, it watches the coffee files and compiles them out to js whenever you save. But more than that it allows you to prepend or append coffee to coffee and compiles out to a single js file, or even a minified js file.

  • http://twitter.com/fresheyeball Isaac Shapira

    to be even more coffeescripty you should do it like this:

    class @Taco

    • Asdf23

      Thats kinda ugly imho, I prefer to alias window to the name of the app, so you get…
      class myFabWebApp.Taco

      Maybe hacky tho :)

      • http://www.radiantinteractive.com/ Isaac Shapira

        I think that lowers code readability if anyone else is consuming your code. Personally, I would have never suspected that myFabWebApp is really the window object. window.Taco, or this.Taco (@Taco) are both much clearer as to what is going on.

        • stakelon

          I’m just excited that people are still discussing this @Taco even after my being gone for, like, a year

          • http://www.radiantinteractive.com/ Isaac Shapira

            It is pretty cool.

      • http://www.radiantinteractive.com/ Isaac Shapira

        In the three years later, return of the case of the `@Taco`, I can report another benefit to the `class @Taco` syntax. It works identically in Browser, Node.js and Webworkers,

        • stakelon

          Dude, if you ever come to LA let me know. I’m buying you tacos.

  • Pingback: Organizing coffeescript code in a Rails 3 app | Manas()

  • http://www.facebook.com/cees.timmerman Cees Timmerman

    On the server side (using Meteor) i get ReferenceError: window is not defined