Introduction to CouchApp for Ext JS Devoper

 As an Ext JS developer you’ve probably noticed your server side application code slowly reduced to a thin set of APIs shuffling data between your client-side JavaScript applications and a server side database. If you’ve been wondering how you can eliminate the server side application stack and securely communicate with a database using a RESTful API you’ll be happy to find out you can with a CouchApp!

Blue Chair Icon By Neno Mindjek

Blue Chair Icon By Neno Mindjek

Quick overview of benefits to building a CouchApp:

  • thinner application stack, just your JavaScript app and CouchDB
  • develop with JavaScript end to end
  • built-in data replication capabilities
  • runs everywhere (desktops, servers and mobile devices)
  • empowers new types of open source business models

Each one could probably be it’s own section but I’ll save deeper dives for later.

If your new to CouchDB here are some quick highlights to get you excited:

  • data stored in schema-free documents as JSON objects
  • view engine lets you write queries in JavaScript
  • files can be stored as attachments and served directly from the database
  • powerful replication capabilities with built-in version control
  • it speaks HTTP and features a rich RESTful API

With the highlights covered let’s dig a little deeper to see what makes a CouchApp a CouchApp.

That was one my first questions when I first started wrapping my head around CouchApp concepts. The short answer is they’re all served up as attachments using the built-in HTTP server (more on that in a sec).

To create a CouchApp you start by creating a design document which is a special document that can contain CouchDB application code. This is where you put all your CouchDB viewslists and show functions among other goodies.

CouchApps are just a set of binary attachments on one or more design documents. This means all your JavaScript application code, Ext JS library files and other assets can be stored as attachments on a design document that has all the CouchDB query functions for your application.

Once your app is loaded into Couch you can hit the url for your index.html file and it gets served up along with all its referenced files just like a traditional web server.

Manually pushing all your files into CouchDB as attachments and updating them anytime you want to make a change would be a pretty tedious process. Fortunately there few tools out there that fully automate the process.

I’ve been using nodecouchapp. It’s an easy to use NodeJS module that helps setup a CouchApp project, push files into CouchDB and update files when they change. Other folks are using a python based tool aptly name couchapp.

Check out both tools and decide which works better for you, just keep in mind they’re not interchangeable so you’ll want to pick one and stick with it.

Just about anything you need to do with CouchDB can be done using the HTTP API. This includes storing and retrieving all your data as well as managing replication settings, resolving replication conflicts and more. If your new to Couch check out the getting started chapter of O’Reilly’s online book CouchDB the Definitive Guidefor a quick walkthrough.

With a little tweaking the new RestProxy in Ext JS 4 maps pretty well to the basic CRUD operations of the CouchDB HTTP API.

For Hub List I extended the RestProxy to turn flat JSON responses from CouchDB into an ordered hierarchy of models that I use with TreePanels. As it evolves I’d like turn it into a more generalized CouchDB Proxy to share with the community.

Since your application is served from whatever domain is running your CouchDB instance you’ll run into the usual limitations of accessing resources across domains. Being the JavaScript guru that you are you’ve got a few options to overcome this.

The easiest path is take advantage of the JsonPProxy in Ext JS. The JsonPProxy works pretty easily but limits you to GET requests. For more flexibility you can use the standard AjaxProxy with some extra steps to support CORS. With a bit more integration effort you can leverage websockets/ for real-time communication!

Whatever path you choose clears the way to making external calls to your own server side applications or third party APIs. I’m especially excited about using client library and looking forward to integrating it alongside Ext JS Server Proxies.

Since Apple announced iCloud there’s been some talk about how Apple is de-emphasizing web apps in favor of native apps tied to Apple’s cloud infrasturcture.

As much as I wished Apple embraced JavaScript for developing native apps across their entire platform (I can dream can’t I?). I can see why it’s in the best interest of their developer community and business model to focus on native app experiences with the web as an integrated data services layer.

iCloud brings some much needed attention to the developer pain-point of data synchronization and Apple’s positioning opens a new opportunity to address the problem outside their ecosystem. CouchDB has the cross platform compatibility, data replication features and the open source pedigree to become that solution.

When you combine all the hotness CouchDB brings to the table with powerful JavaScript frameworks like Ext JSSencha Touch or even the micro-frameworks (if that’s your thing), CouchApps have the potential to become a worthy alternative to developing native apps with iCloud integration.

It’s not all sunshine and rolling hills in the world of CouchApps. The movement is still pretty new and there are lots of things to be worked out and refined.

Being a noob to CouchDB there was a bit of a learning curve to get everything working smoothly for the new version of Hub List. I still haven’t found solid docs on packaging a CouchApp as a native application for desktops but there’s an interesting PhoneGap project on the mobile front and I hope to see more spring up!

After learning some of the benefits and tradeoffs of CouchApps I hope you’re excited to try them out! I’d like to make this the first in a series of posts to help other Ext JS devs start building CouchApps, stay tuned!


Leave a Reply

Please log in using one of these methods to post your comment: Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s