Skip to content

Extensions, Plugins, Resources

Dmytro Yarmak edited this page Feb 22, 2014 · 256 revisions

Dependencies

Underscore.js

Backbone's only hard dependency. http://underscorejs.org

JSON2.js

Needed if you'd like to parse and serialize JSON in older browsers (read: "Internet Explorer") https://github.com/douglascrockford/JSON-js

jQuery

Recommended for DOM manipulation and Ajax. http://jquery.com

Lo-Dash

A performance-minded Underscore alternative with customs builds and additional features. http://lodash.com/

Zepto

A jQuery alternative for mobile apps http://zeptojs.com

NB: Zepto isn't fully compatible with jQuery, use at your own risk

Backbone.Native

A tiny drop-in replacement for jQuery to allow Backbone to work while relying on only native DOM APIs. https://github.com/inkling/backbone.native

Exoskeleton

A faster and leaner Backbone for your HTML5 apps. http://exosjs.com

Backbone fork with 100% optional dependencies, speed improvements and other enhancements.

Development Tools

Backbone Eye

A Firebug extension to debug Backbone based applications running off web-browsers. Understand Backbone application behavior without wading through JavaScript code. Work with application level constructs, pursue what-if exploration and more...

https://github.com/dhruvaray/spa-eye

Backbone Debugger

Chrome Developer Tools extension for debugging Backbone.js applications. Displays in real-time all the application views, models, collections and routers, with detailed information such as handled jQuery events, model attributes, collection models, sync status, events triggered and more.

https://github.com/Maluen/Backbone-Debugger

Model

Backbone.DocumentModel

Backbone.ModelAttrs

Backbone.ModelMorph

  • Create a new model with computed properties from an existing model and a schema that keeps itself up to date (great to use as a serialized model for templates - separates original model and computed properties while still being reactive).
  • https://github.com/rhysbrettbowen/Backbone.ModelMorph

Backbone.Schema

  • The plugin helps you define schemas for your models. It supports a regular types, arrays, nested or reference models/collections, allows to define a custom data types and computable properties.
  • https://github.com/DreamTheater/Backbone.Schema

Backbone Forms

Generate customisable forms from your model schema. Features include custom editors, nested forms, editable lists and validation.

backbone-deep-model

Improved support for models with nested attributes. Get and set attributes and listen to changes on them using a path, e.g. get('user.address.ln1').

Backbone-Nested

A plugin to make Backbone keep track of nested attributes.

backbone-nestify

Nest Models and Collections within Models and Collections.

Backbone.trackit

A small plugin that manages model changes that accrue between saves, giving a Model the ability to undo previous changes, trigger events when there are unsaved changes, and opt in to before unload route handling.

Get the code and read the documentation:

Backbone.Undo.js

A simple undo manager that creates undo points based on triggered events. Suitable for small to mid-sized applications.

Get the code and read the documentation:

Backbone.Memento

Create undo points to store / restore your model's state.

Get the code and read the documentation:

Backbone.actAs.Mementoable

Memento pattern realization for Backbone.js models with more flexible API than in Backbone.Memento

Backbone.actAs.Configurable

Simple helpers to configure your models from one configuration object.

Backbone.Articulation

Backbone.Validation

Backbone.Validator

Backbone.Validator

backbone-view-model

Backbone.ModelRef

  • Lets you build your views while you wait for models to load.
  • Notifies you when a model unloads so you can change your view state.
  • Compatible with Knockback.js (https://github.com/kmalakoff/knockback)

Pretty much just a collection and model id reference. Simple, but useful.

workflow.js

Backbone Dotattr

Backbone.Mutators

Backbone.Chosen

Backbone fetch cache

Backbone.UniqueModel

Backbone.Model.toggle

Backbone.Id

Backbone.Timestamp

backbone-signal

Backbone.ComputedModel

Storage

Backbone.localStorage

backbone.couchdb.js

Backbone.ioBind

Backbone-websql

Backbone.WebSQL.Deferred

Backbone-slet

Backbone.SharePoint

Backbone.SAP

Backbone.Offline

Backbone.Rpc

Backbone.Safe

Backbone.Flexisync

  • Overrides Backbone.Sync, and allows fetching from remote servers, localstorage, and an in-memory store.
  • Allows custom data stores to be added (planned: load data from a js config file).
  • Can combine data from multiple sources at fetch time.
  • https://github.com/nicoburns/Backbone.Flexisync

Backbone-mongodb

Backbone-Windows Azure Mobile Services

Backbone Faux Server

  • A (tiny) framework for mocking up server-side persistence / processing directly in JS.
  • Overrides Backbone.sync providing hooks ( per resource, per HTTP verb ) for your own custom persistence / processing scheme.
  • https://github.com/biril/backbone-faux-server

Backbone.MiddlewareSync

Backbone.dropboxDatastore

Relations

Backbone-relational

Backbone-associations

Backbone.Rel

Ligament

backbone-orm

Backbone.fetch_

Backbone.NestedAttributes

Collection

Backbone.ModelRegistry

backbone-pageable

A pageable, very well tested, drop-in replacement for Backbone.Collection. Supports client-side and server-side pagination, infinite paging, single page and global sorting, and client-side bi-directional event handling. Inspired by Backbone.Paginator, but much better. (Will replace Backbone.Paginator soon)

backbone-cappedcollection

Capped Collections for BackboneJS.

Backbone.actAs.Paginatable

Load your collections piece by piece. Very useful for large model sets.

Nesting.js

Simple helper function that makes it easy to work with nested Backbone collections

Backbone.CollectionSubset

Create subsets of collections using filter functions that automatically update allowing you to create a tree of collections that is always in sync.

Backbone Query

Provides NoSQL queries (like MongoDB) for backbone.js collections

Query Engine

Provides extensive querying, filtering, and searching functionality for backbone.js collections

  • includes live interactive demo
  • source-code documentation only
  • runs on node.js and in the browser
  • supports NoSQL queries (like MongoDB)
  • supports filters (applying a filter function to a collection)
  • supports search strings (useful for turning search input fields into useful queries)
  • supports pills for search strings (e.g. author:ben priority:important)
  • supports optional live collections (when a model is changed, added or removed, it can automatically be tested against the collections queries, filters, and search string, if it fails, remove it from the collection)
  • supports parent and child collections (when a parent collection has a model removed, it is removed from the child collection too, when a parent collection has a model added or changed, it is retested against the child collection)
  • https://github.com/bevry/query-engine

Backbone fetch cache

Backbone.Facetr

Provides filtering of Backbone collections using facets

Backbone.Projections

  • Implements projections for Backbone.Collections. A projection for a collection is an another collection which contains a subset of models from an underlying collection and stays in sync with it.
  • By default projections maintain an order induced by underlying collection but an order can be customized with a comparator
  • Provides CappedCollection projection, a projection restricted by a number of elements
  • Provides FilteredCollection projection, a projection restricted by some predicate
  • Projections can be composed
  • https://github.com/andreypopp/backbone.projections

Backbone-Fill-Collection

Backbone.SelectableCollection

Backbone.CollectionFilter

Backbone.Index

Backbone.Memoize

Backbone.Obscura

  • A read-only proxy of a Backbone.Collection that can easily be filtered, sorted, and paginated.
  • Can add / remove multiple filter predicates at any time
  • All of the component pieces are split out into their own modules and can be used on their own if you only need e.g. pagination.
  • https://github.com/jmorrell/backbone.obscura

Backbone.SimplePaginator

View

Backbone.Assembler

Plugin for Backbone that makes it easy to manage nested views

Backbone.React.Component

Data bind your models and collections to a Backbone.React.Component (a React.Component with some features borrowed from Backbone and Backbone.View)

  • Components can be extended (just like Backbone.View)
  • Components can receive either a model or a collection, both or many of them
  • It relies on reactive updates through props instead of force updating the component
  • $el and $ support like in Backbone.View
  • Works on the server side by using toString method
  • https://github.com/magalhas/backbone-react-component

Backbone.ViewOptions

A mini Backbone.js plugin to declare and set options on views.

Backbone.Epoxy

Data binding for Backbone:

  • computed model & view attributes & automated dependencies mapping
  • declarative view bindings either in the view or in the template
  • automatic view updates, with support for common filters
  • extensible for custom requirements

Github: https://github.com/gmac/backbone.epoxy

Backbone.DataBinding

Backbone.CollectionView

Render Backbone.js collections with ease.

Backbone.ComponentView

based on Closure Library's goog.ui.Component

LayoutManager

Backbone.ViewEvents

An alternative Events implementation for the Backbone.View which provides events which bubble up through a view hierarchy while the latter is inferred from the DOM and the views' position in it.

Backbone.Courier

Easily bubble events up your view hierarchy.

Backbone.Subviews

A minimalist view mixin for creating and managing subviews in your Backbone.js applications.

Backbone.ViewMaster

Backbone.Stickit

Model-View binding in Backbone style.

Yabbe (Yet Another Backbone Binding Exension)

Synapse

Backbone.ModelBinder.js

Simple, flexible and powerful bidirectional view-model binding for backbone. A javascript only solution (no markup in html) that relies on jQuery delegates for binding. Similar to how backbone view event blocks work.

  • Handles partial view binding, nested views, formatting, type conversion, arbitrary html attributes and most html element types.
  • JS Weekly Article
  • Git

Backbone Bindings

Bi-directional bindings between Backbone.View elements and Backbone.Model attributes.

Backbone.ModelBinding

Awesome model binding between models and form input elements, and more

  • KnockoutJS-style data-bind attribute support
  • Bind form fields to models and vice-versa
  • Convention based
  • Pluggable with your own conventions
  • Extensible to bind to more than just form input elements

Get the code and read the documentation:

Knockback.js

Knockout bindings for Backbone.js models and collections.

Backbone on the Couch

A little plugin for use in leanback apps, where someone is sat on the couch using a remote control to use your app.

ProxyDollar

Plugin that proxies jQuery/Zepto/$ functions for Backbone Views.

Backbone.declarative

A small plugin that adds declarative model and collection event binding to Backbone Views.

outback.js

KnockoutJS-inspired declarative binding solution for Backbone Views.

  • KnockoutJS-compatible binding handler API
  • Explicit control over dependencies (e.g. cascading select boxes)
  • Unobtrusive (i.e. code-based) and declarative (i.e. markup-based) configuration
  • Multiple binding contexts for separating transient and persistent models.
  • Tests, TodosMVC, and examples.
  • https://github.com/politician/outback

Backbone.BindTo

Extension for automatic binding and unbinding of model events to views. It defines two special view attributes - bindToModel and bindToCollection. They are handled similar to events attribute, but instead of binding to dom events they bind to model/collection. Also this plugin takes care of cleaning events after the view is removed.

https://github.com/RStankov/backbone-bind-to

Backbone.Widget

Make jQuery widgets/plugins from your Backbone Views.

Backbone.ViewKit

View management and transitions geared toward mobile applications.

Backbone.ViewDSL

http://andreypopp.github.com/backbone.viewdsl/ or install via bower bower install backbone.viewdsl

Backbone.ViewDSL is a tiny library which provides a DSL for defining Backbone.View hierarchies. If you are tired of manually composing views in your Backbone application and want to get rid of all accompanying boilerplate then this library could help a bit.

Backbone.ViewDSL provides a DSL built on top of HTML with the following features:

  • view instantiation (optionally loaded from AMD modules)
  • conditional exclusion of DOM elements from a final result
  • string and DOM node values interpolation

backbone.managedview

It is an extension for Backbone.View, which adds views management logic and structure. It's common for a view to have multiple subviews, but in Backbone.View managing subviews has to be done manually. This extension manages rendering a view and its subviews. When a view is removed, this extension also manages the subviews removal.

https://github.com/steverandy/backbone.managedview

Backbone.Notifications

Global notification mechanism for Backbone.

Backbone.touch

Monkey patch Backbone.View to enable fast tap events on touch devices.

https://github.com/nervetattoo/backbone.touch

Backbone.keys

Easily add keyboard support in your Backbone views

https://github.com/nervetattoo/backbone.keys

Backbone Baguette

Backbone on steroids : super lightweight Backbone extension that provides boilerplates Views to write dramatically less code

http://baguette.io

Backbone View Enhanced Events Declaration

Declare a chain of callbacks for a particular event declaration in the View

Backbone.ViewManager

Backbone.ViewModel

Backbone.Component

kettle.js

A rapid, bottom-up approach to developing Backbone views:

  • Efficient and automatic view rendering. No need for a render method, views will automatically render based on the events you define.
  • Custom two-way data binding. Easily tie a DOM element to a model attribute.
  • Automatic sub-view management. Automatically handle add, remove, reset and sort events on a collection.
  • The bottom-up, element-first approach greatly simplifies the design of most views

Documentation and Examples : http://smelnikov.github.io/kettle/

Backbone.Hotkeys

Controllers

Backbone.Controller

Templates

Backrub

Helpers

Builder (DOM Builder for Backbone Views)

Backbone.Ext

  • Backbone.*.super, Backbone.*.create — useful shortcuts for class/instances
  • Backbone.Helpers.flatten, Backbone.Helpers.unflatten to work with nested objects (mostly for model nested attributes)
  • Source: https://github.com/fantactuka/backbone-ext

Events

Backbone.EventBroker

Provides a general purpose Event Broker implementation for Backbone based on the Backbone Events API.

Namespaced Events

jQuery style namespacing (http://docs.jquery.com/Namespaced_Events) of Backbone's Events object

backbone-structured-events

Use delimited notation to reorganize the flat Backbone event stack into a nested hierarchy in order to allow easier implementation of grouped event actions.

Declarative Events

Declarative event bindings for Backbone models, collections, subviews, and pub/sub.

Backbone.global

A simple way to listen to global triggers in Backbone.js applications.

Widgets

Backgrid

A semantic, easily stylable, light weight and yet extremely flexible set of widgets for building data grids.

Slickback (integration with SlickGrid)

bbGrid

That's an extendable grid system (jqGrid like) developed on Backbone, Twitter Bootstrap and jQuery.

Vienna IKS Editables

Backbone.Aura

Backbone.Aura is a decoupled, event-driven architecture on top of Backbone.js for developing widget-based applications

Backbone Package Template

This is not framework. It's just Backbone.js + Require.js + CoffeeScript application structure.

https://github.com/artyomtrityak/backbone-package-template

Backbone.Modal

Backbone.Modal.js removes boilerplate code and adds default behaviors and interactions. You can create a simple dialog modal or complex wizards with stacked modals on top of each other in a few lines of code.

Routing

jQuery Mobile Routing

Before/After Filters

Query Parameters

Query-String

  • https://github.com/kr1zmo/backbone-query-string - A lightweight extension of Backbone.Router that defines a constructor-function/sub-class that can be utilized separately not affecting Backbone.Router. It will supply a query-string object in route callbacks. Currently, supports AMD (requirejs).

AppRouter

Multi-Router

  • https://github.com/tgriesser/backbone-multi-router - Allows multiple routers which each independently match a routes to the current url. Useful when you have separate features which may match different route patterns on the same history (e.g. one for layout, one for a site tour widget, one for analytics).

Backbone Router Title Helper

Frameworks

Backbone Boilerplate

Backbone.CQRS

Capt by Ben Nolan

Chaplin

  • https://github.com/chaplinjs/chaplin - An opinionated, full-featured architecture framework for creating complex single-page applications with a strong emphasis on memory management and class heirarchies. Includes a powerful CollectionView class, rails-style routing with proper params hash, and controller patterns.

Backbone.Giraffe

  • https://github.com/barc/backbone.giraffe - Backbone.Giraffe is a light and flexible library that extends Backbone.js to new heights. Giraffe's goal is to follow the Backbone philosophy of unopinionated simplicity to provide commonly needed features with few assumptions. It takes a different approach to the problems of route handling, object lifecycles, event aggregation, and view management.

Backbone.Marionette

Make your BackboneJS apps dance with a composite application structure!

Mixin.js

  • Provides mixin classes for a local collections (not stored on a server) and for mixing Backbone.Events into any class (including a check if they are mixed-in).
  • Provides a facility to use Backbone.Events trigger('destroy') to do memory cleanup instead of a destroy method (event-based instance life-cycles).
  • https://github.com/kmalakoff/mixin

Backbone Module (Module loader for Backbone apps)

  • Not a JS loader like require.js, but a way to structure your code in big Backbone app projects.
  • Load JS without worrying about load sequence and dependencies between modules.
  • Source: https://github.com/juggy/backbone-module

Singool.js

Backbone-Traversal

Backbone.Brace

Base

  • Angular inspired live templates
  • Ember inspired view hierarchy management and event bubbling
  • Plugin architecture for maximum code reusability
  • Web components and custom HTML tags for dead simple view hierarchy construction
  • https://github.com/steve8708/base

Nebula

  • https://github.com/hegdeashwin/Nebula
  • Nebula is an open source application skeleton for a typical Backbone web apps. You can use it to quickly bootstrap your Backbone web application projects.

Other

Backbone-Polling

Backbone.Advice: Functional mixins for Backbone modules

Nerve: Mediator for application level message passing

Backbone.Analytics: Drop-In Google Analytics For Backbone's Router

Backbone-Callbacks: Node.js style callbacks for asynchronous methods

Backbone.CrossDomain: Drop-in support for CORS in IE7/8/9 in Backbone.sync()

Backbone.jFeed: RSS/ATOM Feeds For Collections

Cleaning Up And Preventing Memory Leaks With Your Views

Thingy-Client

Backbone (adapted for MooTools)

Backbone-Factory

Backbone.StateMachine

Backbone-FSM

Backbone.StateManager

Backbone.Mousetrap

Backbone.Shortcuts

Brunch

  • http://brunch.io - provides a powerful, rails-like directory structure and a powerful, extensible set of component generators (for working with Jade, handlebars, sass, less, stylus, etc.)

Backbone Tastypie

  • Modifications to Backbone's Model an Collection so that they play nice with django-tastypie. Includes a way to easily paginate over a resource list and a way to access the associated meta information.
  • https://github.com/amccloud/backbone-tastypie

Backbone Interface

  • Errors are thrown when Backbone instance does not have all the required methods of the interface.
  • Better organized code. Keep your interfaces separate, with comments - a well-documented reference point for the methods in your Models, Collections, Views, and Routers. (Not for production).
  • https://github.com/luke-siedle/backbone-interface

Backbone.Service

Backbone.GoogleMaps

Grunt Init Backbone Plugin

Backbone.BasicAuth

Backbone.raphael

BackPlug.io

  • Indexes all Backbone plugins (from Github > package.json files) and you can search through them.
  • http://backplug.io/

Backbone.Beamer

  • Beamer is a "platform" for developing extensions for Backbone's prototypes (View, Model, Collection, Router). Its purpose is to ease hooking to backbone's prototypes methods - "initialize", "render" etc and make the extension easier for developers. Above All - Beamer is an Extension Manager - it's suppose to be the package manager of Backbone for plugins.
  • https://github.com/orizens/Backbone.Beamer

Backbone.List

Backbone.EasyBind

Backbone.Extended

Role

Backbone-Deferred

  • Adds the ability to use the deferred pattern with models and collections when fetching, saving, or destroying
  • Supports jQuery Deferred and Q Promises
  • Backwards compatible to passing callbacks and provides same API across libraries.
  • https://github.com/arhea/backbone-deferred

Backbone.Module

Backbone Bootstrap Widgets