Series Theme:

How to build an example client side MVC (Model, View, Controller) CRUD (Create, Read, Update, Delete) Web 2.0 application that uses CouchDB as the back-end database server and ExtJS-4 as the client side Javascript application framework.

Intended Audience:

ExtJS and CouchDB users.  By extension, anyone with experience using Object Oriented Programming languages to create client/server applications.

Series Introduction:

I do not personally believe there is such a thing as the “one-size-fits-all” or “silver bullet” database server, server side framework, and/or client side framework.  Fortunately there are many, many choices available these days that empower a web application developer to leverage the strengths and weaknesses of various development tools against the actual needs of the application under development.  The majority of these are Open Source, or have an Open Source licensing scheme, so they are readily available to learn and explore for the motivated programmer.  Gone are the days in my little universe where my only perceived choice was a traditional LAMP stack running in the confines of one dedicated server.  Now it is much easier to solve big problems, like distributing heavy processing and storage loads horizontally over multiple computers in multiple locations.  All you have to do is research the many available choices out there and pick the architecture that best fits.  So which one will it be?

I am not an advocate of any one solution over another,  but I think I found a winning combination that will serve as my “default” Web 2.0 application development solution.  I believe building an application around these tools will satisfy the requirements of the majority of use cases I will run in to as a web developer.  These tools will also allow me to scale my applications up and down freely and flexibly without giving up relevant features and performance.  I have been evaluating and testing CouchDB ( http://www.couchbase.com/ ) since August of 2010 and ExtJS-4 ( http://www.sencha.com/products/extjs/  ) since before its pre-release early in 2011.  I am nothing short of amazed at these two innovations in web application development,  and I am grateful to their creators and supporters.  After benefiting from the many efforts of dedicated contributors who are much smarter than I am, I decided I could contribute something back to these communities.  So, I present a series of screen-cast tutorials where I share what I have learned in hopes of benefiting any who may travel the same path as me.

I am a newbie to Javascript programming, but I have some experience with Object Oriented Programming using Lazarus/FPC ( http://wiki.lazarus.freepascal.org/ ) and I understand the basic principles of OOPs.  However, I view myself as a “dummy” compared to most folks in the industry.  So I honestly believe the cliche, “If I can do it, anyone can”.

Why CouchDB?

CouchDB is an implementation of the modern NoSQL DBMS movement referred to as a “de-normalized” or “document” database server.  A good summary of why CouchDB may be a good solution for your application can be found here: http://www.couchbase.com/why-nosql/nosql-database and here: http://www.couchbase.com/products-and-services/couchbase-single-server .

The subject is vast, so I don’t want to attempt to be exhaustive here.  Some of the high points that attracted me to CouchDB are as follows:

1. Schemaless data repository
2. Append only architecture (MVCC)
3. Distributed architecture (auto-sharding, distributed queries, etc.)
4. Powerful and easy to use replication/ filtered replication
5. Drop-dead simple to implement and manage
6. Provides full ACID transactions
7. Multi-platform (Linux, Windows, Mac)
8. RESTful interface and API
9. Built-in server-side Javascript interpreter (Spider-monkey), web server, authentication support, and SSL support – all work harmoniously together
10. Built-in Geo-spatial indexing
11. Data is stored natively as JSON (great for Object Oriented Programming)
12. Scaling down (mobile devices) is as flexible as scaling up (elastic “cloud” computing)
13. Future proof horizontal scaling options (BigCouch, Cloudant, Lounge, future versions of Couchbase/Membase)
14. The continuous changes feed

To become familiar with CouchDB, I found these online resources helpful:

1. Videos/Webcasts: http://www.youtube.com/results?search_query=couchdb+oreilly&aq=f
2. Apache Project Home: http://couchdb.apache.org/
3. Couchbase community and documentaion: http://www.couchbase.org/
4. Couchbase commercial site: http://www.couchbase.com/
5. API Docs: http://www.couchbase.org/documentation
6. Apache CouchDB Wiki (older): http://wiki.apache.org/couchdb/

Why ExtJS-4 from Sencha?

ExtJS-4 is a robust client side Javascript framework designed to create rich graphical Web 2.0 applications.  A good summary of why ExtJS-4 may be a good solution for your application can be found here: http://www.sencha.com/products/extjs/ .  Some of the high points that attracted me to ExtJS-4 are as follows:

1. Excellent consistency in rendering graphical components cross-platform and cross-browser
2. Very well structured & extensible Object/Class hierarchy familiar to OOPs developers
3. Client side MVC architecture and robust data package that supports associations
4. Large selection of well designed, pre-built, and configurable components/widgets
5. Comprehensive documentation, training, and support (both commercial and community)
6. Common code base with Sencha Touch, a framework for mobile web apps

To become familiar with ExtJS-4, I found these online resources helpful:

1. Videos/Webcasts: http://vimeo.com/sencha
2. Example Applications: http://www.sencha.com/products/extjs/examples/
3. Online Documentation: http://docs.sencha.com/ext-js/4-0/
4. User Forums: http://www.sencha.com/forum/
5. Stack Overflow website: http://stackoverflow.com/questions/tagged/extjs4

Series Overview:

Unfortunately, at the time of this writing, ExtJS-4 does not come with “out-of-the-box” support for document databases like CouchDB.  Their data package was designed more with relational databases in mind for the back-end.  So how do you get ExtJS-4 to work with CouchDB in a clean and maintainable way?  That is what this tutorial is all about.

I will show how to set up an example application using a software patch created by Peter Muller to provide support for de-normalized databases in ExtJS-4 and Sencha Touch.  His Forum post is here: http://www.sencha.com/forum/showthread.php?127547-Sencha-Platform-denormalized-Data-patch .  Empowered with this patch, ExtJS-4 users are able to create powerful client side MVC applications that use the built in RESTful interface of CouchDB on the server side.  This combination puts developers on a fast track to creating complete client/server solutions.  No further customization of ExtJS is required – standard “out-of-the-box” configuration and implementation code is all that is necessary. If the patch is something that will help you with your project, please add your voice to request the patch be integrated into an official future release of the data package. The thread is being watched by Ed Spencer, Senior Software Architect at Sencha, as he is curious to see user demand.  Please post your requests and comments in that thread.  Peter and I are hoping the Sencha development team will eventually integrate the patch into an official release of ExtJS-4 and take over support of it.

The example app I created for this tutorial is called “mvcCouch”.  It is an extension of the “MVC Application Architecture” guide example provided by Sencha in their docs here: http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture . I highly recommend completing the Getting Started Guide and MVC Architecture Guide example first, before proceeding with this tutorial.  The mvcCouch GUI consists of two simple grid components (master/detail) that allow the end user to interact with data and perform CRUD operations on the CouchDB server.  Document data is formatted with nested JSON in this example, so the tutorial will show how to handle one-to-many associations when setting up your models, proxies, and stores in ExtJS-4.  The primary store used by mvcCouch is a collection of individual documents that contain all parent and nested JSON in one body.  This primary store is configured to use a REST proxy to perform CRUD with CouchDB.  A secondary store uses a memory proxy to perform CRUD with just the nested JSON “records” of each document.  This secondary store is programmed to sync with the primary store, thus keeping child JSON properly nested with its parent JSON for each document instance.  Thanks to Peter’s patch, syncing the primary store saves all parent and child records back to the CouchDB server as one complete JSON “document”.

A hosted version of mvcCouch can be viewed here: http://shaneavery.couchone.com/mvccouch/_design/mvcCouch/index.html .  Please feel free to open up a firebug or webkit console and check out what is going on when you play with mvcCouch.  This hosted version of mvcCouch is built with version 4.0.0 of ExtJS and has been minified with JSBuilder, therefore source code will be hard to read.  You can download non-minified source code project files, along with with dependencies, here: http://averydc.com/guest/mvcCouch.zip .  I recommend you download these and get familiar with them before proceeding with this tutorial.

On With the Tutorial…

I decided to make this tutorial into a series of screen-casts to keep things interesting and more informative.  Along with each video, I include a textual summary and some links to resources used in the screen-cast.  Hopefully this will assist you when you need to make your own apps. My development platform is Windows 7, and my browser is Firefox 5.0 with Firebug.

Click Here to View Screencast Series

 

Screen-cast Table of Contents (with resources):

1. Getting Started with CouchDB
   1. Download CouchDB (Single Server): http://www.couchbase.com/downloads
   2. Download CouchApp: http://couchapp.org/page/installing
2. Getting Started with ExtJS-4
   1. Download ExtJS-4 SDK: http://www.sencha.com/products/extjs/download/
   2. Download ExtJS-4 “SDK Tools”: http://www.sencha.com/products/extjs/download/
   3. View ExtJS-4 “Getting Started Guide” MVC app example: http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
   4. Download Peter Muller’s ExtJS-4 Patch: https://github.com/One-com/Ext-JS-4/tree/denormalized_4.0.0
3. Exploring the App – mvcCouch
   1. View mvcCouch (hosted): http://shaneavery.couchone.com/mvccouch/_design/mvcCouch/index.html
   2. View mvcCouch CouchDB Futon console (read only): http://shaneavery.couchone.com/_utils/database.html?mvccouch
   3. View mvcCouch view results: http://shaneavery.couchone.com/mvccouch/_design/mvcCouch/_view/region?include_docs=true
4. Building the App:
   1. Set up environment, application directories, and files – the CouchApp way

      1. Download mvcCouch project source files: http://averydc.com/guest/mvcCouch.zip

      2. Download Eclipse IDE: http://www.eclipse.org/downloads/packages/eclipse-classic-37/indigor

      3. Download Spket plugin for Eclipse (including ExtJS-4.0.2 .jsb file): http://forums.spket.com/viewtopic.php?f=6&t=1866&sid=b5929df108d8650201b912294330ee45&start=15

      4. Download stand alone Spket IDE: http://www.spket.com/

      5. Download ConTEXT editor: http://www.contexteditor.org/downloads/

   2. Set up Index.html, App.js, and initial Controller logic
      1. Download mvcCouch project source files: http://averydc.com/guest/mvcCouch.zip
   3. Set up Models and Stores
      1. Download mvcCouch project source files: http://averydc.com/guest/mvcCouch.zip
   4. Set up Views, Controller logic, and implementation code
      1. Download mvcCouch project source files: http://averydc.com/guest/mvcCouch.zip
   5. Create the CouchDB view function
      1. Download mvcCouch project source files: http://averydc.com/guest/mvcCouch.zip
      2. View the mvcCouch design document in CouchDB: http://shaneavery.couchone.com/_utils/document.html?mvccouch/_design/mvcCouch
      3. View mvcCouch view results: http://shaneavery.couchone.com/mvccouch/_design/mvcCouch/_view/region?include_docs=true
   6. “Pushing” the App to CouchDB with CouchApp, building a minified version with Sencha SDK Tools
      1. Download ExtJS-4 “SDK Tools”: http://www.sencha.com/products/extjs/download/
      2. View the mvcCouch design document in CouchDB: http://shaneavery.couchone.com/_utils/document.html?mvccouch/_design/mvcCouch

Welcome to Avery Design & Consulting! This is the blog section of our website.  We provide this to share ideas and experiences with the world, in hopes of being helpful to others.  Visitors may add comments to Blog posts, so please feel free to add your opinions.  We do not moderate the comments, so you should be able to see them right after you post them.  Please be respectful of others and do not spam or flame on our Blog.

Thank you, and enjoy the show.