Prototyping the next generation mobile web application

For many years TempWorks has been selling our TempWorks Mobile product. It has been very successful with people on the go who want quick access to their TempWorks data. The product has gone thru many versions but never has kept up with the capabilities of today’s mobile phone. With the arrival of the iPhone, HTC handsets, Android, and Palm Pre phones you can do so much more than ever before.

I’ve been wanting for almost a year to revamp TempWorks Mobile and update it for the newer phones. Unfortunately large blocks spare time for development is a luxury I don’t have very often. Although about a month ago I decided to move some of my projects around to start prototyping the next generation of Mobile. A couple of reasons I did this, first I wanted to get it done because honestly I am tired of looking at an user interface that is ancient compared to mobile web-app standards today and I wanted to get my hands dirty with technology I haven't used before.

During the lifetime of Mobile I noticed a lot of people liked to use it on their desktop for quick access. I think that is a great idea because sometimes you need a quick number or bit of info. The only downside to old Mobile is that it didn't adapt to its environment. You saw the exact same web pages on your desktop as you did on your mobile phone. What a waste of real estate. Then on flip side you add more features to use the real estate but then it is overwhelming on the mobile phone. With this dilemma as one of primary development points I went to work. I chose to use ASP.NET MVC because its basic architecture solves one of my primary development points and I haven't used it before.

ASP.NET MVC is based on the MVC (Model-View-Controller) paradigm that was popularized by Ruby on Rails. I took advantage of ASP.NET MVC’s ability to have more than one view for an URL or route. I modified the routing engine to inspect the incoming request and determine if it is a mobile device and what kind of device or a desktop browser and route the request to the appropriate view. Here is where the development time savings comes into play. Even though I have many views, they basically use the same back-end logic to feed data to the views. So for an example when you search for a contact I have written the contact search logic within my controller. I only have one controller for my mobile and desktop views so I only write the logic once and am able to support many different views.

Capture2 In this picture you can see that I have one ContactController and currently eight views using it for logic, four mobile views and four desktop views.

Now on to some glamour shots… Currently in my prototype I am focusing on mobile WebKit based mobile browsers currently used the iPhone, Android, and Palm Pre phones. I plan to create more mobile views for Blackberry and Windows Mobile 6.5 browsers and a fall-back mobile view that will be for everything else.

Capture4 Capture5 Capture6
iPhone Android Palm Pre

On the desktop I am developing for the three major browsers, IE 7 and later, Firefox, and Webkit (Safari and Chrome).

Capture1

For iPhone users you get the ability to use TempWorks Mobile as a full screen application and have the ability to launch from your home screen.

Capture7 Capture3
Mobile icon on the home page Notice no address or status bars

Overall I have been impressed with the technical ability of ASP.NET MVC. It does have one downfall for me; the introduction of spaghetti code back into your HTML pages. You old school ASP folks and PHP developers probably don't mind that but after using WebForms for almost 10 years it takes a bit of getting used to again. Although I will admit it's nice getting back to HTTP bare metal again and not dealing with WebForm's idiosyncrasies.