ƒ

A Backbone framework that encourages code re-use

ƒ helps you build large, modular apps.

Dead simple inheritance, nested components, view rendering, and easy REST integration.

Doesn't reinvent the wheel.

Using Backbone, jQuery, and Handlebars, ƒ provides a simple way to modularize large JavaScript applications.

Stays (pseudo) classy.

ƒ uses PseudoClass, an OOP framework that lets you create building blocks that you can extend, mixin, and re-use.

Getting started is easy.

1. Create a namespace:

Nobody likes global variables. Keep it neat with a namespace.

var App = {};

2. Build your components

Anything that needs a model, view, or controller can be a component.

App.Welcome = new Class({
	toString: 'Welcome',
	extend: F.Component,

	// Add custom events to your view
	View: F.View.extend({
		events: {
			'click .sayHi': 'sayHi'
		}
	}),

	// Store templates and events here so they can be overridden
	Template: Handlebars.compile(
		'<strong>Welcome!</strong>'+
		'<button class="sayHi">Say hi!</button>'
	),

	construct: function(options) {
		// Pass constructor options to the view
		_.extend(options, {
			// Render this component with our template
			template: this.Template,
			// Let events call this component's methods
			component: this
		});

		// Create your view, no need to render!
		this.view = new this.View(options);
	},

	// Define your methods
	sayHi: function() {
		alert(this.toString()+' says hi!');
	}
});

3. Setup your app

Your app is just another component.

App.Main = new Class({
	toString: 'Main',
	extend: F.Component,

	// Use F's default view
	View: F.View,

	// Store the template in the prototype so it can be overridden
	Template: Handlebars.compile(
		'<h1>Killer App</h1>'+
		'<div class="welcome"></div>'
	),

	construct: function(options) {
		// Config is always passed to the constructor
		console.log('%s: started. Options:', this, options);

		_.extend(options, {
			// Add this component to body of the page
			el: document.body,
			// Render this component with our template
			template: this.Template,
			// Let events call this component's methods
			component: this
		});

		// Create a view for the app
		// Render right away if you use selectors below
		this.view = new this.View(options);
	},

	// Called when this component is shown
	setup: function() {
		// Add your components
		this.addComponent(new App.Welcome({
			// show the component immediately
			visible: true,
			// add the sub-component to element div.welcome
			el: this.view.$('.welcome')
		}));
	},

	// Called when this component is hidden
	teardown: function() {
		this.removeSubComponents();
	}
});

3. Create an instance of your app

Fire it up!

var myApp = new App.Main();
myApp.show();

ƒ