I am working on an implementation of a web service where we are writing our front end code in CoffeeScript. The problem I have stumbled on is while the project is growing functionality has to be separated in different files. What I really need is a simple structure where in the utils.coffee file I will have the general functions which are required from every page and on each separate file I will have page_foo.coffee page_bar.coffee the specific functions. How can I structure it properly so I also make sure utils.coffee loads first and is accessible from everyone?

I am working on an implementation of a web service where we are writing our front end code in CoffeeScript. The problem I have stumbled on is while the project is growing functionality has to be separated in different files. What I really need is a simple structure where in the utils.coffee file I will have the general functions which are required from every page and on each separate file I will have page_foo.coffee page_bar.coffee the specific functions. How can I structure it properly so I also make sure utils.coffee loads first and is accessible from everyone?

• javascript
• coffeescript
• frontend

• 1 This isn't specific to CoffeeScript, but a general problem with JavaScript. That being said... see "Structuring coffeescript code?", and specifically my answer here. – shesek Commented Jan 7, 2012 at 12:49

4 Answers 4

With CoffeeToaster you have the ability to include files that you'll need at the top of them, making sure your final ".js" file (that will be also a merge of all your CoffeeScript files) have everything in the proper order, for use inside the browser.

Take a look on the docs:
http://github.com/serpentem/coffee-toaster

It comes also with a packaging system that when enabled will use your folder's hierarchy as namespaces declarations to your classes if you want so, then you can extends classes from multiple files, do imports and son, such as like:

#<< another/package/myclass
class SomeClass extends another.package.MyClass

The build configuration is extremely minimalist:

# => SRC FOLDER
toast 'src_folder'
    # => VENDORS (optional)
    # vendors: ['vendors/x.js', 'vendors/y.js', ... ]

    # => OPTIONS (optional, default values listed)
    # bare: false
    # packaging: true
    # expose: ''
    # minify: false

    # => HTTPFOLDER (optional), RELEASE / DEBUG (required)
    httpfolder: 'js'
    release: 'www/js/app.js'
    debug: 'www/js/app-debug.js'

There's even a debug option that compile files individually for ease the debugging processes and another useful features.

Execution order is respected on browsers, so just include utils.js first.

A tool like CodeKit(http://incident57.com/codekit/) can compile and minify+join all your .coffee files into one .js, that's easy to do with a shell script too.

If your app is really large, read up on require.js and Asynchoronous Module Loading. It will allow you to manage dependencies very easily and only load what's necessary:

# page_foo.coffee
define ['lib/utils'], ($) ->
    // code that uses 'utils'

You could check how it's done in gae-init project (Disclaimer: I'm the creator).

The basic idea is that you have all the *.coffee files in one specific directory, and then a build script that compiles all the files and putting them in the correct paths.

Since you would like to be able to debug easily, while you're developing it, the build script should have an option to just compile them and another option to combine & minify them.

What I do is to write a Cake task to join and compile files in a predetermined sequence, for example

task 'build', 'join and compile *.coffee files', ->
  exec "coffee -j #{outJS}.js -c #{strFiles}", exerr

where outJS is the filename where I want the compiled JavaScript and strFiles is a string of filenames

Additionally you can add tasks to minify the compiled code using YUICompressor or your favorite tool. And during development watching, joining, compiling can also be automated

task 'watch', 'watch and compile changes in source dir', ->
  watch = exec "coffee -j #{outJS}.js -cw #{strFiles}"
  watch.stdout.on 'data', (data)-> process.stdout.write data 

Have a look at this gist