First of all, I would like to thank you for getting a copy of this book. This book is designed to teach busy developers how to build a real-world full-stack web application, from development to deployment. The book is tailored based on the step-by-step process I have developed throughout the years from my workshops. So, let's start the journey.

This chapter serves as a short recap regarding the current state of ASP.NET Core and Vue.js to give you a glimpse of what lies ahead in the web development of ASP.NET Core and Vue.js. You will also see how stable and reliable Vue.js is as an app and learn about the team behind writing and maintaining the Vue.js framework.

In this chapter, we will cover the following topics:

• Introducing ASP.NET Core
• What's new in .NET?
• What's new in ASP.NET Core?
• Introducing Vue.js

You will find the repository for the application we will build at this URL: https://github.com/PacktPublishing/ASP.NET-Core-and-Vue.js.

Every chapter has its directory, and each directory has one folder named start and one folder named finish.

The start folders are the state of the repository before any code was written to it. The finish folders are the state of the repository at the end of every chapter.

ASP.NET Core is an open source web app framework from Microsoft built to be fast, performant, and to work across platforms such as Windows, macOS, and Linux, for building modern cloud services and internet-connected apps. You can use the cross-platform VS Code to build your applications without installing virtualization software such as Parallels or VMware. You only need to install another instance of VS Code on another operating system, git clone your repository, install .NET Core SDK, and continue writing code.

The benefits that developers can get from smaller application surface areas brought by ASP.NET Core's framework structure are tighter security, improved performance, and reduced serving.

However, before we discuss what's new in ASP.NET Core 5, we must first know what .NET 5 is.

.NET is an open source development platform created by Microsoft for building many different types of applications.

Microsoft now uses a single framework that unifies all .NET platforms, from developing for web apps, mobile, and the cloud, to desktop. .NET 5 includes both Xamarin and its web assembly platform, and to make it better, Microsoft was also able to move the support for Windows Presentation Foundation (WPF) and Windows Forms to the framework.

Look at Figure 1.1, which shows that the new .NET 5 platform provides a common set of APIs supporting the different runtime implementations:

Figure 1.1 – .NET: A unified platform

You can use the same APIs of .NET 5 and target different OSes, application types, and chip architectures. Plus, you will be able to configure or edit your build configuration using your favorite Integrated Development Environment (IDE) and text editors—you can use popular IDEs such as Visual Studio, Visual Studio for Mac, or Rider, or text editors such as Visual Studio Code or the plain old command line to build your application.

The highlights of .NET 5 are as follows:

• It includes the new C# 9 and F# 5.
• A new single-file publish type that executes your app out of a single binary.
• Runs .NET natively on Windows ARM64.
• Improves ARM64 performance (Linux and Windows) in the JIT and BCL libraries.
• Reduces the container image size and implements new container APIs to enable .NET to stay up to date with container runtime evolution.
• It enables easier migration from Newtonsoft.Json to System.Text.Json.

Now we can take a look at what's new in ASP.NET Core 5.

Here is a rough list of what has been added to the new ASP.NET Core web framework:

• Performance Improvements to HTTP/2: .NET 5 improves the performance of HTTP/2 by adding support for HPack dynamic compression of HTTP/2 response headers in Kestrel.
• Reduction in container image sizes: Sharing layers between two images dramatically reduces the size of the aggregate images that you pull. This reduction is achieved by re-platting the SDK image on the ASP.NET runtime image.
• Reloadable endpoints via configuration for Kestrel: Kestrel can now observe changes to configurations passed to KestrelServerOptions.Configure. Then it can be applied to any new endpoints without restarting your application.
• JSON extension methods for HttpRequest and HttpResponse: Using the new ReadFromJsonAsync and WriteAsJsonAsync extension methods, you can now easily consume and use JSON data from HttpRequest and HttpResponse. The JSON extension methods can also be written with an endpoint routing to create JSON APIs like so:

  endpoints.MapGet("/weather/{city:alpha}", 
                   async context =>
  {
      var city = (string)context.Request
                                .RouteValues["city"];
      var weather = GetFromDatabase(city);
      await context.Response.WriteAsJsonAsync(weather);
  });

• An extension method allows anonymous access to an endpoint: The AllowAnonymous extension allows anonymous access to an endpoint when using endpoint routing. In the following code, the extension method, AllowAnonymous(), is chained after calling the MapGet method:

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
    app.UseRouting();
    app.UseAuthentication();
    app.UseAuthorization();
    app.UseEndpoints(endpoints =>
   {
    endpoints.MapGet("/", async context =>
    {
     await context.Response
                  .WriteAsync("Hello Packt!");
    }).AllowAnonymous();
   });
  }

• Custom handling of authorization failures: With the new IAuthorizationMiddlewareResultHandler interface invoked by AuthorizationMiddleware, custom handling of authorization failures is now easier than before. You can now register a custom handler in the dependency injection container that allows developers to customize HTTP responses.
• SignalR Hub filters: Similar to how middleware lets you run code before and after an HTTP request, Hub Pipelines in ASP.NET SignalR is the feature that allows you to run code before and after Hub methods are called.
• Updated debugging for Blazor WebAssembly: No need for a VS Code JS debugger extension for developing Blazor WebAssembly apps.
• Blazor accessibility improvements: Input components that derive from InputBase now automatically render aria-invalid (an HTML validation attribute) on failed validation.
• Blazor performance improvements: This includes optimized .NET runtime execution, JSON serialization, JavaScript interop, and component rendering.
• Kestrel socket transport support for additional endpoint types: The System.Net.Sockets transport in Kestrel now allows you to bind to both Unix domain sockets and existing file handles.
• Azure Active Directory authentication with Microsoft.Identity.Web: Any ASP.NET Core project templates can now easily integrate with Microsoft.Identity.Web to handle authentication with Azure AD.
• Sending HTTP/2 PING frames: Microsoft added the ability to send periodic PING frames in Kestrel by setting limits on KestrelServerOptions, which are Limits.Http2.KeepAlivePingInterval and Limits.Http2.KeepAlivePingTimeout, as shown in the following code:

  public static IHostBuilder CreateHostBuilder(string[] args) =>
      Host.CreateDefaultBuilder(args)
          .ConfigureWebHostDefaults(webBuilder =>
          {
              webBuilder.ConfigureKestrel(options =>
              {
                  options.Limits.Http2.                KeepAlivePingInterval = TimeSpan
                  .FromSeconds(10);
                  options.Limits.Http2.                KeepAlivePingTimeout = TimeSpan
                  .FromSeconds(1);
              });
              webBuilder.UseStartup<Startup>();
          });

• Custom header decoding in Kestrel: Microsoft also added the ability to specify which System.Text.Encoding to use to interpret incoming headers based on the header name instead of defaulting to UTF-8, like so:

  public static IHostBuilder CreateHostBuilder(string[] args) =>
      Host.CreateDefaultBuilder(args)
          .ConfigureWebHostDefaults(webBuilder =>
          {
              webBuilder.ConfigureKestrel(options =>
              {
                  options.RequestHeaderEncodingSelector =                 encoding =>
                  {
                      switch (encoding)
                      {
                          case "Host":
                              return System.Text
                                           .Encoding
                                           .Latin1;
                          default:
                              return System.Text
                                           .Encoding
                                           .UTF8;
                      }
                  };
              });
              webBuilder.UseStartup<Startup>();
          });

• CSS isolation for Blazor components: Blazor now supports scoped CSS styles inside a component.
• Lazy loading in Blazor WebAssembly: Use the OnNavigateAsunc event on the Router component to lazy load assemblies for a specific page.
• Set UI focus on Blazor apps: Use the FocusAsync method on ElementReference to set the UI focus on an element.
• Control Blazor component instantiation: IComponentActivator can be used to control how Blazor components are instantiated.
• Influencing the HTML head in Blazor apps: Add dynamic link and meta tags by using the built-in Title, Link, and Meta components in the head tags of a Blazor app.
• Protected browser storage: ProtectedLocalStorage and ProtectedSessionStorage can be used to create a secure persisted app state in local or session storage.
• Model binding and validation with C#9 record types: You can use Record types to model data transmitted over the network like so:

  public record Person([Required] string Name, 
                       [Range(0, 150)] int Age);
  public class PersonController
  {
     public IActionResult Index() => View();
     [HttpPost]
     public IActionResult Index(Person person)
     {
            // ...
     }
  }

  You can see the record type after the public access modifier.

• Improvements to DynamicRouteValueTransformer: You can now pass state to DynamicRouteValueTransformer and filter the set of chosen endpoints.
• Auto-refresh with dotnet watch: The ASP.NET Core project will now both launch the default browser and auto-refresh it as you make changes to your code while running dotnet watch.
• Console Logger Formatter: The console logger formatter gives the developer complete control over the formatting and colorization of the console output.
• JSON Console Logger: Microsoft added a built-in JSON formatter that emits structured JSON logs to the console.

That was the list of what's new in ASP.NET Core 5. What about breaking changes? Are there any breaking changes in ASP.NET Core 5? Yes, and let's check them out in the next section.

Breaking changes in migration from ASP.NET Core 3.1 to ASP.NET Core 5.0

If you are planning to migrate your existing app or a project under development in .NET Core 3.1 to Core 5, you might need to take a pause and read the following quick list of breaking changes.

Authentication

There's a new behavior in integrating Azure and ASP.NET Core to determine a user's identity. The AzureAD.UI and AzureADB2C.UI APIs and packages are now obsolete in the framework. AzureAD.UI and AzureADB2C.UI migrated to the Microsoft Authentication Library (or MSAL), which is under Microsoft.Identity.Web.

Authorization

There is a little change in the endpoint routing of ASP.NET Core. The resource passed to the authorization endpoint is now guaranteed to be of the type HttpContext. The new change will allow developers to use the functionalities of HttpContext from non-endpoint routing.

Azure

Azure prefixes replaced the Microsoft prefixes in integration packages. These packages are as follows:

• Microsoft.Extensions.Configuration.AzureKeyVault, which developers use to connect Azure Key Vault to the configuration system.
• Microsoft.AspNetCore.DataProtection.AzureKeyVault, which connects Azure Key Vault to the ASP.NET Core data protection system.
• Microsoft.AspNetCore.DataProtection.AzureStorage, which lets developers port Azure Blob storage into the ASP.NET Core data protection system.

Blazor

This new framework for browser-based .NET apps of Microsoft has some recent changes:

• The compiler will trim any whitespaces in components of Blazor during compile time. Trimming of the compiler improves the performance of rendering and DOM diffing, which is comparing the previous version of the virtual DOM to the new version of the virtual DOM.
• The ProtectedBrowserStorage feature is now part of the ASP.NET Core shared framework for a better developer experience. The shared frameworks are Microsoft.NETCore.App, Microsoft.AspNetCore.App, and Microsoft.AspNetCore.All.
• .NET 5.0 is the new target framework of Blazor Server and Blazor WebAssembly projects to better align with .NET target framework requirements.

HTTP

There are some changes in how you would handle bad HTTP request exceptions and log HTTP requests and responses:

• Microsoft.AspNetCore.Http.BadHttpRequestException is the new derived class of Microsoft.AspNetCore.Server.Kestrel.BadHttpRequestException and Microsoft.AspNetCore.Server.IIS.BadHttpRequestException. These packages are tagged as obsolete and are set for removal in the future release to consolidate duplicate types and to unify the packages across server implementations.
• Code as integers is now the status code used by the IHttpClientFactory interface to log HTTP instead of names, to offer developers more flexibility on querying ranges of values.

Kestrel

Here are the changes to Kestrel, the cross-platform web server for ASP.NET Core:

• SslProtocols.None is now the default TLS protocol version of HttpsConnectionAdapterOptions.SslProtocols instead of SslProtocols.Tls12 | SslProtocols.Tls11, to support TLS 1.3 and future versions by default.
• Since socket-based transport was the default transport of Kestrel, the libuv APIs are now tagged as obsolete and will be removed in the next version.

Middleware

The middleware, which is a pipeline to handle requests and responses, has a new behavior. DatabaseErrorPageMiddleware and its related extensions are marked as obsolete and replaced with DatabaseDeveloperPageExceptionFilter.

SignalR

The SignalR library, which uses real-time web functionality in an application, has a couple of changes:

• ASP.NET Core 5.0 upgrades the package version of the MessagePack hub protocol from 1.x to 2.x, which has the latest improvements.
• The UseSignalR and UseConnections methods are no longer available because they had custom logic that didn't interact with other routing components in ASP.NET Core.

Static files

Serving text/csv, a static file, directly to client applications has a new header value. text/csv replaced application/octet-stream as the Content-Type header value of Static File Middleware for .csv files for compliance with the RFC 7111 standard. You can find the full details of the RFC 7111 standard at https://tools.ietf.org/html/rfc7111#section-5.1.

When to use ASP.NET Core

Since ASP.NET Core provides a web framework that can be used in different use-case scenarios, you can use the framework to build dynamic web applications. This includes web applications such as online stores, internal enterprise apps, content-base, multi-tenant applications, Content Management Systems (CMSes), Software as a Service (SaaS), or just a RESTful service with ASP.NET Core. We will be focusing on building a RESTful service in ASP.NET Core because this is the backend that we will integrate with the Vue.js application in the third part of the book.

ASP.NET Core also contains features for managing authentication, authorization, data protection, HTTPS enforcement, app secrets, XSRF/CSRF prevention, CORS management, and enabling developers to build robust yet secure ASP.NET Core apps.

Why should you learn ASP.NET Core?

Aside from ASP.NET Core's performance, ASP.NET Core is a popular choice with enterprise businesses, insurance, banks, and other types of businesses. Using IT JobsWatch (https://www.itjobswatch.co.uk/), you can search jobs by date in 2020. The .NET Core job vacancy trend has been increasing since 2019, and with average earnings of $95,657/year according to ZipRecruiter (https://www.ziprecruiter.co.uk/).

Based on Stackoverflow's 2020 survey (https://insights.stackoverflow.com/survey/2020), ASP.NET Core is the winner of their most loved and wanted web framework. It received the highest number of votes, which went up to 70.7%, meaning these are the developers who are developing with specific languages or technologies and have shown interest in continuing to create with it, followed by React, Vue, and Express. These are reasons to try and use ASP.NET Core because of the huge availability of jobs, and ASP.NET Core is here to stay for the next several years.

This completes the quick overview of ASP.NET Core and what is new in ASP.NET Core 5. You have learned about the current state of ASP.NET Core and how it is the right choice for building performant RESTful services. Now it is time to meet Vue.js.

Let's see why, suddenly, Vue.js became one of the hottest JavaScript frameworks.

Vue.js is a JavaScript framework for building user interfaces. In a nutshell, Vue.js gives frontend developers everything that they would want. Vue.js has the characteristics of being performant, size-efficient, progressive, developer-friendly, and has one of the slimmest barriers to entry if you are new to frontend development.

Today, Vue.js has more than 1.3 million weekly active users (based on the statistics of Vue.js Devtool extensions) and more than 8 million npm downloads per month.

Today, Vue.js is being used by some of the most iconic and influential organizations around the world, such as Apple, IBM, Microsoft, Google, Nike, Wikimedia, NASA, Pixar, Louis Vuitton, L'Oréal, and tens of thousands of businesses of all sizes.

In the next couple of sections of this chapter, we will check out what the Vue.js core team has added in the new Vue.js 3, and whether learning Vue.js a good investment of your time.

Let's find out.

What's new in Vue.js?

After 2 years of development, the Vue.js core team has finally released the latest Vue.js, version 3, codenamed One Piece. The changes are listed here:

• More maintainable: The Vue.js code base has been re-written in TypeScript for maintainability, and the internals are more modular.
• Faster: Vue.js 3 is faster and has better performance than Vue.js 2. The new version has a new proxy-based reactivity system.
• Smaller: Vue.js has tree shaking; tree shaking is a method to remove unused libraries from the project automatically. This capability is essential to make the file size smaller than the previous version. Vue.js 3 also has some compile-time flags that allow you to drop things that cannot automatically be tree-shaken.
• Scales better: Vue.js now provides the Composition API, an easier way to reuse a segment of Vue.js component logic. The Composition API is an exciting new feature that solves complex use cases such as sharing business logic between components.
• A better developer experience: For me, Vue.js already provided unparalleled developer experience, but Vue.js has improved it in Vue.js 3 (by introducing the new single-file component improvements, type checking for template expressions, and props of sub-components).

Why is learning Vue.js the right choice?

Along with Angular and React, Vue.js makes up one of the big three JavaScript tools for building modern web applications. Vue.js is not backed by a tech company such as Microsoft or any of the Facebook, Amazon, Apple, Netflix, and Alphabet (FAANG) companies. However, through the years of excellent tooling and the great documentation Vue.js provides, it has acquired numerous sponsors worldwide (you can see the list of sponsors at https://github.com/vuejs/vue). Having several sponsorships is good because there will be constant maintenance and improvements in Vue.js.

Third-party libraries such as UI libraries, routing libraries, forms, state management, static site generators, are getting better. Hence, making Vue.js a dependable, trustworthy, solid, stable, reliable, and developer-friendly framework for building enterprise applications. Not to mention that Vue.js has 100+ contributors right now, adding new features, improvements, and fixing all issues that appear on GitHub Vue.js.

This ends our quick overview of Vue.js and what is new in Vue.js 3. You have learned the current state of Vue.js and why considering Vue.js 3 as your frontend application best fits developing modern web applications nowadays.

To summarize everything you have gained from finishing this first chapter, you have learned that ASP.NET Core is an open source, cross-platform web framework trusted by enterprise companies worldwide because of its security and performance. And most importantly, you have learned that ASP.NET Core is a battle-tested web framework that gives you peace of mind with different business logic scenarios in the future.

Vue.js, on the other hand, is open source, easy to use and learn, easy to integrate, has excellent documentation, is fast, small, performant, stable, and well suited for any web application. You will never go wrong with Vue.js 3 if you pick it for your applications, be they small or large.

In the next chapter, you will learn the necessary software to install on your computer and set up the development environment in a step-by-step process.