JavaScript and Maps (in that order)

Lets make an app: PouchDB

This is part 3 in a series, you can (and should) checkout part 1 and part two, we’ll wait. 

So we’re going to make an app, first remember that class we made last time, I had to make a few changes to get it to work, so overall it looks like this

Why you ask? A couple of indentations errors (that nobody caught) but mostly the stop and start methods because I noticed that your browser doesn’t always get the message whey your back on again after going offline, those methods allow you to stop the continuous replication and start it again to get things to sync.

We’re going to make an app that allows you to write notes that others can see and edit, and should work when you go on and off line, this may seem trivial, but checkout @axemclion's conference app which does something very similar but in a useful way. 

So originally I was going to make this in backbone.js but instead I discovered /r/cats decided to do it slightly lover level to demonstrate the principles involved.  The structure of the app is going to be as follows;

  1. We have an object called ‘obj’ which has all the documents we care about from the pouch, our on change function will update/add/delete the document from obj.
  2. we have a function called ‘update’ which takes obj and transforms it into an object call ‘views’.
  3. We have a set of mustache templates, we also have a div with id ‘body’.
  4. views is given to the mustache template to generate html, div#body is emptied and then we append the mustache html (I originally was doing this to the body tag before I realized this caused issues with the script tags.)
  5. Besides the contents of obj the only thing that effects the function update is what the current location.hash is.
  6. The event structure is that when a document is changed, pouch updates obj and then calls update(), when a link is clicked, the handler preventsDefault(), changes the location.hash, calls update()

That’s pretty much it.  The first gotcha I noticed when doing this was that since I was replacing all the content rapidly:

I would not be shocked to learn that this caused performance issues with a lot of events like this added.  I’d also not be shocked to learn the opposite, so I’d probably test, and this was on hacker news this morning.

So onto the actual stuff, first we have the html, notice all it really does is load 1 css file and a bunch of scripts

next we have our mustache templates, notice the use of CoffeeScripts triple quoted strings, use of partials, and my disdain for tabs and readability when it’s not forced upon me by CoffeeScript

next we have a few misc function and the big update one, this does a couple that i’d consider Wrong and want to refactor out if this was for a real project, notable iterating through every object every time something changes, this is not going to scale to more docs very well. We also delete everything and rebuild the page from scratch every time anything changes if I was redoing this I’d break up the page into sections that could be re build individually. 

Lastly we have the jquery on load which mostly just sets up a bunch of events and the on database change which just makes sure it isn’t a design document and then replaces the document unless its been deleted in which case it’s deleted. 

Put that all together, and what do you get, THIS DEMO! feel free to leave a note, etc. 

There you have it, next time I’ll probably do something related to this new development and leaflet. Feel free to follow me on twitter.

And with that I leave you with this video (omg nsfw) which was going to be basis of an explanation of how binary trees work until I remembered @daleharvey was Scottish.