SPA in ASP.NET Core

build: npm run build:vendor&&npm run build:custom;
              

SPA in ASP.NET Core 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. SPA used AJAX and HTML5 to create fluid and responsive web applications, without constantly reloading the page. However, this means that most of the work is done on the client-side in JavaScript. For a traditional ASP.NET developer, it can be difficult to leap. Fortunately, many open-source JavaScript frameworks make it easy to create a SPA.   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 Single page application (SPA) is a popular type of web application due to its rich user experience. Incorporating client-side SPA frameworks or libraries, such as Angular or React, with server-side frameworks such as ASP.NET Core can be strenuous. JavaScript services were developed to reduce friction in the integration process. It enables seamless operation between different client and server technology stacks. Background 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? In pure SPA, all UI interactions occur on the client-side, via JavaScript and CSS. After the initial page load, the server acts purely as a service level. The client only requires to realize what HTTP requests to send. It doesn't matter how the server applies things to the back end. 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 In the JavaScript MVVM framework, the view is markup and view model code. 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 Searching for Dedicated ASP.NET Core Web Developer? Your Search ends here. See here Server-side prerendering Universal (also known as isomorphic) application is a JavaScript application capable of running both server and client. Angular, React and other admiredframeworks offer a universal platform for this application development method. The idea is to first render the framework components on the server through Node.js, and then delegate further execution to the client. 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. Routing helpers 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. Conclusion 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.