Over the holidays I created and published a new web application - Minimal List (http://www.mnmllist.com). From the application's about page:
Minimal List was created to solve a need my daughter and I had - a simple way to have our weekly grocery list online.
You can read the rest of the about page for more detail, but that pretty much sums it up. This post was indeed meant to introduce the app, but more than that, I wanted to talk about the geekier details of the project :).
When my daughter and I decided we needed (yes, needed!) this application, we knew that a mobile application was in order because one of the primary places we'd be using it is at the grocery store - to check off items as we put them in the cart of course. Well, anyone who knows me well knows I'm a web guy and tend to avoid rich clients if possible. However, I don't have anything against an application that looks like it is a native mobile app. I just prefer HTML and javascript over any of the proprietary stuff for the UI. I'm obviously building on the MS stack (ASP.NET, MVC4, C#, IIS, SQL Server), but I like the UI to be a browser (usually Firefox or my phone's browser for me personally - iPhone for the daughter).
jQuery Mobile (JQM) was created exactly for this purpose - a native mobile feeling, but served from the web. It's also something I've wanted to play with for a while now - again, if you know me you know I'm horrible at just "playing" with things in spikes and throw away code. I like putting things in production and seeing how things go in real scenarios. So finally, a legitimate reason to play :).
I was quite pleased with the development experience using JQM. In the editor, the footprint is actually quite small. Mostly simple and regular HTML elements that are just tagged with some special JQM attributes. The existence of these attributes (after including JQM css and js of course) is what causes all the magic to happen. So once I got to know which attributes to use, things started moving along rather fast because the rest is just plain web application development like I've done for years.
However, the first real test at the grocery store wasn't all that great. My daughter went to Oregon for the holidays, so I didn't get to see what it is like on an iPhone, but the performance on my Windows Phone 7 was completely crappy. I spent a lot of time standing there waiting on screens to load as I was updating my shopping list items with either price or isle information. Completely unacceptable user experience.
Other than performance though, it worked as advertised! No bugs or issues and the grocery trip experience was exactly what I was looking for (not too surprising since I designed the app specifically for the experience I was looking for).
Next Step
The next step is obvious - improve the UX. Not sure how I'll do it yet, but there are a few paths I can take.
First, part of JQM is AJAX navigation. It intercepts local links and queries for the resource AJAX-style instead of navigating away from the current page. It then takes the response and loads it into the existing DOM all fancy like so it feels more like the native experience. This also makes the UX faster because your browser doesn't have to re-run all the javascript and whatnot that happens on a full page load. However, when you navigate to a page where you've already been, it just shows the page it already has in the DOM instead of re-requesting the URI. This sounds great, but can be challenging with data-heavy pages because the data obviously isn't going to be fresh. To get by this for now, I just turned off the AJAX functionality for most of my links and form posts. So this is something I can look into - there would obviously have to be javascript watching for those page transitions so it could dynamically update the data on the page if necessary.
Second, I could take a more SPA approach - Single Page Application. I could still use JQM for the UI and page requests and whatnot. But the main feature sections would become small SPA islands and I wouldn't do any page transitions at all within the context of that feature. This might be a good time to start playing with knockout.js or something.
And of course, I could always completely abandon JQM. I've created web apps before that were careful to be a good UX even in a phone browser, but didn't look at all like a native phone app. But where's the fun in that?!
The Code
I decided to leave the code in a public repository for all to see:
Project codename named after Momo from Avatar: The Last Airbender
You'll also notice a link to the commit that created the currently released version in the footer of every page on the site. However, when things move on and you want to see it exactly the way it was as of this post, that commit is ceef281.
That's it for now. I hope you all have had an excellent holiday season.