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

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.

[Click on image for larger view.] Blazor Class Library Usage (source: Microsoft).

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.

Inside the Session

What: Beyond the Basics – Building Fast and Reusable Code with Blazor

When: May 16, 3 p.m. - 4:15 p.m.

Who: Jeffrey T. Fritz, Program Manager, Microsoft

Why: Learn how to stop writing the same code over and over again.

Find out more about Visual Studio Live!, taking place May 15-19 in Nashville

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.

About the Author

David Ramel is an editor and writer for Converge360.

comments powered by Disqus


  • Devs Demand Visual Studio 2022 Ditch Old .NET Framework Dependencies

    Developers commenting on a Microsoft post about performance improvements in the upcoming .NET 8 demanded the company end Visual Studio 2022's dependency on the old .NET Framework.

  • Microsoft Remakes Azure Quantum Dev Kit with Rust, 'and It Runs in the Browser!'

    "The' tl;dr' is that we rewrote it (mostly) in Rust which compiles to WebAssembly for VS Code or the web, and to native binaries for Python."

  • GitHub Copilot Chat Beta Opens Up for Everybody

    GitHub Copilot Chat has taken another step toward general availability, as GitHub announced a beta offering previously accessible only by team/business customers is now available to individuals.

  • Tools and Libraries for Building Cloud-Ready Apps in .NET

    Creating any kind of software application is difficult enough, but in the cloud things only get harder when complexities like microservices, distributed teams and so on are thrown into the mix.

Subscribe on YouTube