Minimal List Debut

by December 31, 2012 10:52 AM

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

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:

Momo

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.

Tags: , , ,

What I like About ASP.NET MVC

by March 16, 2010 10:42 AM

I've been asked a lot lately about why one would choose MVC over Web Forms. I'm not so sure about when one should, but I know my default choice is always going to be MVC.

Here are a couple of reasons why

Closer to the metal

With the lack of server controls and postback model, I find myself writing more raw HTML. I like that. Some people won't and that's fine by me. I do.

I meet too many developers who have no idea what the server controls they use actually end up as in the browser. That blows. Some don't even realize the server controls are not real HTML elements. Some don't notice the difference between server and client. I can't remember how many times a developer has asked me if they can call C# from HTML or if they can call javascript from the codebehind. I know the answer to both is "yes" in a round about funky way, but you know what I mean.

Forcing developers closer to the metal is forcing developers to realize what is actually happening. That has to be a good thing.

Forces a more user friendly design

You know how in web forms you can build an entire workflow in a single page using the postbacks? You know, selected index change event on a dropdown, lookup buttons, sorts, filters, wizard controls, tab controls, etc. All these things causing postbacks and firing events and the URL never changing. It's all happening in place due to the magic of web forms and viewstate.

Well, I find that doing anything like that in MVC is hard. And I love that! The result for me is that I end up rethinking my view. I find my putting myself in the shoes of the end user and concentrating more on how to allow them to accomplish the goal as simply as humanly possible. If I really do need richness or dynamic data to accomplish the task, I'm going to do it in an AJAXy way because that's easier than posting back and forth. For the end user, that's a very good thing!

In a nutshell, I tend to focus more on accomplishing goals and less on editing data when I build with MVC.

All the other goodness

Google MVC vs. Web Forms and you'll find a ton of other opinions. I agree with just about every reason you find that favors MVC :). They're all good and whatnot, but the above two are my favorites.

Tags: , , ,