Friday, April 09, 2010

Deploying a Google Web Toolkit app to CouchDB using couchapp

I've been working on a side project using Google Web Toolkit (GWT), and I'm using CouchDB as the backend store.

There is a project called couchapp which makes it very easy to write an HTML/Javascript-only application (you know, the new cewl way to build apps), and store it directly in CouchDB.

Huh? What are the benefits of doing this?

Well, offline support is the big one for me. If I install a CouchDB instance on my local machine, and then set up replication, my app and its data can automatically be replicated to my local CouchDB. I lose my connection, that's fine, everything I need is there. I get back online, my changes are automatically replicated back to my CouchDB in the cloud.

It also makes it easy to share apps - just publish to a common 'app hub' and anyone who wants to can subscribe and get the app. If you're feeling kumbaya, your app can be read/write, so that app users not only modify the content, they can also modify your app itself and replicate your changes back up.

One more thing: with my app deployed to CouchDB, I don't need to write server-side code. None. No PHP, servlets, JAXB, XML, MySQL, blah blah blah. I can directly access CouchDB (and other web services like Facebook, Twitter, etc.) from my client-side JavaScript. To me that's a much simpler, cleaner environment.

But the thing is, couchapp by itself just supports HTML, JavaScript, and attachments. After much soul searching and feeling un-hip, I have finally come to terms with the fact that I am comfortable and happy in Java. I could learn JavaScript, but I think and breathe Java, it's what comes naturally to my fingers. But Java isn't native to the browser, and that's not the way the wind is blowing. So recently I took another look at Google Web Toolkit, and I liked what I found:
  • Dynamic client-side browser-native apps without having to write a lot of HTML/Javascript. Yeah, I like that.
  • Work in Eclipse, a comfortable place for me to be
  • Excellent integration with CSS, allowing easy styling of widgets by applying style settings your GWT Java widgets
  • Static typing. I actually like that, I have much more confidence that when I run it works.
  • Very easy code/run/debug cycle, in Eclipse
  • No need to deploy, just refresh your browser and your new changes are in
  • Excellent support for AJAX-style HTTP requests
  • Lots of widgets, and some very cool libraries, including a visualization library
  • Open source under a flexible license
  • Strong community
Basically, in the GWT world, JavaScript is like your bytecode - you really don't need to look at it and in general you don't care. As with 'asm' in C, you can 'drop into JavaScript' if you need to, but really that can be kept to a minimum. I highly recommend doing the tutorial, it's one of the best I've worked with in a while.
    So, what do couchapp and GWT have to do with each other?

    Well, it turns out it's pretty darn easy to drop a GWT app into the couchapp framework, press 'couchapp push', and voila, your GWT app is deployed to a CouchDB instance.

    Take a look at the GWT StockWatcher tutorial app running out of CouchDB on cloudant. Add some pretend symbols and it simulates random fluctuations in stock price. This was all written in Java, compiled down to JavaScript, and then deployed to a CouchDB instance on cloudant with a simple one line command...

    So, here's all you need to do:
    • Get couchapp (on Linux or Mac you should be able to do sudo easy_install -U couchapp)
    • Run couchapp generate myapp to generate a directory structure for your app.
    • Remove everything under myapp/_attachments. You can keep the views if you want, or remove them.
    • Get GWT (preferably the plugin for Eclipse)
    • Create a GWT project
    • When you're done testing/debugging locally, compile your GWT project for deployment
    • Copy everything under the 'war' directory except WEB-INF to the _attachments directory of your couchapp application directory
    • Run couchapp push (set up your .couchapprc first with the right settings)
    • Go to the URL provided by couchapp push and you should see your app running beautifully

    6 comments:

    jac said...

    good tutorial . I have the same idea, and I wish test.

    Andreas Osowski said...

    Hello.
    Could tell me how you interacted with CouchDB from GWT after installing it like this? Did you use some library or did you write the interaction yourself?

    Thanks -- and a very interesting article.

    David Van Couvering said...

    I was working on this and then had to let this go on the back burner. GWT has an API for sending asynchronous HTTP requests, and I was going to use that to post requests to CouchDB. It looked like it should have worked.

    Andreas Osowski said...

    Thanks for your reply.
    After realizing that I could just map my classes to the JSON data as returned by CouchDB (and extend them to support deletion / saving in the OO way), I found the idea of writing some code for those requests myself the best solution, too.

    Anonymous said...

    Thanks a lot, exactly the snippet i was looking for. I think the Combination of GWT and CouchDB is just fantastic!

    Anonymous said...

    Hmm, I'm getting a popup that says:

    GWT module 'mywebapp' may need to be (re)compiled

    Using eclipse and the GWT plugin I created the a web application, built it and copied everything from the war directory to _attachments sans the WEB-INF directory. Then I did couchapp push . testdb.