The need for a more robust and interactive web experience is growing rapidly and so is the need for more improved, simpler, and developer-friendly web technologies. All we want is to make web development more productive, highly user-friendly, interactive, and obviously, quicker to develop with fewer efforts. Gone are those days when the development of a website consumed a lot of time and expenses as everything needed to be done from scratch by yourself. Nowadays, everything is available to a web developer and all that is needed to build a website is understanding of the technology and a focus on more productive web development.
Today's demonstration is more theoretical than the code base as I will try to elucidate ASP.NET Core 2 architecture and ideology behind some core design patterns being made part of the ASP.NET Core 2 development templates.
![ASP.NET]()
ASP.NET Core Architecture
The ideology behind ASP.NET Core in general, as the name suggests, is to lay out web logic, infrastructure, and core components from each other in order to provide a more development-friendly environment. The concept is somewhat similar to "N" tier/layer architecture, the only difference is that ASP.NET Core defines the layers as the core component of the platform which relieves the developer from redefining it in order to make a solution more modular and reusable. What happens in ASP.NET Core is that the main business logic and UI logic are encapsulated in the ASP.NET Core Web App layer, while the database access layer, cache services, and web API services are encapsulated in the infrastructure layer and common utilities, objects, interfaces, and reusable business services are encapsulated as micro-services in application core layer.
So, in essence, ASP.NET Core creates the necessary pre-defined "N" tier/layers architecture for us developers automatically, which saves our time and effort to worry less about the complexity of the necessary "N" tier/architecture of the web project and focus more on the business logic. In non-ASP.NET Core environment, we as developers are more focused on the business logic and the selection of best design patterns, not on the architecture side because at the end of the day, the final version of our web project is deployed on a single-tier machine. We are more focused on managing the complexity of the project in terms of code re-usability and modular components but on a single tier, very few organizations/enterprises actually implement "N" tier/layer architecture to make their product more robust and modular because it requires more resources consumption, management for scaling the project as necessary, and, of course, hiring of more skilled resources who can build the necessities.
No wonder you will find many modern web development frameworks more pre-build design pattern friendly rather than pre-build tier/layer-friendly. Because a developer needs to make the necessary tiers/layers himself/herself and no wonder the MVC design pattern is the most popular for web development. Remember that design patterns and architecture are separate concepts. Unfortunately, many senior developers refer to design patterns and architecture as the same. So, they refer to MVC as architecture rather than a design pattern.
So, here comes ASP.NET Core which brings the benefit of a pre-built architectural framework that eases out tier deployment of the project along with providing a pre-build Single Page Application (SPA) design pattern, Razor Pages (Page based cleaner MVC model) design pattern, and traditional MVC (View-based model) design pattern. These design patterns are mostly used in a hybrid manner but can be utilized as an individual-only pattern as well.
ASP.NET Web core 2 project templates
Given below is the list of project templates that ASP.NET Web Core 2 provides.
- ASP.NET Core Web App (Razor Pages).
- ASP.NET Core Web App (Model-View-Controller).
- ASP.NET Core Web API (no UI).
- ASP.NET Core with Angular (SPA).
- ASP.NET Core with React.js (SPA).
- ASP.NET Core with React.js and Redux (SPA).
Traditional Web application v/s Single page application (SPA)
There are two approaches in which a web application is being built i.e.
- Traditional Web Application.
- Single Page Application (SPA).
Traditional Web application
In the Traditional Web Application development style, UI application logic is performed on the server side. For example, in the MVC design pattern application, every time a user clicks, the web request is sent back to the server and in response, the entire page is reloaded. Even with AJAX calls to load only the necessary components, the logic against any action is done at the server level and then the necessary UI or component on the screen will load. This development style makes frequent web request calls impacting the performance of the website.
Single Page Application (SPA)
In a page Application development style, UI logic is performed at the client (web browser) side, and the server side is communicated primarily for data processing through Web API calls. For example, the modern front-end framework AngularJS provides all the necessary tools to perform interactive UI logic at the client side and make only necessary calls to the server side. This definitely reduces frequent server requests and improves performance.
When to choose Traditional Application vs Single Page Application (SPA) Development Style
Here, below is the excerpt from Architecting Modern Web Applications with ASP.NET Core 2 and Microsoft Azure book that explains well about the decision for the development approach. Notice that most of the time hybrid approach is being used for development style:
| Factor |
Traditional Web App |
Single Page Application |
| Required Team Familiarity with JavaScript/TypeScript |
Minimal |
Required |
| Support Browsers without Scripting |
Supported |
Not Supported |
| Minimal Client-Side Application Behavior |
Well-Suited |
Overkill |
| Rich, Complex User Interface Requirements |
Limited |
Well-Suited |
Razor Pages (Page based model)
Razor Pages are the default web development approach in ASP.NET Core. Razor pages are referred to as a page-based model. Razor pages are built into ASP.NET Core MVC. It provides all the similar features that the MVC pattern provides, but with its own syntax style and in a much cleaner way. In typical MVC (view-based model) style, you will see a lot of folders, each for controller, model, and view. In the case of Razor pages, there are no such folders, but one, i.e., the "Pages" folder which is a route folder for all pages. Instead of a separate controller with actions and each action representing a view, razor pages are compact versions MVCmvc style that attach the controller or view model directly to the page. There are no multiple views for each page, but, one necessary behind logic is attached to the page and the default endpoint is the "OnGet()” method. This is why it is termed a page-based model. In simple terms, those of you who are familiar with WPF development or Windows phone development, or Windows Store development might find this style similar to the MVVM pattern. So, in short, Razor pages are web development MVVM patterns in which the View Model is attached directly to the page.
Microsoft azure vs IIS Server deployment
The deployment of ASP.NET Core can be done with a personal web-hosted server or on Microsoft Azure. However, the pre-built architectural benefit that is the essence of ASP.NET Core will be noticed more on Microsoft Azure as Microsoft Azure will automatically handle the tier/layers deployment and with automatic scaling while noticing the developer and doing necessary load balancing of requests accordingly. In the case of an IIS server, ASP.NET Core will be deployed as a regular single-tier application requiring necessary steps for application scaling and load balancing the requests.
Conclusion
In this article, you learned about ASP.NET Core architecture ideology and saw different project templates that ASP.NET Core 2 provides. You learned about the traditional web application approach and single page application (SPA) approach along with a necessary comparison to choose between traditional application and a single page application (SPA) approach.
Disclaimer
I do not own any image. Images are taken from Architecting Modern Web Applications with ASP.NET Core 2 and Microsoft Azure.