Using Firebase and AngularJS with AngularFire

http://www.flickr.com/photos/jay_que/3476940249/

This past week I been taking a closer look at Firebase. In particular I have been looking at using AngularJS in combination with it in order to create web apps which don't require any significant back-end code. This has been made a bit easier with the recent(ish) release of AngularFire which is probably the easiest way to connect the two technologies up.

Firebase

Firebase is (in their own words) a "scalable real-time backend". You use it as a repository for your data, which is a great start, but there is a lot more. It's not simply a dumb data store - you get informed in real-time of any changes to that data and can then act accordingly.

This makes Firebase a natural fit for real-time web applications, the typical example being a chat app. Clients visit a page which causes a connection to the Firebase server to be set up. As they then submit messages, these are sent to Firebase, stored and then propagated to all other clients.

The beauty of Firebase is its simplicity. For example, I have been using the node.js library in order to populate my Firebase, and it was a total breeze to connect and push data to. The documentation is also excellent, partly because it's so simple.

One thing to be aware of when using the Firebase library from Node is that because various websocket connections are set up, your script will not exit after is is done processing, so you will need to exit()  manually. This tripped me up for a while until I realised why my script wasn't exiting after populating the Firebase with some initial data.

I used Firebase to hold the information I scraped from the British Board of Film Classification (BBFC) about the various so-called "insights" they note about films. These are comments like "Contains infrequent strong sex and post mortem gore" which are often more useful in deciding what to watch than the plot summary. My scraper was written in CoffeeScript (Node.js in disguise) and simply extracted the insights, parsed each word and stored the information on Firebase, indexed by these words.

AngularJS

AngularJS is "HTML enhanced for web apps". By adding various additions to your HTML you can get interactive pages with minimal effort. I have used it previously for a domain search tool I created - Snaggol but I have only scratched the surface. The documentation is a lot more complicated than Firebase, but that is more of a result of there being a lot more to the library.

There even seems to be a trend of documentation popping up for Angular with the Egghead videos, and some nice Angular resources to complement the official tutorial.

I'm definitely in the beginner camp when it comes to Angular and am still taking baby steps with it. However, I do love the way that interactivity can be added so easily to a page without having to deal with all sorts of jQuery magic.

I used AngularJS to provide a very simple client-side search functionality. Basically as you type into a text box, the list of search results gets whittled down and you can watch the results changing as you type. It provides a very easy and natural way to achieve this functionality without having to worry about connecting  jQuery events up correctly.

AngularFire

AngularFire is the glue that connects these two technologies together that allows you to connect and forget. By using AngularFire you can quickly obtain a web app that reflects in real-time the contents of your Firebase store.

I used AngularFire just because it was there and it seemed the easiest way to connect my Angular controller to my Firebase so that all the data was readily available without a fuss. Weirdly, for the first time using a new library, I had no problems at all! Admittedly it was probably overkill as for my app, the data on the Firebase store isn't changing often (in fact when I wrote it originally, it wasn't changing at all, but it should now update daily as I scrape the BBFC site).

The result

Having stuck it all together, the final result can be seen here: search the latest BBFC decisions by their insights. Type your interest into the box - be it "sex", "violence", "swearing" or whatever and see what films have an insight related to it, according to the BBFC at least. There are only a couple of days worth of decisions in there at the moment, so there isn't that much to see - but as a proof of concept I hope it does a good enough job.

I'd love to hear of other people's experiences with Firebase and AngularJS and am very open to suggestions on how I can improve by simple little app!