My Couchdb applciation – Kanso, CommonJS, Bootstrap, LESS, Google Map API

My application is a simple one which allow users to mark spots of light pollution on a Google Map.

->More [later]

It turns out to be very fit to for my experiment with CouchDB. The idea is to also to do everything in javascript. Recently be a Doug Crockfold fan, listened his talk, reading his javascript bible and happens to read his interview in Coders at work


CouchDB is an awesome idea which is mature enough to work. As its official page put it

Apache CouchDB™ is a database that uses JSON for documents,
JavaScript for MapReduce queries, and regular HTTP for an API

Although founders has been moving onto the commercial version, couchBase, as couchDB is under apache and I believe it will keep gain enough momentum.

CouchDB is a DBMS, however with the attachment model, one can put html,program logic, images in it and it can function as a complete application! [More on its architecture later]

The downside is the programming model is not very intuitive and the tools are yet limited. However, fortunately it does make things simple enough that it is manageable to learn. It turns out the codebase can be really small for an application with basic CRUD features and it is by default scalable (Map reduce!). Especially when I compare to my other app with stack Play/Hibernate, this is really easy to start.

About the model, it forces you to think about what exactly you want to be shown in presentation layer and how it relates to the data structure during the design. You want to show records from database, while what exactly is range, how you sort it, things like that. You are display pages using template, how is it rendered, how caching can be done.  At the same time you are taking care how is it being indexed. (View is index in CouchDB).  It sounds like coupling data and view, but it is not. There are no complex query and it is not SQL, it is simple list/view and what you stick to is the business requirement.

For tool, I have been using couchApp, which is initially the standard little framework allow one to quickly leverage couchDB to build an application.  The biggest problem is it is not documented very well. It is now also deprecated and replaced by Erica

This is also what recommended by the “official” and most complete guide, CouchDB The Definitive Guide . It tells you some details on design insight about couchdb, however be frank even the published version it is still a work in progress which is quite hard to read.


I am now using Kanso

Comparing them, there are some difference in the layout and file structure. I will say the features in Kanso are more completed, like generate id & upload. It is based on node.js, where the most beneficial part is the module management. npm, using require as in CommonJS. I have been using requireJS (AMD) before and I found this is even easier, although they may not be the exact same concept.

One feature very useful is to have the autodeploy (autopush) whenever you update your code. This is done by Watchr, guide here, smart choice. easy to install, light-weight and generic enough for any app. The script can be customized, which is also useful in case compile from .less to .css is required.

As I take reference to the sample project, I use the framework duality. I believe my application should not be bound to it while I need to dive more into its ideas. Currently some limitations are like it has dependency on old jQuery version. Also seems it drives a bit different from the original model, for example I found it hard to render an image with show, without generating with html template.

For deployment, I am trying with the CloudAnt on CloudBees. After all what I need to do is a “push”, it feels really like git.

Image storage

Another requirement for the application is image storage and processing. I need to allow users to upload images, which “saving images as couchDB” should be the simplest model.

To scale one also suggested using Amazon S3 separately. Regarding the storage platform, the considerations for me is mainly the price, then the speed.

The whole thing are composed for several parts.

  1. How to resize the image before upload (client side!) & restrict the size.

    Numerous way to do, one make use HTML5. I believe I will use this jQUery plugin which got all basic stuff. Another choice1 and 2)plupload which is really cross platform can can fall to silverlight/flash

  2. Upload via REST APII am not sure there is no upload for attachment so I used basic curl at the moment. I am glad to write one for kanso.
  3. Render the image with correct path & cache

    I am still trying to get couchDb right, should I render with b64 or use the attachment path directly? I turns out it is not that easy.

  4. Make sure I can still pay for the volume

Then localization

Not much to do, just want a correct solution to have English & Chinese version for my site.

I have being working as a summer intern in a startup explicitly for the localization of a web page. (I literally did the translation!)

This library is more than enough.

i18n – 18 stands for the number of letters between the first i and last n in internationalization. God knows.

I also found people are doing generic framework to take care plural or gender stuff, like messageformat.js Quite interesting.

I think the important part is to get it right with handlebars, like here, what should be the order of parsing to speed things up.

For “on-the-fly localization”, we get the string to localize first then lookup in the table.
More basics for web [TODO,Moving to another posts]

Layout – Bootstrap, LESS

The only thing about Bootstrap I will say is it is turning layout design back to a programmatic way which is good for me. Find something useful and looks nice then plug it in. This should be a better layout than I did before.

I have been knowing these stuff, but put a real application in place is another story.

Haven’t do serious web programming for a while (or never).  Many things to explore and best practices to learn form.

  • Naming convention – div class ,  javascript variables, static files,

  • dont put boostrap class tag – separate view layer – how LESS can help
    Seems my less compiler cannot compile as it cannot import external css. In this case I will need to break down the bootstrap to use its less file directly.

Frameworks I stated make my life much more easier, especially for newbie and layout idiot like me. Meanwhile, many things I do consider can be done much simpler. like rendering Grid with same height.

  • The forever battle – Grid like layout, not to table but how. 

    It has long be considered a bad practice to use table for layout. However the point is it is also not easy to do with divs and css. There is even a timer like this.
    Easy for the case of using fix height, however not so when the height is dynamic.
    You either use jquery or css trick to accomplish 

  • Best practices for caching & web app performance 

    Some good reads: Google best practices, Even Faster Web Sites

  • What to do for responsive CSS for mobile

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s