Anant Narayanan
Anant Narayanan Dev Evangelist January 29, 2013

BackboneFire: Firebase bindings for Backbone.js

Whenever we talk of server-less applications (and we talk about them a lot here at Firebase!), Backbone.js is one the first terms to come to mind. Backbone is a framework that lets you structure your JavaScript application in an elegant manner, by separating the data in your application from how it is rendered. I like to think of it like MVC for JavaScript.

A lot of you have been asking for an easier way to integrate Firebase into your Backbone app. Today, we’re really happy to announce BackboneFire, our official bindings that make it easy to power your new or existing Backbone apps with Firebase. Backbone apps built with these bindings gain all of the advantages of Firebase:

  • Real-time data updates
  • Easy scaling
  • First-class security
  • Offline data access
  • Rapid development

Check out an example in action - we updated the famous Todo example (that every Backbone developer is probably familiar with) to be completely server-less and real-time. All changes made by a client are automatically synchronized to all other clients, and the DOM is updated instantaneously, Trello-style! Go ahead - try opening the example in two different browsers and adding a few todo items. Note that this is an entirely server-less app, which is why we were able to host it on GitHub Pages.

How does BackboneFire work?

We’ve overridden the Collection object in Backbone so that it synchronizes directly with your Firebase database. With a Firebase-powered Collection, all updates made on one client will automatically be synchronized with our servers and with all other clients. You don’t have to worry about local data or remote data, or how it will be synchronized. There’s just data, and it’s the same everywhere.

Once you include the library, you’ll have access to a new collection object, called Backbone.Firebase.Collection:

<script src="backbonefire.js" type="text/javascript"></script>
<script type="text/javascript">
  var Todos = Backbone.Firebase.Collection.extend({
    model: Todo,
    firebase: "https://<YOUR-FIREBASE-APP>.firebaseio.com"
  });
</script>

You can now use this object as you would any regular Backbone collection, with the important difference being that all changes to this collection will immediately show up on all your other clients!

If you already have a Backbone application where you’d prefer to continue using the sync method to control data changes, BackboneFire can help you here as well. We’ve overridden the sync method to save data to Firebase’s servers and pull in new changes.

Making your Backbone.js powered application real-time is now easier than ever. You can find BackboneFire, along with the real-time Todo example on Github.

Thank you!

We’d like to thank Alex Bain, who wrote the first ever Backbone binding for Firebase, as well as Michael Wulf, Harry Shoff, and Spike Brehm for their extremely valuable feedback on early versions of these bindings.

Finally, we’ll be at the Backbone Study Group tonight (Jan 29th) at AirBnb HQ in SF. Come by and hack with us!

That’s it, grab a beta key and start hacking now.

Share this article

More Firebase Articles

Apr 13, 2016
VueFire - Firebase meets Vue.js
Mar 28, 2016
What's new in AngularFire 1.2
Feb 26, 2016
Come join the Firebase Slack community
Feb 16, 2016
Introducing Firecasts - A YouTube series of Firebase Screencasts
Feb 08, 2016
Firebase - Almost 1.5 years with Google
Feb 02, 2016
Test your skills at the Static Showdown
Jan 26, 2016
Easier write rules in Bolt 0.8
Jan 21, 2016
Keeping our Promises (and Callbacks)
Jan 20, 2016
The beginners guide to React Native and Firebase
Jan 19, 2016
Introducing FirebaseUI with Headful Authentication