Intended Audience:

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”.

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:

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.

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.