Experimenting with the MVC4 Mobile Templates

Lets face it guys, the mobile web WILL be the future battleground for applications (replacing the native apps we see today).  In simply does not make any sense, outside of games, for developers to continue to create essentially 4 versions of the same program.  Prior to the advent of the web the SAME problem was had.  What happened there?  The explosion of the web and the first browser wars brought most, if not all, corporate/business applications to the web, this to avoid the hassle of deploying client side applications.

We know face a similar problem with mobile web.  This time, there is not one dominant browser which can use its market share to subvert the standards.  That being said, both Apple (Safari) and Android (Chrome) use WebKit, so while it may not be one browser which dominants the mobile browser space, it is WebKit which is the leading engine for rendering web pages.  Trust me, the age of writing an app for iPhone, Blackberry, Windows Phone 7/8, and Android are drawing to an end. The most important thing right now is the mobile web application development experience.

Many would say that this wont happen because so much is vested in the device hardware and usage idioms (the four buttons of Android, the single button for iPhone, etc). These are are all minor issues and are things that smarter people than I will find answers to.  The future is the mobile web and all development groups would be wise to begin educating their developers to create mobile web apps, lest they be left behind.  And so that bring us to the true focus of this entry, the mobile templates in MVC4.

Overall, there wasn’t any major new introductions in the platform, but to me the mobile templates where a huge deal.  They default to using jQuery Mobile which gives the applications, out of the box, an iOS like feel.  Most of the navigation for these apps would be on the screen (this is also why Apple is in the best position moving forward, and I dislike Apple. Their usage paradigm is least dependent on device interaction, rather they leave the navigation within the app to the user).  Here is a screen shot of an app that I created to demonstrate MVC4 Mobile Templates:


Just a simple application which lists out the various teams in the National Hockey League (NHL).  Clicking on any of these links will take you the next level of granularity.  This is all organized using the previous bits from the Microsoft MVC Framework + Razor templating engine.  The code to load one of these lists uses LINQ to XML:

   1: public ActionResult View(int id)

   2: {

   3:     var document = XDocument.Load(Server.MapPath("/App_Data/NHLTeams.xml"));

   4:     var divisons = document.Root.Descendants("Conference")

   5:         .First(c => c.Attribute("Value").Value == id.ToString())

   6:         .Elements().Select(elem => new Division()

   7:                                        {

   8:                                            Name = elem.Attribute("Name").Value,

   9:                                            Value = elem.Attribute("Value").Value

  10:                                        }).OrderBy(d => d.Name).ToList();


  12:     var divisonViewModel = new ConferenceViewModel()

  13:                                {

  14:                                    ConferenceName = document.Root.Descendants("Conference").First(

  15:                                      c => c.Attribute("Value").Value == id.ToString()).Attribute("Name").Value,

  16:                                     Divisions = divisons

  17:                                };

  18:     return View(divisonViewModel);

  19: }

Pretty straightforward.  Under the hood this is all XPath and XQuery at work.  This is the same code you would create (thought this code would probably be better off in the data layer and being fed the XML file path to load) with the same organization that MVC is known for.

What do you think of the possibility (or certain future from my standpoint) of everything going to the mobile web?

Do you think businesses will see the value in using the web for the same reason they moved all of their original client apps to the web?

As a consultant how can we continue to make companies understand and help them stay relevant in a world that is changing so quickly?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s