Best Practices with Web User Interfaces

When creating a user interface (UI) with ASP.NET 8, it can be intimidating since most developers are so used to working with C#. There are a lot of factors to consider when creating a web application, such as avoiding duplication, recognizing similar interfaces for reusable components, creating a structured website, and making it easier for search engines to index the site—a process known as search engine optimization (SEO).

In this chapter, we’re going to cover the following main topics:

• Using a task runner
• Applying standards to UIs
• Introducing Buck’s coffee shop project

In the first section, we’ll examine why a task runner is so important to developers, how to set it up and run it automatically, and how to bundle and minify scripts. Then, in the next section, we’ll review a number of common standards with ASP.NET 8 sites, including centralizing links, keeping controllers and Razor...

Technical requirements

Even with a simple web UI, the Visual Studio family of products creates an easy way to build web applications using IntelliSense. We recommend using your favorite editor to view the GitHub repository. We recommend the following:

• Visual Studio (latest version)
• Visual Studio Code
• JetBrains Rider

The editor we’ll be using is Visual Studio 2022 Enterprise, but any version (Community or Professional) will work with the code.

The code for Chapter 6 is located in Packt Publishing’s GitHub repository, found at https://github.com/PacktPublishing/ASP.NET-Core-8-Best-Practices.

Using a task runner

In this section, we’ll explain what a task runner is, what its responsibilities are, how to automatically execute it when building the solution, and provide some examples of how to use it.

As developers, we are always looking for better ways to quickly automate tasks. With JavaScript frameworks, this task is essential, especially when building the solution in a Continuous Integration/Continuous Delivery (CI/CD) pipeline. The consistent repetition of certain tasks becomes monotonous and takes away from development time. Why not have a computer process the work?

As developers, the need to include a task runner section in this chapter is meant to show developers how to automate tasks to make client-side endeavors more efficient. In recent years, I’ve experienced developers who’ve never used a task runner for client-side tasks or even know what it is. A task runner is a tremendous benefit to all developers.

What is a task runner?

As...

Applying standards to UIs

ASP.NET’s web page model has evolved over the years. With Web Forms, it was ViewState and components. With MVC, it had partials and HTML Helpers. Now, ASP.NET 8 provides more advanced techniques using ViewComponent classes and TagHelper classes.

For this section, we’ll examine how ASP.NET 8 uses its language-specific features to build quicker and more flexible UIs. We’ll see how to consolidate links across a site, why it’s important to keep controllers/pages small, how ViewComponent classes are better than partials and HTMLHelper classes, and look at how to create SEO-friendly routes.

Centralizing your site links

If we have a large site with hundreds of links, developers understand what it means when a page is renamed, moved, or (gasp) deleted. It’s definitely a time-consuming effort to change every link on a large site. While TagHelper classes are…well, helpful, one common practice is to use UrlHelper classes...

Introducing Buck’s coffee shop project

We covered a lot in the last section, with various concepts explained. It’s one thing to explain ViewComponent and TagHelper classes, but where do we apply these concepts on a website?

In this section, we’ll apply those concepts to a brand-new project. Our friend wanted a new website for his coffee shop, so we used the ASP.NET 8 Web Application template as a starting point for the site.

Setting up Buck’s website

Since we have a new website, we want to create the client-side pipeline so that we can focus on the site’s functionality.

This sounds like a job for…the Task Runner.

While we’ve included the transpiling of TypeScript and bundling/minifying JavaScript in the project, we can add additional tasks to make our lives even easier.

One easy task is to bundle and minify our styles using SASS, as follows:

1. In the Package Manager Console, type npm install --save-dev sass gulp...

Summary

In this chapter, we began with how important a task runner is for client-side tasks and how to set up a task runner, then understood the structure of a gulpfile and how to create a workflow structure. Once we had our task runner working, we put it to work by focusing on transpiling TypeScript into JavaScript and bundling and minifying it into something for a production website.

We proceeded with looking at what’s considered a standard in the industry when it comes to UIs in ASP.NET 8. We learned about how to save time by centralizing all links in one place, why it’s important to keep controllers and Razor Pages small, and the key reasons why ViewComponent classes should be used. We learned why TagHelper classes are better than HTMLHelper classes and why a site should use SEO-friendly URLs.

To finalize this chapter, we looked at an example website and had a task runner bundle and minify our styles along with updating libraries automatically on build. We also...