Q&A

How to Build Fast and Reusable Blazor Code with Microsoft's Jeffrey T. Fritz

• By David Ramel
• 04/03/2023

Building reusable components with Microsoft's full-stack web-dev framework, Blazor, relieves the drudgery of writing the same code over and over again.

Reusable components in Blazor -- which allows for web development in C# instead of JavaScript -- can help developers make their projects simpler and their code processes more productive.

Microsoft even offers a Build reusable components with Blazor learning module that shows how to build a Razor class library that contains Blazor components, package a Razor class library for use in other Blazor applications, and reference a Razor class library in a Blazor application and use its components.

For even more detail, however, coders can't do much better than the full stack web development track at the big, five-day Visual Studio Live! developer conference taking place next month in Nashville.

There, attendees can pick and choose from many Blazor-focused presentations ranging from 20-minute "fast focus" events to full-day hands-on labs, including:

• Introduction to Blazor
• Building Enterprise Blazor Apps Using CSLA.NET
• Microsoft Blazor Top to Bottom
• Build Your First Application with Blazor
• Building Fast and Reusable Code with Blazor

For the latter, we caught up with Microsoft's Jeffrey T. Fritz from the .NET team to find out more about the subject of his Building Fast and Reusable Code with Blazor presentation, a 75-minute event scheduled for 3 p.m. on Tuesday, May 16.

VisualStudioMagazine: How can reusable components in Blazor help make projects simpler and code processes more productive?
Fritz: The Blazor user-interface framework is now available on the web and .NET MAUI frameworks, and these components give you that block of user-interface code that can be easily reused with no additional coding between every platform. That means a lot less re-writing, copying and pasting, and a lot more guarantee that you're going to have a consistent look and feel across your systems.

What are some of the most often-used reusable components, or ones you find most useful?
The .NET Component vendors are quickly ramping up their product offerings, with some really extensive control sets available from folks like DevExpress, Progress, SyncFusion and more. I've been using the Progress components with an application that I've been building on my live Twitch streams and have been quite successful at extending and formatting them to meet my needs. There are open source component libraries available as well, and I would recommend the MudBlazor components to folks looking for a free option.

What are some techniques that developers can use to create reusable components that can be widely used without too much specific customization needed for different use cases?

"Start by moving that block of HTML and Razor that you keep writing into its own file with a '.razor' extension."

Jeffrey T. Fritz, Program Manager, Microsoft

Start by moving that block of HTML and Razor that you keep writing into its own file with a ".razor" extension. Replace the locations you were using that HTML and Razor with a call to your new component. That's all you need to start. You can get fancier by introducing parameters and isolated stylesheets later.

How can reusable Blazor components improve unit testing?
When you're writing unit tests for Blazor, you want to test the smallest units of user-interface possible and these components make it easier to isolate potential complexities by reducing the noise around your pages for the isolated feature that you actually need to test.

Is your .NET team at Microsoft eating its own Blazor reusable components dog food?
We are! We have a handful of web sites that we maintain for the .NET live video streams and events that use Blazor and re-use components to shorten our development and maintenance tasks.

With AI transforming software development, can tools like GitHub Copilot be put to use in creating reusable Blazor components?
It is amazing to me how quickly I can now build and re-use components when Copilot is able to generate markup quickly for me or help put C# code into my components that delivers exactly what I need without me wasting keystrokes. Copilot is a great tool for all .NET developers in Visual Studio and Visual Studio Code.