Using Yeoman/Brunch tools with a hybrid Django/Backbone app?

Question

I'm building a hybrid web application with Django on the back end and Backbone on the front end.

The structure is as follows: I generate all the HTML in Django templates, use request.is_ajax to decide which templates to return, and use Backbone to pull in HTML as needed (I do this because I want to support non-JavaScript users).

Anyway, my question is this. As my JavaScript code gets more complex, I would like to be able to do the following things automatically:

• Asynchronous JavaScript loading
• Concatenating and minifying CSS files
• Concatenating and minifying JavaScript files
• JS-linting

I'm not too worried about image optimisation or package management. Is this possible with the setup I have? Currently it's a standard Django app:

/media
  /js
    main.js <-- Backbone code is in here
    /plugins
      backbone.js
      underscore.js
  /css
    main.css 
    results.css
  /img
/myapp
  admin.py
  models.py
  views.py
/templates
  /myapp
    index.html <-- references to all JS and CSS files here

I'm not sure if I should be using Yeoman (or just grunt) or Brunch, or if there's a simpler way. Whatever I use, I am not sure if can just drop it into the js directory, or if the location of the templates will complicate things.

Currently I know how to use require.js to load the JS asynchronously, but I don't know how to concatenate, lint etc - hence looking for a tool. Maybe I should just write a shell script :)

Answer 1

I can advice to start with simply brunch. Brunch is simpler than grunt, because its plugins work reasonable out-of-box, without the need to write 500-lines-of-code-gruntfiles. It it also much faster, recompilation of your app will be done instantly.

Your setup shall look like this

public/         # The directory with static files which is generated by brunch.
  app.js        # Ready to be served via webserver.
  app.css       # Don’t change it directly, just run `brunch watch --server`.
  assets/       # And then all changed files in your app dir will be compiled.
    images/

frontend/       # Main brunch application directory. Configurable, of course.
  app/          # Your code will reside here.
    assets/     # Static files that shall not be compiled
      images/   # will be just copied to `public` dir.
    views/      # Create any subdirectories inside `app` dir.
      file-1.js # JS files will be automatically concatenated to one file.
    file-2.js   # They will be also usable as modules, like require('file-2').
    file-1.css  # CSS files will be automatically concatenated to one file.
    stuff.css   # JS and CSS files may be linted before concatenation.
    tpl.jade    # You may have pre-compiled to JS templates. Also with `require`.
  vendor/       # All third-party libraries should be put here. JS, CSS, anything.
    scripts/    # They will be included BEFORE your scripts automatically.
      backbone.js
      underscore.js
  package.json  # Contains all brunch plugins, like jshint-brunch, css-brunch.
  config.coffee # All params (you can concat to 2, 5, 10 files etc.)
                # are set via this config. Just simple, 15 lines-of-code config.

To create new app, take a look at brunch skeletons which are like basic boilerplates. Pick any, then use brunch new --skeleton <url>, launch brunch watcher with brunch watch --server and you’re ready. When you will want to deploy your app, simply build stuff with brunch build --optimize which will automatically minify files.