Question

After playing around with AMD/RequireJS I was wondering if it is a good idea to load UI modules including templates and CSS so they are completely independent from the web page.

It sounds like good, but I haven’t seen this implemented in the wild so there may be pitfalls.

Think of some UI module with the following structure:

myWidget
    |--img 
    |--main.js
    |--styles.css
    +--template.tpl

All stuff in one folder. Looks very nice.

The module in main.js would look something like this:

define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {

    // Load CSS (Pseudo Code)
    var cssUrl = "myWidget/styles.css";
    appendToHead(cssUrl);

    return function() {
        return {
            render: function(data) {
                  return TemplateEngine.toHtml(template, data);
            } 
        }
    }
});

Questions are now:

1. Am I missing something?
2. Are there any plugins/concepts how to achieve this in a “standard” way?
3. Is the RequireJS optimizer able to handle the CSS part here, say concat/minify the stylesheets like it does with the JS parts?
4. Any opinions on that? Good or bad?

Answer 1

You can specify the template as a dependency using the text! module like you have shown. I do this with Mustache Templates.

However Require.js does not explicitly support css files.

Here is the official explanation, it’s explained pretty well:
http://requirejs.org/docs/faq-advanced.html#css

Edit: Feb 2012.

Templates such as handlebars can also be precompiled and included just like any other JS module
http://handlebarsjs.com/precompilation.html

Edit: August 2015

If you’re after this sort of modularization you should look into webpack and specifically css-loader. I’m using it to pair .css files with .jsx files as a unified “module” and extract the relevant CSS into a single stylesheet at build time.