The SPA stands for single-page applications is web applications that load a single HTML page and dynamically update that page as the user interacts with the application.
Table of Content
- 1. Background
- 2. The MVC and MVVM Patterns
- 3. What are SPA Services?
- 4. Prerequisites for using SPA Services
- 5. Server-side prerendering
- 6. Webpack Dev Middleware
- 7. Hot Module Replacement
- 8. Routing helpers
- 9. Conclusion
In a traditional web application, every time the application makes a call to the server, the server presents a new HTML page. Refreshes a page in this browser. If youever wrote a PHP application or a Web forms application, this page must look amicable with the life cycle.
In SPA, after the first page is loaded, all interaction with the server happens through AJAX calls. This is called Ajax return data - not markup - usually in JSON format. The application uses JSON data to dynamically update the page without reloading the page.
One advantage of SPA is obvious: the app is more fluid and responsive-without the jarringeffect of reloading and re-rendering the page. The second advantage may be less obvious and it worries how you architects a web application.Sharing application data as JSON builds a separationbetween presentation and app logic.
Figure 1: The Traditional Page Lifecycle vs. the SPA Lifecycle
This separationmakes it easy to design and evolve each level. In a well-designed SPA, you can change the HTML markup without touching the code that applies the application logic (at least, that's ideal). You will see it in action when we will discuss data binding.
Read More: How To Secure Asp.net Core Web App?
You can change the entire backend that runs the service, and you won't break the client unless you change the API. The reverse is also true - you can change the entire client application without changing the level of service. For example, you can write to a local mobile client that consumes the service.
The MVC and MVVM Patterns
MVC pattern dates back to the 1980 and early graphical UIs. The goal of MVC is to factorthe code into three different responsibilities, as shown in Figure2. Here's what they do:
- The model domain represents data and business logic.
- Displays the view model.
- This controller receives user input and updates the model
Figure 2: MVC Pattern
A more recent type of MVC is the MVVM pattern (see Figure 3). In MVVM:
- The model still represents the domain data.
- The model is an abstract representation of the view.
- Display the view model and send user input to the view model.
Figure 3: MVVM Pattern
There are many types of MVC, and the literature on MVC is often confusing and contradictory. It is not surprising for the design pattern that began with Smalltalk-76 and is still used in modern web applications. So, it is good to know the theory, the main thing is to understand the particular MVC framework you are using.
What are SPA Services?
Spa Services was developedfor ASP.NET Core as the developer is elevated server-side platform for developing SPA. The services are not required to develop a SPA with ASP.NET core, and it does not lock developers into specific client frameworks.
SPA services provide useful infrastructure such as:
- Server-side prerendering
- Webpack Dev Middleware
- Hot Module Replacement
- Routing helpers
These infrastructure components enhance both development workflow and runtime experience. The components can be adapted individually.
Prerequisites for using SPA Services
If you want to work with SPA services, install the following:
Node.js with npm (version 6 or later)
To verify that these components are installed and can be found, run the following from the command line:
node -v && npm -v
If deploying to the Azure web site, no action is required - Node.js is installed and available in the server environment.
.NET Core SDK 2.0 or later
On Windows using Visual Studio 2017, SDK is installed by selecting .NET Core Cross-Platform Development Workload
Microsoft.AspNetCore.SpaServices NuGet package
Webpack Dev Middleware
The Webpack Dev Middleware introduces a streamlined development workflow in which Webpack builds resources on demand. An alternative approach when changing third-party dependencies or custom code is to use the Webpack via the project's npm build script.
build: npm run build:vendor&&npm run build:custom;
Hot Module Replacement
Think of Webpack is Hot Module Replacement (HMR) feature as the development of Webpack Dev Middleware. HMR introduces all the same advantages, but it further streamlines the development workflow by automatically updating the page content after integrating the changes. Do not confuse this with browser refresh, which would interfere with the current in-memory status and debugging session of the SPA. Webpack Dev is a live link between the middleware service and the browser, which means browsers change.
In most ASP.NET Core-based SPAs, in addition to server-side routing, client-side routing is always desired. SPA and MVC routing systems can operate independently without interference. However, there is one edge case posing challenges: Identifying 404 HTTP responses.
Consider the scenario in which an extension less root of /some/ page is used. Assume that the request does not pattern-match the server-side route, but its pattern does not match the client-side route. Now consider the incoming request for /images/user-512.webp, which is expected to find the image file on the server. If the requested resource path does not match any server-side route or static file, it is unlikely that the client-side application would handle it - generally returning a 404 HTTP status code is desired.
In this article, we have portrayed about Single page applications in ASP.NET Core.We also introduced some of MVC and MVVM Patterns for example,SPA Services,Server-side prerendering,Webpack Dev Middleware,Hot Module Replacement, and Routing helpers,etc.