Example of using Coffeescript classes and RequireJS (or Curljs or similar) for client side browser library

Question

We want to develop a browser (client side only) library using Coffeescript, and in particular, we tend to use the "class" capability of Coffeescript quite a bit, in addition to pure functions. The library will be relatively large, so we want to start out using a well defined module pattern, but not to the point where we want a single coffee file for every coffeescript "class". We don't want to compile the coffee files on the fly, but rather as a specific build step, and would prefer to not have to concat all the outputted JS into one file. As a final requirement, we will be using something like Jasmine for testing.

Does anyone know of a good example library developed in this way, using Coffeescript with something such as RequireJS, CurlJS, Browserify etc? I have looked on Github, and there are some examples, but I couldn't see anything specific to my needs.

I tried Coffee-Toaster , as it seemed to hold some promise in making it simple to define dependencies etc, but it failed to deal with Windows paths (the old \ vs /), so gave up on that, mainly because it seemed to be a bit on the "light" side - something like RequireJS would seem to have a much better community support behind it.

Thanks for any help you can provide. I am really looking for working source code examples if possible.

Answer 1

First off, if you're using RequireJS you're going to have a not-easy time returning multiple "things" from a define function. RequireJS uses AMD (!NOT! CommonJS) format "standards", which doesn't contain a module.exports object for exporting "stuff" but instead relies on return something.

With that said, I'm not exactly sure what you're looking for here but having a class work with RequireJS is pretty easy. Something like this:

define ['my/required/module'], (myModule) ->
    class MyOtherModule
        privateField = 0

        constructor: ->
        publicMethod: ->

    return MyOtherModule

This can be used in a require/define function just like any other script. Take this example:

require ['my/other/module'], (MyOtherModule) ->
    instance = new MyOtherModule()

We can even use it with "extends"

define ['my/other/module'], (MyOtherModule) ->
    class MyThirdModule extends MyOtherModule
        ...   

Hopefully this helps!

Answer 2

I'm using coffee-toaster too, and I found few posts recently.
I thought that was worth to read, maybe we could work it out:

http://blog.toastymofo.net/2012/04/coffeescript-requirejs-and-you-part-one.html
http://24ways.org/2012/think-first-code-later/

and http://jamjs.org seems pretty cool!

Answer 3

I haven't actually used this technique yet, but:

The only thing to keep in mind here is that CoffeeScript statements are also return values when they are last in a function. So, basically, the following code:

define [], () ->
  class Main

translates to:

define([], function() {
  var Main;
  return Main = (function() {

    function Main() {}

    return Main;

  })();
});

and that should work as expected (I see no reason why it wouldn't based on the compiled JavaScript).

For managing code base, I believe the CS plugin should come in handy. It's maintained by James Burke himself, and supports building of CoffeeScript projects the same way JavaScript projects are built.