ASP.NET MVC & mobiles

During my last visit to Redmond, I was fortunate to have been received by Vishal Joshi (Senior Program Manager in the team "Web Platform & Tools").
As a VS end user and with my focus on the Web Application Mobile, Vishal was curious to know how I would consider the architecting and writing of my next application with the available Microsoft techniques.

Preamble

Developments for the mobile Web leverage some specifics issues:
• Weight control pages and transmitted data is important
• There are usually fewer functions (or they are easier/less sophisticated) in a mobile Web application from its Web equivalent
• Ergonomics of mobile Web applications is very different from conventional applications: they must be less complex, numerous interactions should be obvious and the results of actions must be visible and unambiguous
• Since there is a market in full expansion, our applications must also be easily and highly upgradable to accommodate all sorts of new devices. Manufacturers are offering us a bunch of varied & heterogeneous pads, not to mention the screens of our television turned into browser and innovative game consoles. An illustrative form of a motto which I liked from MS is 'three screens for one app".

« Device » definition

In this article, I will use the term "device" to refer to the different mobile platforms in a generic term.
These devices can be schematically and briefly described as follows:

We can extend this definition of "device" to browsers and their endless compatibility problems.

For example, I have recently met a client who still uses IE 4.7, I had the idea to address this problem by considering that IE 4.7 was a particular device with screens much simpler and with less features.

I found this system more elegant than the long lists of conditional comments “[if lt IE 6]..." directly in the web page.

I now consider the old browsers (and their 'problems') as individual devices. It's better for my codes and for my mind.

Development Focus

Vishal’s first question was: ASP.NET "classic" or MVC?

I replied without hesitation MVC, why? A better control of HTML, far fewer compatibility problems with browsers, And last but not least, a better mastering of pages weight, that’s an important criterion in the development of mobile Web applications.

MVC Style

Then he listed, on his whiteboard, few ways to consider the actual development in ASP.NET MVC in the perspective of implementing multi-devices (web, mobile web to phone and mobile web for pads...).

1.    An area for each "device"

• Advantages:

• Clearer, more readable

• Allows you to isolate the different devices components (especially at the JavaScript and CSS)

• Disadvantages:

• Require having as many controllers, models and views that devices, which can induce a lot of redundant code and, in case of many devices, some difficulties maintenance, especially when we would change some work process, and therefore, the bunch of models of each area.

2.    "Model" and "Controller" same but "Views" by various devices.

• Advantages:

• Only the views are suitable for devices, which simplify writing and maintaining only one controller and one model. This way is appropriate in addressing solutions to very similar devices (e.g. mobile phones) with very similar behavioral and data.

• Disadvantages:

• Not very appropriate for writing a complete solution: WEB + "mobile web". With The single controller/Single model, it becomes difficult to have a good code readability, but also to have good control of the weight of pages/data.

3.    One "Model View Controller" with conditional choice in the "controllers"

• Advantages:

• Efficient and fast when you have  to write code for less than 3 devices

• Disadvantages:

• The code can quickly become complicated, even illegible, though the number of devices increases

• It's difficult to code some complex behaviors

4.    Different "View" and "Controller" but based on a single "model"

• Advantages:

• Provides a good adaptation of the views and behaviors to devices

• Keeps a single model and therefore the uniqueness of objects "Business / Work" underlying the concept of model

• Disadvantages:

• The weight of the data to send to the devices is not well calibrated and the data are not necessarily appropriate

5.    Different "View-models" & "View" for each device:

• Advantages:

• Suitable finely models for each device (or each screen) and then, good control of the weight of data to send.

• Allows model "primary" legacy  code that gives a code more concise and thus more maintainable

• Disadvantages:

• More object “Model” to maintain and therefore more codes, and finally, increased risk of bugs.

To learn more about MVVM apply to MVC : Stephen Walther blog. 

An example : “NerdDinner Step 6”: ViewData and ViewModel

 

My choice

My first choice is the 5: "ViewModel/View"; it has the advantage of adapting a single model (in sense of business object) to multiple views (and therefore device) through the mechanism of "ViewModel". This is good for readability and maintainability of code, even if there are more objects than other.
This decoupling of the models and views allows good control of data sent to devices and, thus, the possibility of reducing the data weight. Remember, it is common not to have all data and features in a Web mobile application.
My second choice would be the 2: "Various views/devices"
This is the method I use currently, because I write mainly Web Mobile applications, and, therefore, my controllers & models are simpler than I have to write a Web and Web Mobile applications

Conclusion

As a conclusion, the different ways of proceeding described in this article are not the only options offered by ASP.NET MVC, the important thing is to find a simple and elegant solution to your problem.
Web applications, that we are currently writing, will be increasingly used on mobile phones, PDAs and tablets. We must start to write them with the right technologies, so that the user experience is as successful as possible regardless of the device.

Thanks

Thanks to Vishal for welcoming me and taking time to talk with me about the product he makes with his team and that I use.
I was very pleasantly surprised by the focus of these Microsoft teams for the feelings and perceptions of end users about their products.
Even if I'm MS Friendly, I try to be objective, and everything is not perfect at MS, but I really liked this closeness.

Thank to Philippe Limantour (Director, Cloud Computing & Innovation Center at Neos-SDI) for his help in English