Firebase + Polymer = Mostly Awesome

After hearing about the human genome project I became interested in bioinformatics. I have been keeping a list of terms that has outgrown the JSON file I have been storing them in. So I decided to create a Polymer/Firebase web app to store them online.

The Firebase data store acts like a large JSON document. It acts like a large tree with urls for the branches. You can edit parts of the tree at a time. The real magic of Firebase is the automatic synchronization of data across browsers/apps. This would be ideal for a collaborative app, but for a dictionary isn’t necessary.

Using the Firebase hosting was REALLY easy. Once setup it is as simple as “firebase deploy” to update the website. I was really pleased with how simple this was.

It wasn’t all roses however. I wanted to use polymer iron-list with firebase-collection. The two seem incompatible without modifying the JSON list returned by Firebase to add “index” values. I think the problem is they are two different approaches. Firebase acts as a dynamic list and iron-list is a really fast static list. Instead I used a template “dom-repeat” and that worked fine.

The real pain was a problem with vulcanizing index.html. I ended up with random javascript after the <body> tag. The vulcanization process in gulp was finding some javascript that creates html inside the firebase.js file. The solution was to tell vulcanize to exclude firebase.js. I came across this fix here.

.pipe(vulcanize, { inlineScripts: true, inlineCss: true, stripComments: true, excludes: [path.resolve(‘./dist/bower_components/firebase/firebase.js’)] })

Overall this was a really easy project to throw together. You can checkout the finished project at biodictionary.firebaseapp.com.