Web Forms, MVC, Single Page App, Web Pages Comparison

ASP.Net is a GREAT platform to build rich, interactive web based application and services. It provides many useful features like authentication, authorization, session handling, HTTP request handling, routing, bundling and minification, friendly URLs etc. You might have seen below diagram in many presentations from Microsoft, which highlights core pieces of ASP.Net web stack. Sites section contains different UI framework options like MVC, Web Page, Web Forms and Single Pages [commonly known as SPA] to build web based application. Services section contains Web API which deals more with data transformation in different formats like XML and JSON and SignalR is used for real-time data communication between server and clients using JavaScript. Please note, both Sites and Services framework components developed on top of core ASP.Net framework, so they get benefit of all useful features mentioned earlier.

One-ASP.Net-Platform_thumb1

With different UI framework options availability, sometime it gets difficult to choose right UI framework option to kick-off project development. Even though you can build hybrid web application combining MVC and Web Forms into one, I personally don’t think it’s a good strategy for couple of reasons.

  1. Web Form and MVC follows different architectural patterns. While Web Form was built on Page Controller pattern, where all the functionality is encapsulated in one page, MVC is loosely coupled and overall functionality is shared between Models, Views and Controllers.
  2. Web Form supports rich server side UI controls and MVC views are pure HTML file without any server side UI controls, so implementing two pages – one using web form and other using MVC can be confusing to application development team. 
  3. MVC follows convention over configuration paradigm which requires certain application files like Controllers, Views, Models needs to be placed in specific folder. Web Forms does not follow this pattern and project files can be stored using any convenient folder structure. 

This list can probably go on and on and maintaining complex web application with hybrid approach can easily get difficult.

However the purpose of this article is not to discuss pros and cons of hybrid approach, rather we will discuss pros and cons of each of these UI framework. Depending on your project requirement you can choose appropriate UI framework.

Web Forms

  • Advantages

    1. Matured Rapid Application Development [RAD] platform, which provides rich set of server side UI controls to design the UI layer of an application.

    2. It provides event driven programming model which is similar to traditional desktop based applications, in which developer normally drags and drops UI control onto the page and program against its events. It also allows flexibility to declare UI controls in code behind file and add it to web page at runtime.

    3. Custom UI controls can be easily developed. Visual Studio provides different templates to create custom controls which can be used across different web forms and projects are per the requirement.

    4. Companies like Telerik, Infragistics provides rich set of additional UI controls. These controls can hugely improve the overall project development time.

    5. Server controls can persist the data in ViewState during page postback operation. This can be considered as negative point as compared to other UI framework like MVC, however in some of the use cases, this can add a lot of value to the project with minimal amount of build efforts.

  • Limitations

    1. Does not follow standard HTTP protocol and its verbs like GET, POST, PUT, DELETE for client server communication and CRUD operations. Rather developer writes business functionality in the UI control event handler like button_click. This approach creates tight coupling between UI layer and business layer of the application, which makes it difficult to unit test business layer functionality.

    2. ViewState needs to be handled very carefully, both at page level and at control level. Improper implementation of ViewState can increase the overall page size [output HTML] and can degrade page rendering time.

    3. Tight coupling between UI and business layer makes it difficult to use any any mocking framework like RhinoMock, Moq, Microsoft Fakes etc.

    4. Limited control over HTML output as server side control renders HTML along with its ViewState information. This makes it very difficult to implement any client side functionality [for e.g validation, AJAX] using JavaScript.

MVC

  • Advantages

    1. Embraces HTTP – One of the main difference between ASP.Net MVC and ASP.Net Web Form is how both the framework handle HTTP request. While on Web Form you can use server controls to rapidly design a form, there is no way to execute the page function using HTTP methods like Get, Put, Post and Delete. Web Form was primarily designed to provide Desktop like user interface [similar to Visual Basic] to web developers, however they are few limitations like no control over HTML output, complex rendering of ViewState etc. On the other hand, MVC framework embraces HTTP protocol. Since Controller handles incoming HTTP request, MVC framework allows you to decorate Controller Action using HTTP verbs like Get, Post, Put, Delete so that respective function gets called during HTTP GET, POST, PUT, DELETE operations.

    2. Complete control over HTML output – This is another major difference between Web Form and MVC. While Web Form provides various server controls like Grid, Date picker etc. to quickly design the web page, however these server controls maintain their state in a ViewState hidden field during server round trip. As a developer, you don’t have much control over the ViewState rendering and it becomes really difficult to add any client side logic using JavaScript in such case. This problem was greatly simplified in ASP.Net MVC as you have complete control over HTML output. Since MVC framework does not use server controls, you need to use standard HTML controls to design the user interface. There are few third party companies like Telerik, Infragistics, Syncfusion who provides rich set of ASP.Net MVC controls for rapid application development.

    3. Clear code separation – Model View Controller framework clearly defines the responsibilities for each component in the framework. Controller handles incoming HTTP request, can make a call to external web services to populate the Model object and then can select a View to render the data persisted in Model object. While primary purpose of Model is to persist the data, Views contains necessary HTML to display the information on Web. Clear separation between core framework components makes it possible to write clean, maintainable and testable code.

    4. Convention over configuration – MVC follows certain conventions like separate folders for Models, Views, Controllers. Shared views are stored in Shared folder. During request processing, MVC framework tries to identify the view in specific Views folder [like Customer, Order]. If required view is not available in specific folder, it searches for Shared folder. MVC framework does this on its own and no additional code needs to be implemented for this. This can help new member in the team to quickly come up to the speed rather than understanding every configuration settings from different config files. For more information about convention over configuration paradigm, please read http://en.wikipedia.org/wiki/Convention_over_configuration

    5. View engine extensibility– By default ASP.Net MVC supports two view engines, Web Form View [ASPX] and Razor View [CSHTML] engine to create the view. However its possible to use other View Engines like Spark, NHaml. Unlike Web Form View Engine, Razor View Engine is intelligent enough to understand the difference between HTML and C# code.

    6. Parallel Development – Models, View and Controllers are loosely coupled which allows different team members to work on different files at the same time. In Web Form world, ASPX pages are tightly coupled with code behind file, so it becomes difficult for two or more developers to work on same functionality in parallel. In MVC, UI design team can work separately on Views while other team members can implement Controller and Model functionality and test it independently.

  • Limitations

    1. MVC pattern distributes business functionality in different physical files which represents Models, Views and Controllers, as opposed to Web Form which persists everything in one physical file. In a large scale application, file maintenance can become a challenge if not organized neatly.

    2. It does not provide any rich server side user interface controls for Rapid Application Development. It provides basic HTML control for UI development. For any complex UI functionality, UI control needs to be developed from scratch or using third party libraries provided by companies like Telerik, Infragistics etc.

    3. If your team is familiar with event driven programming model or has experience in desktop application development using WinForm or WPF, then they need to understand MVC programming model which will have its own learning curve.

    4. Maintaining states for different UI controls can be difficult as compare to Web Forms. Since Web Forms provides server side controls which can maintain its state during postback operation, MVC doesn’t offer any such functionality out of the box.

Single Page App

  • Advantages

    1. Biggest advantage of SPA is 3 R’s – Reach, Responsive, Round Trip. If you want to develop a web app which can be accessible on different platforms and on different devices [Reach], which needs to be very efficient and responsive to different resolutions [Responsive] and which does not require many round trips between client and server [Round Trip], you should seriously consider SPA framework.

    2. Loads the data for commonly used views during initial application launch, so data is always cached in the memory. This approach drastically improves application response time since client doesn’t make any server request to get the data.

    3. Full control over HTML output as the user interface / presentation layer of the application needs to be implemented using built-in HTML tags / controls. SPA does not support any ASP.Net Web Form server controls.

    4. Most of the business functionality needs to be implemented using JavaScript. The advantage is, you can use your preferred JavaScript framework like KnockoutJS, BackboneJS, AngularJS for functionality like model binding, routing, views etc.

    5. Visual Studio provides many useful built-in templates to speed up the development process.

    6. Since most of the development needs to be done using HTML, JavaScript and CSS, you will get great community support if you get stuck anywhere.

  • Limitations

    1. Since most of the functionality gets implemented using JavaScript, client machines must have JavaScript enabled.

    2. It loads the data for commonly used views during initial application launch. Application needs to be designed very carefully to identify the data that needs to be loaded during initial load request. Improper design can degrade application performance and might not appeal end user to use the application further.

    3. For a large scale application maintaining different JavaScript, HTML, CSS files can be a huge challenge.

    4. It does not support convention over configuration, so project team needs to adhere to certain pattern in setup the project or solution structure. It might take some time for new team members in the team to understand overall details.

    5. If you’re using Nuget as a package management tool, then it handles file versioning automatically. If you’re not, then you need to maintain it manually. Again it can be a challenge considering project complexity, team size etc.

Web Pages

  • Advantages

    1. Framework to build dynamic web pages, typically suited for small scale applications.

    2. Web pages can be developed using WebMatrix, a free tool from Microsoft which integrates web page editor, database utilities, integration with different browsers, local web server for testing web pages and publishing website to internet.

    3. Uses Razor view engine, which is intelligent enough to understand the difference between server side code and HTML code.

  • Limitations

    1. Compared to other UI frameworks [Web Forms, MVC and SPA], Web Pages are not suitable for a large scale application.

    2. Maintaining intermixed HTML and Razor code can become a challenge in case of a very large file / project.

Summary

In this article we have covered different UI frameworks available in ASP.net web stack. We have covered pros and cons of each of these options. I hope this article helps you choose correct framework to start project development.

Thanks for reading.

8 Comments

  1. aslam · February 6, 2014 Reply

    NICE. Article. Use cases might have interested reader more. About Spa They are not search engine friendly one need to take additional effort

    • Prasad Honrao · February 9, 2014 Reply

      Thanks for the feedback Aslam. I had received lots of feedback earlier to explain pros and cons of each of these UI options and so the article. I agree one needs to take care of search engine friendliness in SPA, however its still easier as compared to other UI frameworks.

  2. Byron Jones · February 16, 2014 Reply

    For Web Forms you write: “developer writes business functionality in the UI control event handler like button_click”. However, most experienced Web Forms developers do not do this at all. They are more likely to use those click events to trigger actions on objects in the business logic layer of their application. In the rare instances where I’ve seen people placing business logic code in those UI events, it’s either over-simplified example code, or inexperienced developers.

    • Prasad Honrao · February 17, 2014 Reply

      Thanks for the feedback Byron. I agree that web form developers should not write business functionality inside the event handler directly, however my point was that web forms does not provide clear separation similar to MVC or SPA so web form developers usually finds it difficult to write and maintain modular code. I personally don’t recommend to write business functionality in UI event handler as it makes code tightly coupled and difficult to unit test.

  3. Fallon · February 18, 2014 Reply

    I agree with Byron! I do use both Webforms and MVC, but by far prefer Webforms because I can do everything done in MVC simpler, and still use a more MVVM model that I loved in Silverlight!

    I’ve never used any rich controls in Webforms, I only do straight HTML, and do REST calls to gather data. I have the option of using the built in callbacks of Webforms, or building a SPA using ajax calls, using the ASPX page only to load initial data!

    Even when I use MVC, I generally tie it to our own business layer and ignore most of it’s features.

    I think the bottom line is to stick as closely to standards as possible, and if you stray, you know exactly what you’re doing and why!

    Besides, a Webform app can be built so much more quickly, and with less boilerplate if you already have a solid business layer, but that’s just my opinion!

    Finally, I loved the article, and it’s great food for thought!

    • Prasad Honrao · February 18, 2014 Reply

      Appreciate your feedback Fallon. I do agree with Byron as well. Its just that I have noticed web developers end up writing business logic inside UI event handler due to lack of experience / guidelines and without understanding its impact on unit testing etc and eventually it becomes ‘read-only’ code! I hope you got the point. Thanks again for valuable feedback.

  4. Web Forms, MVC, Single Page App, Web Pages Comparison | Mind Repository · February 18, 2014 Reply

    […] Web Forms, MVC, Single Page App, Web Pages Comparison […]

  5. WebForms vs MVC–The War Is Over · September 25, 2014 Reply

    […] Web Forms, MVC, Single Page App, Comparison […]

Leave a Reply