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


  • AI for GitHub Collaboration? Maybe Not So Much

    No doubt GitHub Copilot has been a boon for developers, but AI might not be the best tool for collaboration, according to developers weighing in on a recent social media post from the GitHub team.

  • Visual Studio 2022 Getting VS Code 'Command Palette' Equivalent

    As any Visual Studio Code user knows, the editor's command palette is a powerful tool for getting things done quickly, without having to navigate through menus and dialogs. Now, we learn how an equivalent is coming for Microsoft's flagship Visual Studio IDE, invoked by the same familiar Ctrl+Shift+P keyboard shortcut.

  • .NET 9 Preview 3: 'I've Been Waiting 9 Years for This API!'

    Microsoft's third preview of .NET 9 sees a lot of minor tweaks and fixes with no earth-shaking new functionality, but little things can be important to individual developers.

  • Data Anomaly Detection Using a Neural Autoencoder with C#

    Dr. James McCaffrey of Microsoft Research tackles the process of examining a set of source data to find data items that are different in some way from the majority of the source items.

  • What's New for Python, Java in Visual Studio Code

    Microsoft announced March 2024 updates to its Python and Java extensions for Visual Studio Code, the open source-based, cross-platform code editor that has repeatedly been named the No. 1 tool in major development surveys.

Subscribe on YouTube