Fauxton-components.md

Fauxton components

We use many libraries to build Fauxton. Below are a list of the libraries that we use to make Fauxton. Having a decent understanding of these libraries will make it easier to contribute.

##Backbone.js

The main core library that is used to build Fauxton is Backbone.js. Backbone.js is a powerful and very small MVC library. Backbone.js on its own doesn't give us enough features that we need for Fauxton.

To give us some more features and structure, we combine Backbone.js with backbone.layoutmanager. Backbone.layoutmanager handles all the view rendering for us and manages nested views (views within views). It also adds in beforeRender, afterRender and cleanup methods to views that create a predictable way of working with views.

##RouteObjects

On top of those two libraries we have created RouteObjects, this is Fauxton specific functionality that we built. A RouteObject allows us to create modular components. The basic idea of a RouteObject is:

• Create specific routes for a module (instead of having a very large global router)
• Have longer running views that are visible across different routes (no need to re-fetch data)
• Have "Route Events" that allow us to co-ordinate multiple view's state depending on a specific change

To learn more about RouteObjects read this detailed doc on how they work.

##Underscore

Underscore.js is a powerful library that gives us many utilities to make programming in Javascript easier. Below is a list of some of the ones we use often and are good ones to know.

• _.each, _.reduce, _.map, _.filter are all functions that making working with arrays easier. Use these over forloops and only use _.each if none of the other functions are suitable.
• _.bind can be used to bind a specific context to a function. Instead of having to do that.myMethod, you can bind it first and then later just call the method.
• _.isUndefined and _.isNull are nice eloquent way of checking the state of a variable.

jQuery.Deferred

A jQuery.Deferred is a promise-like object that makes working with asynchronous code much easier. We use these wherever we can. Most often we use these when making ajax request. Learn Query has a nice introduction to them.

Require.js

This is used to load dependancies and modules. Take a look at our require.js config to see how it is setup.