Rapid Web App Development with CouchApps and the Ionic Framework

Let’s set the scene, shall we?  ‘Twas a few days before the Fourth of July this year, and I was planning a big potluck barbeque at my house, as I often do.  However, as anyone who has ever organized pretty much anything can attest, it’s really hard to get definitive RSVPs from people and especially hard to get firm answers on what they are bringing.

So what’s a developer to do?  Well, my first thought was: “Obviously there must be an app for this”.  However, it turns out that there actually isn’t an app for everything.  Certainly the functionality exists in Facebook, or in a myriad of other event-organizing tools.  However, none of these really fit my requirements.  Mainly, I wanted it to be simple to use on a mobile device and not require any kind of sign up/login/download whatsoever.  Not everyone has Facebook, and  who really wants to sign up for a service they’ll only use once a while, but will spam them with emails 20 times a day?  So, there I was, with no app to organize my life for me, and I ended up getting fed up, and deciding to build my own.

There are a number of platforms and approaches that might have worked for this simple little app.  While considering my alternatives, I weighed them against my four main vices:

1. I’m cheap, so I didn’t want to pay a cent for ANYTHING.
2. I’m lazy, so I wanted it to be super easy and fast to build.
3. I’m proud, so I wanted it look halfway decent.
4. Did I mention I didn’t want to spend any money on anything?

First up, choosing a front-end framework (again, we’ve established that I’m lazy…like I didn’t want to write a single line of css lazy).  I’ve worked with the Ionic Framework before and, in my opinion, it can’t be beat in terms of quickly spinning up a new mobile app.  It uses Cordova, which allows the development of native mobile application using HTML, CSS, and Javascript.  Basically it just launches the native webview and loads your website from local files.  There is also some black magic under the hood to let you access native features such as taking photos, GPS, etc. (all from javascript too!).  For this project, since everyone and their 3-year-old sister has a phone with a browser, I just wanted a mobile-friendly website which provided an app-like user experience.  Ionic was the perfect fit, all I had to do was extract the web assets and ditch Cordova.

To keep the backend simple, I decided to use Apache CouchDB (a NoSQL database) since it communicates exclusively using HTTP.  Basically, this means there was no need to build out a database and write an API to interact with the data. CouchDB allows you to create, update, read, and query documents over HTTP out of the box – minimal configuration required.  To make my life even easier, I used the DBaaS (DataBase as a Service) platform Cloudant to spin a up a free CouchDB server to play with.

Bonus Round!  Since all interactions with CouchDB occur over HTTP, what’s stopping a crafty developer from hosting the static assets to support her single-page app front in the same database that stores her data?  Actually, nothing – it’s totally rad.  Developers will recognize many signature Apache features such as Virtual Hosts and total control over rewrite rules (in a database folks, how cool is that?).  Also, Cloudant has done a great job and provides a slick UI for managing your database instances, check it out:

So, having taken about an hour to set up all the infrastructure I’d need to build a fully functional, data driven application.  I build out the Ionic App and used the excellent CouchApp library to upload it to my Cloudant CouchDB instance.

A quick trip to get a free (yup, I’m still as cheap as you remember) Dot TK domain name and a few simple rewrite rules later, Get Plucky! was born.

Checkout the code on Github: https://github.com/Dtraft/get-plucky (pull requests welcome!) or check out the app at: http://app.getplucky.tk.

All this goes to show that there are amazing people out there creating some incredibly powerful tools for the modern web.  Of course, a given platform/framework is not necessarily the right fit for EVERY project, but it is our responsibility as developers to test-drive new tools and understand their strengths and weakness.  Just because you know how to solve a problem in one way, doesn’t mean you couldn’t save yourself buckets of time by doing it another way!  Keep exploring, there’s a vast world of intelligent people doing wonderful things out there and, with just a bit of knowledge, you can work wonders.  All you need is a text editor and an internet connection.