Is it worth it to learn SignalR

Learn Blazor: Using C # in the Browser

I've been working with them for around a decade ASP.NET and his on .NET Core based successor. This framework is not just WebForms, MVC, WebAPI, SignalR and Razor Pages, but for some time now too Blazor underlying. We have been watching the project, which was initially started by Steve Sanderson, with great interest since its inception in 2017 and recognized the enormous potential early on Angular and Co was still a big topic in web development for us.

Since we have already blazored a number of projects of different sizes and complexity, I am trying to provide additional first-hand information and leave a useful comment in addition to the article on the main topic of the magazine mentioned. If you haven't read the issue and are still interested in Blazor, JavaScript and Angular, you've come to the right place!

The marriage of Blazor and Angular

The interested reader and potential Blazor newcomers are confronted with an impressively creative proof of concept at the beginning of the magazine. Unfortunately, the author fails to mention what purpose he is pursuing with this experiment and what concrete advantages he expects from it. The reasons why me this - on so-called Glue code architecture that seems doomed to failure lies in the obvious goal of Blazor: The use of C # to create browser-enabled applications without being tied to JavaScript or the classic limitations of the HTTP protocol, which massively reduces the complexity and learning curve for C # programmers.

I would like Angular Definitely not discredit, but from that point on it simply didn't play a role in our new web projects as a server-side Blazor was ready for production. JavaScript interoperability may be of particular interest to those developers who want to use their existing front-end libraries and wrap them in a Blazor component, but this edge case applies to a small part of the .NET community. In any case, I don't want to have to install a colleague from whom we have kept our distance for a long time for good reason. When integrating Angular, one deliberately renounces the consistently strict typing of C #, Intellisense and various debugging features of Visual Studio.

Are there alternatives?

In the article mentioned, this is used to display data in a table. For this specific application, we have come to love the DataGrid component of the NuGet package, to which not only classic s such as en, but also OData services, IQueryables or completely dynamic data can be linked. This allows the page-long source code for view markup and logic to be simplified in an exemplary manner:

The advantage of this program code is that it is extraordinary Readability. If the number of lines of code increases over time, you should definitely consider moving the loading and interaction logics (of course, at best written exclusively in C #) into a separate file in order to maintain an overview in the long term. The naming convention has established itself here. As a result, the files of the ViewModels or classes are nested directly under the views in the Solution Explorer, so that the code is not unnecessarily scattered over different directories or even projects. In addition, I only have to press or enter to start the program, since the referenced NuGet package is installed automatically.

As a result, we get this beautiful table, which inherently supports sorting, filtering, pagination, responsiveness and much more:

The complete range of functions of these and other Blazor components from Radzen can be found nicely described in the official documentation. The Angular developer who has become aware of this Datagrid and still doesn't want to use a Blazor can take a look at the Angular variant. Otherwise, the Blazor components can be used both in the WebAssembly runtime and in the Server Side Blazor.

Tips and Tricks

To make the topic a little more palatable to the curious reader, I present a few features that I particularly appreciate about Blazor. Of course, attention was paid to the next issues of dotnetpro nothing to anticipate. So if you want to learn more about creating components, routing, data binding and event handling in Blazor, you should definitely take a look at the upcoming issues!

1. Host.CreateDefaultBuilder ()

This method call can be found in every fresh Blazor project, more precisely in the method of. The main tasks that are taken over here before the ASP.NET host is started are the configuration and provision of the, instances that are available in the application via the ServiceProvider.

After you have called up, for example, the settings - which were previously configured in the environment variables, appsettings.json and by User Secrets - are available. For example, if this were in our: we could easily access it in the code:

2. Blazor CSS isolation

To activate this function, you only have to reference the automatically dynamically generated stylesheet within the element:. If you strictly adhere to the naming convention when creating the files and place them in the same directory as the component file, only the relevant styles are loaded instead of in most other web frameworks. This not only significantly minimizes the CSS memory requirement, but also provides an optimal solution to the age-old problem of unmaintainable CSS. Long CSS selectors are automatically avoided without fear of conflicts.

3. Improve performance

Sooner or later, every developer will be confronted with this: The application simply does not run as efficiently as one would like. Each framework has its own unique aspects that must be taken into account for a smooth user experience. As always, it is advisable to know this in advance in order to be able to make essential architecture decisions competently. Fortunately, Microsoft has provided this detailed guide that also concisely explains some of the technical backgrounds. In addition to one or the other possibility, WASM scenarios that are already underperforming can be found here, including with or outsourcing reusable ones that can be optimized with "little" effort, as well as tips for optimal nesting of components or for virtualization, which are usually better considered in advance should.

4. DOM attributes

You can control many attributes of HTML elements wonderfully via Blazor. Noteworthy examples are and, which can be used to control the visibility and "clickability" of elements.

Conclusion

Anyone who wants to provide their team with maintainable (self-explanatory, manageable and meaningfully abstracted) program code should keep the complexity as low as possible and only introduce workarounds and glue code with good justification.

Highly recommended for every Blazor beginner is the awesome-blazor GitHub Repositiory, curated by Adrien Torris. Here you can find an instructive tutorial, the right library or the appropriate reference project for almost all related topics. Even if the term "web development" was often equated with JavaScript and Co, one should say goodbye (in Blazor) to this thought pattern. Before you want to interoperate with JavaScript yourself, it is worth researching whether someone else has already done this work on which you can build.

With that in mind ... Have fun blazing!


Wolfgang Lutz
Microsoft Certified Solution Developer
in the agile Scrum Team at K&K Software AG

Do you have any questions or are you interested in a software project with Blazor? Just give us a call - ideally now: 09382 - 31020!


Article from April 29th, 2021, updated on May 2nd, 2021