roosevelt

roosevelt.js

Roosevelt is a web framework for Node.js which uses teddy.js for HTML templating and LESS for CSS preprocessing.

Built on Express.js, Roosevelt is designed to abstract all the crusty boilerplate necessary to build a typical Express app, sets sane defaults with mechanisms for override, and provides a uniform MVC structure for your app based on EventEmitter.

Why use Roosevelt?

Roosevelt is easy to use and has a low learning curve, unlike many other popular Node.js-based web frameworks.

Reasons for this include:

• Minimal boilerplate to get started. All the magic of Express.js is preconfigured for you.
• Default directory structure is simple, but easily configured.
• Concise MVC architecture driven by EventEmitter.
• Teddy.js HTML templates are much easier to read and maintain than popular alternatives.

Make a Roosevelt app

Install the command line tool globally:

npm install -g roosevelt

Use the command line tool to create a sample app:

roosevelt create myapp

Change into your new app's directory and then install dependencies:

cd myapp
npm install .

Run the app:

npm start

Default directory structure

• app.js: main app file
• mvc: folder for models, views, and controllers
  • controllers: folder for controller files
  • models: folder for model files
  • views: folder for view files
• statics: folder for CSS, images, JS files, LESS files, and other statics
  • css: folder for CSS files
  • i: folder for image files
  • js: folder for JS files
  • less: folder for LESS files

Minimal boilerplate

All that's in app.js is this:

global.app = require('roosevelt'), app({
  /**
   * params:
   *
   * param name:      default value
   *
   * name:            'Roosevelt Express'
   * port:            43711
   * modelsPath:      'mvc/models/'
   * viewsPath:       'mvc/views/'
   * controllersPath: 'mvc/controllers/'
   * imagesPath:      'statics/i/'
   * cssPath:         'statics/css/'
   * lessPath:        'statics/less/'
   * jsPath:          'statics/js/'
   * customStatics:   { something: 'statics/something', something_else: 'statics/something_else' }
   * customConfigs:   function() { put custom Express config code here }
   */
});

Roosevelt is designed to have a minimal amount of boilerplate so you can focus on just writing your app. All parameters are optional.

Note: app must be defined as a global variable so that your models and controllers can access its utility methods later.

Configure your app

Inside app.js, you can pass any of the following optional parameters to Roosevelt:

Option	Description	Default
name	The name of your app.	Roosevelt Express
port	The port your app will run on.	43711
modelsPath	Path on filesystem to where your model files are located.	mvc/models
viewsPath	Path on filesystem to where your view files are located.	mvc/views
controllersPath	Path on filesystem to where your controller files are located.	mvc/controllers
imagesPath	Path on filesystem to where your image files are located.	statics/i
cssPath	Path on filesystem to where your CSS files are located.	statics/css
lessPath	Path on filesystem to where your LESS files are located.	statics/less
jsPath	Path on filesystem to where your JS files are located.	statics/js
customStatics	Custom-defined object containing a list of static paths to map, e.g. { something: 'statics/something', something_else: 'statics/something_else' }. Note: setting this param overrides and supersedes imagesPath, cssPath, lessPath, and jsPath.	undefined
customConfigs	Use this to define a custom function to be executed during the Express config stage if you need one, e.g. function() { put custom Express config code here }.	undefined

Making controllers and models

URL endpoints (also called routes) are defined by controller files.

The Roosevelt framework will automatically assign a route matching each controller's filename.

As such, to make a new route, just make a new file in the controllers directory.

For example, suppose we make a new file in mvc/controllers called hello.js.

That will make a new URL endpoint /hello on your app.

Here's a sample hello.js controller:

// loads "mvc/helloModel.js" and passes the req (request) and res (response) objects from Express
module.exports = app.loadModel('helloModel');

// listens for a "helloReady" event to be emitted by the "mvc/helloModel.js" model
app.on('helloReady', function(res, model) {

  // when the model emits the event, it will pass along the res (response) object from Express
  // along with the fully composed data model from "mvc/helloModel.js"
  res.render('hello.html', model);
});

The above controller file will make a new URL endpoint /hello on your app and load a model from the mvc/models directory called helloModel.js.

When the helloModel.js model is done gathering the data the view will need, it is expected that it will emit an event called helloReady which will be caught by your hello.js controller so that the hello.html view can be rendered with the fully composed model.

As such, your helloModel.js file should look something like this:

// the passed vars req (request) and res (response) objects come from Express
var model = function(req, res) {

  // do whatever magic you need to do to define your data model here
  model.data = {some: 'data'};
  
  // now fire the event which will pass control back to the controller
  // pass along res (response) from Express and your new fully composed data model
  app.emit('helloReady', res, model.data);
};

// this line is necessary to make the model loadable by a controller
module.exports = model;

That's it. Just follow that pattern to do MVC in your app.

LESS CSS support

Roosevelt will automatically compile any LESS (.less) files in your LESS folder down to minified CSS (.css) files of the same name in your CSS folder.

In the process it will overwrite any preexisting CSS files of the same name, so be careful.

The CSS minifier used by LESS is YUI Compressor.

Missing features

Here are some things still left to be implemented:

• Support for templating engines other than teddy
• Support for CSS preprocessors other than LESS
• HTTPS support
• Support for more custom HTTP status code error pages
• Probably many other things

Dependencies

• events (bundled with Node.js) - a default Node.js module which provides an event emitter
• fs (bundled with Node.js) - a default Node.js module which provides filesystem access
• http (bundled with Node.js) - a default Node.js module which provides HTTP web server support
• express - a minimal and flexible node.js web application framework
• teddy - an easy-to-read, HTML-based, mostly logic-less DOM templating engine
• LESS - dynamic CSS language extensions
• less-middleware - Connect middleware for LESS compiling
• wrench - used by the CLI tool to help you create your sample app

License

All original code in Roosevelt is licensed under the Creative Commons Attribution 3.0 Unported License. Commercial and noncommercial use is permitted with attribution.