The need for a more robust and interactive web experience is growing rapidly and so is the need of 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 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 ASP.NET Core Web App layer, while the database access layer, cache services, and web API services are encapsulated in 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 necessary pre-defined "N" tier/layers architecture for us developers automatically, which saves our time and effort to worry less about the complexity of 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/layer himself/herself and no wonder MVC design pattern is the most popular for web development. Remember that design pattern and architecture are separate concepts. Unfortunately, many senior developers refer to design pattern and architecture as same. So, they refer MVC as architecture rather than a design pattern.
So, here comes ASP.NET Core that brings the benefit of a pre-built architectural framework that eases out tier deployment of the project along with providing pre-build Single Page Application (SPA) design pattern, Razor Pages (Page based more 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 Traditional Web Application development style, UI application logic is performed on the server side. For example, in 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 necessary component, the logic against any action is done at the server level and then 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 Single Page Application development style, UI logic is performed at the client (web browser) side and server side is communicated primarily for data processing through Web API calls. For example, modern front-end framework AngularJS provides all the necessary tools to perform interactive UI logic at 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 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 MVC pattern provides, but with its own syntax style and in a much more 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., "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 version MVCmvc style that attaches controller or view model directly with the page. There are no multiple views for each page, but, on one and necessary behind logic is attached to the page and the default endpoint is "OnGet()”" method. This is why it is termed as 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 MVVM pattern. So, in short, Razor pages are web development MVVM pattern 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 do necessary load balancing of requests accordingly. In case of 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 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.