Tuesday, March 8, 2011

Fast Development of Mobile .Net Web Applications that Adapt to Any Platform

Recently I have been developing web applications that are required to be accessed through smartphones, tablets, netbooks, or computers and support all popular types of browsers. Users accessing these applications are a mixture of management and workers or contractors that work outside of the office, in the field. Rather than developing a separate application for each type of user and for each platform, I chose to seek out the best possible way to develop a single web application that will adapt to any scenario.

Business Logic Layer (Controller) and Data Layer (Model):
  • Required Software from Windows Web Platform Installer 2.0: Visual Web Developer Studio 2010 Express or Visual Studio 2010 Professional, SQL Server 2008 R2 and SQL Server Management Studio 2010 (Express)
  • Required Add-ons from Windows Web Platform Installer 2.0: .Net 4.0 Framework, MVC3 Framework
  • Begin new Microsoft .Net C# MVC3 Web Application using Razor View Engine
  • Install reference package through NuGet: EFCodeFirst (CTP5)

First of all, I needed a fast way to develop an administration area of my web applications for company management to use. I decided to go with Model-View-Controller design pattern, code-first and DRY (Don't Repeat Yourself) development. .Net MVC3 is a framework built on top of .Net 4.0 Framework, and allows for very fast development of Controllers. I can scaffold Views from the Controller Actions that I write that act on data models. This lets me quickly develop CRUD (Create, Read, Update, Delete) that an administrator can use to manage their company data. I use Razor syntax in the View Engine which is new to MVC3. It provides an easier way for server-side scripting in web pages than the native C# scripting would allow, and is borrowed from Ruby. I use EFCodeFirst (CTP5) with Entity Framework 4.0 for a code-first and DRY approach to development. I can scaffold a physical database from my data models so that I am only required to make data model/database changes in one place. Also, I can specify client-side data validation requirements from within these data models so that validation only needs to exist in one place and this added logic can appear to be separated from my View pages. Since admins will usually be working from within an office, I decided that they will need to be on a computer with minimum screen resolution of 800x600. Tablets or netbooks will work well but, access through smartphones is not reccommended because of the small display area inherent in these devices.

Presentation Layer (View):
  • Required package: jQuery Mobile

Secondly, I needed a fast way to develop the end-user area of my web applications (and I separate end-user from administrator in this example). The web application will need to be accessed from many different platforms of smartphone, tablet or computer. I had created a few tests but found it tough to develop a separate design for each smartphone or tablet. The design needed to adapt to horizontal or vertical viewing orientation of the device, and I needed it to be cross-browser and cross-platform ready. After running tests to make decide on an open-source solution, I decided to go with jQuery Mobile. It is soon to be out of its alpha stage and ready for production. jQuery Mobile handles most of the cross-browser and cross-platform issues that would take months to develop for. It also makes it easier to storyboard out designs because of its fluid layout that will easily adapt to any platform. jQuery Mobile also makes a website look and work similar to smartphone applications, using big user interface controls and controls that react well to tap or sliding motions. jQuery Mobile supports all A-Grade browsers and some B-Grade browsers, including IE6. Their documentation is not ideal, and is written in problem-solution format, but it covers everything a developer would run in to. This is the most popular mobile solution right now, has plenty of funding for continued development, and has a large network of web developers using it. Because I have tried out jQuery Mobile for development of my own projects, I can understand the benefit of the updates being made in their alpha releases. Because I have researched the mobile market, I can understand the benefit of supporting certain types of older browsers, including IE6.

Window Web Hosting Service:

Finally, knowing my technical requirements I decided on a web host that supports .Net 4.0 Framework, MVC3, SQL Server 2008 and that has exceptionally helpful and responsive technical support. I went with WinHost and I highly recommend use of their service. I have been able to successfully host multiple sites under a single domain. Feel free to contact me with any questions regarding domain/sub-domain routing, database data types supported by WinHost, or any other questions as I have likely ran across a similar situation.

Using these methods, tools, and packages, I can significantly reduce my time spent on GUI design and database management. I can quickly develop an enterprise-level web application that meets the growing demands of today's market. It took me 1 week to test out different methods and decide on the best tools and packages to use, and now I am able to develop a complete web application within a few days. After development and through networking with industry professionals, I am confident that I chose the best options available.

No comments:

Post a Comment