Q&A

Integrating Blazor with Existing .NET Web Apps

• By David Ramel
• 08/08/2024

Blazor shook up the .NET-centric web-dev space several years ago with its new ability to create web apps using C# and .NET instead of primarily coding UI with JavaScript like most every other framework, and it has been steadily advancing every since.

Since its debut, Blazor has evolved to support a variety of workloads, coming out with tooling for Blazor Hybrid, enabling cross-platform mobile and desktop applications, and the former "Blazor United" (now known as Blazor Fullstack Web UI), which combines server-side and client-side rendering for optimal performance and flexibility. It also supports Progressive Web Apps (PWAs), mobile bindings, and desktop applications through the .NET MAUI platform, making it a versatile tool for modern web development.

One of its advancements is support of ASP.NET's intuitive RazorComponent model that boosts productivity. But RazorComponents aren't just for Blazor apps and can help integrate the best part of Blazor with existing ASP.NET applications using Razor Pages, MVC and even other front-end technologies.

To help developers sort out the current state of Blazor and what can be done with it, Ed Charbeneau, a Microsoft MVP and Senior Developer Advocate at Progress, will present a session at the November Live! 360 developer conference in Orlando titled "Integrating Blazor with Existing .NET Web Apps." The 75-minute introductory-level session is scheduled for Wednesday, Nov. 20, 2024, and in it attendees are promised to learn:

• Where does Blazor fit in the ASP.NET ecosystem
• How to integrate MVC/Pages with Blazor
• How to migrate WebForms to Blazor

We caught up with the busy Charbeneau, a well-known international speaker, writer and online influencer, to ask him a few questions about his upcoming session.

VisualStudioMagazine: What inspired you to present a session on this topic?
Charbeneau: The session was inspired by a conversation I had with Daniel Roth, the ASP.NET Program Manager who oversees Blazor's development. I spoke with Daniel about the .NET 8 release in November 2023. During our conversation I had asked what feature or aspect of the .NET 8 release he felt was important, but did not get enough promotion. With all of the new features in .NET 8, Daniel felt that the simplicity of including Blazor in existing ASP.NET Core applications was overshadowed by new features like Static Server Rendering.

What are the primary challenges developers face when integrating Blazor with existing applications?
Developers with existing ASP.NET applications will likely find it difficult knowing where to begin integrating Blazor into their application. There are many variables to consider when adopting Blazor into an existing codebase with the most important factor being the current .NET framework version.

Depending which version of .NET the current codebase uses, adding Blazor directly may be the best option, while older versions may require a more indirect approach that involves wrapping Blazor functionality in web components. Whether the choice is direct or indirect, both approaches are supported natively in the Blazor framework. The next step would be to find the right documentation and samples for implementing Blazor with the desired approach.

How does Blazor compare to other frameworks in terms of performance and ease of integration?
Steve Sanderson, the lead developer of Blazor, is quite knowledgeable of the web and the history of web frameworks up to current day. This is apparent when you look at the features Blazor offers as it implements current trends like mixing server and client rendering (like Next.js) and traditional concepts like progressive enhancement. Blazor has comparable features to modern frameworks (Angular, React and Vue) while embracing the .NET developer ecosystem. In addition, Blazor is capable of interoperating with JavaScript and integrating with other frameworks via web component wrappers.

Can you briefly explain the differences between Blazor Server and Blazor WebAssembly, and when to use each?
Blazor has three modes of operation, Static Server Rendering (Static SSR), Interactive WebAssembly, and Interactive Server. Static SSR renders static HTML on the server using ASP.NET Razor Components. As the name implies, static SSR does not offer any interactivity and relies on web standard form POSTs. Interactive SSR using Blazor Server utilizes a SignalR connection to communicate events and updates between the server and web browser. Interactive WebAssembly uses Blazor WebAssembly to render components in the client. Application logic is executed by the .NET WebAssembly runtime. With .NET 8 we no longer have to choose between Blazor Server and Blazor WebAssembly. Today we can choose the Auto Render mode and use both together in the same application. These options allow developers to dial-in the functionality for their app depending on what their use case is. Server interactivity offers better performance and start time, while WebAssembly reduces server cost.

What is just one advanced feature or functionality of Blazor that developers should be aware of?
One of Blazor's greatest strengths is the component architecture. Components are easy to learn, but once you're an expert you'll be able to work through the most difficult UI scenario. Advanced UI's that require real-time data, large virtualized datasets, or complex state management are within reach if you have a comprehensive knowledge of the component model.

How do you see the role of Blazor evolving in the broader .NET ecosystem over the next few years?
With ASP.NET WebForms in "maintenance mode," Blazor is the choice for web development going forward. However, Blazor shouldn't be mistaken for "just a web framework" as it is capable of so much more. Blazor is a versatile framework that can be utilized to develop Progressive Web Apps (PWAs), as well as desktop and mobile applications with Blazor Hybrid. It is even possible to deploy Blazor applications to Meta's Horizon OS, enabling apps to run in Mixed Reality.

How can developers stay updated with the latest best practices and community resources for Blazor?
Developers who want to stay up to date on Blazor news and best practices should check the weekly posts by authors throughout the .NET community on various Blazor topics at Telerik.com/Blogs. In addition, there are great live streams from industry experts found at: .NET Community Standups | .NET Live TV (microsoft.com), csharpfritz - Twitch, and CodeItLive - Twitch.

Note: Those wishing to attend the conference can save hundreds of dollars by registering early, according to the event's pricing page. "Save $500 when you Register by Aug. 16!" said the organizer of the event, which is presented by the parent company of Visual Studio Magazine.