Calvin's Maps

Let’s build a Pouchdb app we aren’t ashamed of & backbone.js explained without words that start with C,M,or V

The previous post, while it showed the basics of pouch produced an app that is frankly not ready for prime time. So in this post we refactor the app and turn it into something less embarrassing. We are going to use the fantastic library backbone.js, written by the authors of a little language that turns into JavaScript, to tidy the app up, which will require an explanation of backbone. 

I’ve been aware of backbone for quite a while but my reaction every time someone tries to explain it has always been “yes but what does it do?” I blame this on the proliferation of libraries and frame works built around the letters C, M, and V which all use terms starting with those letters in similar but divergent ways, so for the rest of this post we will be using no words that start with those letters. If don’t care about backbone you can go right to the updated app or read about how I improved it.

The first basic part of backbone we will refer to as an “item template” though backbone uses a term that rhymes with “bottle.” You can think of this as representing a blueprint for a thing: in SQL it might be equivalent to a row, in PouchDB and MongoDB this might be a document, in Neo4J it might be an edge or node. When you add data you actually make a new instance of your item template (aka use the key word “new”).  Your item template can define tests that data needs to pass to be added and ways to serialized or transform your data for export, and can fire events when items are added, removed, updated etc.

The next portion we will refer to as a group of items, but backbone uses a term which rhymes with “selection.” A group is really what it is and in SQL it would be like a table and in PouchDB it would be like a DB.  You use a group to not only to attache some events, like watching for updates to a specific attribute across all items, but as an object you can use all of underscores functional tools on. You can run map,reduce,filter,pluck,each and more on your group to easily get just the data you care about.

The third and final of the essential parts of backbone is what I’m going to refer to as a supervisor but backbone refers to with a word that rhymes with “queue”. If this was that show about the extravagant houses of of famous artists then this would be the bedroom. I call it a supervisor because it supervises a specific element of the page and it is the only thing that touches its element. And how do you get the supervisor to know when to do something? By having it listen for updates to a group and events in the dom inside its element. This is the gist of backbone, its key usefulness is segregating the logic so that like is grouped with like. So if you want to get rid of a side bar all if the logic related to it is in one supervisor. Now enough introduction go look at the updating the pouchDB app with backbone.

  1. cwmma posted this