• quick startup time
• 90% use case solved
• community

• monolithic
• opinionative
• single point of failure
• lack of interopability

• a la carte libraries
• pick & choose functionality you need / want
• encapsulates functionality into reusable modules
• build targetted applications for exactly what we need / want

• easy way to organize and structure front-end code & assets
• javascript
• templates
• translations
• styles
• moar?
• leverage other people's work (npm)

• point browserify @ top level file
• one file per page/app
• "app bootstrap" file
• dependencies are traversed, and bundled into 1 file

• create an app EventEmitter
• bolt on plugins to app
• app.log
• app.data
• app.translate
• app.router
• map paths to controller functions
• crossroads.js/hasher/history.js
• controller functions require their "components"
• components require their assets
  
• templates
• translations
• styles (css or less)

 div.contianer
	ul.images
		li
			img(src=imageSource)

function template(locals) {
    var buf = [];
    var jade_mixins = {};
    var locals_ = locals || {}, imageSource = locals_.imageSource;
    buf.push('<div class="contianer"><ul class="images"><li><img' + jade.attr("src", imageSource, true, false) + "/></li></ul></div>");
    return buf.join("");
}

 var template = require('./example.jade');

 var template = function template(locals) {
    var buf = [];
    var jade_mixins = {};
    var locals_ = locals || {}, imageSource = locals_.imageSource;
    buf.push('<div class="contianer"><ul class="images"><li><img' + jade.attr("src", imageSource, true, false) + "/></li></ul></div>");
    return buf.join("");
}

• common view mixins
• format functions
• translation functions
• localized templates
  

 <span>{{ helpers.date.relative(myDate) }}</span>

require('./example.jade');

// what you really want for en-US userrequire('./example_en-US.jade'); // fall back to example.jade if it doesn't exist

var tempreg = require('tempreg');
tempreg.register('example.jade', fn); // register a template fntempreg.get(example.jade'); // get a handle to the render fntempreg('example.jade', data); // render it
// mixin common view helpers in one place, even use common npm moduleshelpers = { date: require('moment') };tempreg.on('pre-render', function(data) {    data.helpers = helpers;});
// create scoped instancevar myTempreg = tempreg.create();myTempreg.on('pre-render', fn);

// vanilla template transformvar template = function template(locals) {...};
// register template with tempreg in transformvar template = require('tempreg')    .register('example.jade', function template(locals) {...})    .get('example.jade');
template(data); // renders template via registry, calling all pre-render hooks

• May reduce cache benefits gained by having css as separate files
• Can cause "jumping" if used on a non single-page-app.
• markup rendered prior to styles being injected into head


• No need to manage a separate manifest of what css files are needed where.  
  
• Let them live with their components, and be required there as well.

var inserted = [];

module.exports = function (css) {
    if (inserted.indexOf(css) >= 0) return;
    inserted.push(css);
    
    var elem = document.createElement('style');
    var text = document.createTextNode(css);
    elem.appendChild(text);
    
    document.head.appendChild(elem);
};

// these styles are automatically bundled into this javascript filerequire('./index.less');// they have now been appended to the document in a style tag

• determine how best to share common variables and mixins
• import in each file
• write a transform that automatically prepends them to the file contents before compiling