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:
- Am I missing something?
- Are there any plugins/concepts how to achieve this in a "standard" way?
- Is the RequireJS optimizer able to handle the CSS part here, say concat/minify the stylesheets like it does with the JS parts?
- Any opinions on that? Good or bad?