What's next: the Fluent UI Blazor library v5

Published Dec 19, 2024

Web Components v3

As you might know, our current Fluent UI Blazor library v4 uses and wraps the Fluent UI Web Components v2 release for a lot of the Blazor components. The team developing the Fluent UI Web Components is now hard at work on creating the v3 version of the Fluent UI Web Components. Beta versions of v3 are available and an RC is expected soon. Because of that work, there are no updates coming anymore for v2.

A lot of changes are being made to property and attribute names, enumeration values, etc., to align with the Fluent UI Web Components more closely with the Fluent UI React v9 and vNext components.

Feature parity

The number of Web Components available with v3 will be less than what we have now with v2. It is expected that incremental releases adding new components will become available after the first 'GA' release of v3.

Recap

If you are new to all of this, here is a short recap of what the Fluent UI Web Components are:

Microsoft's Fluent UI Web Components is designed to help you build web apps using Web Components styled with the Fluent design language.

Each component is designed to adhere to the following standards:

Customizable: Fluent-styled components by default, but easy to integrate your own brand and theme
Performance: Optimized for performance
Bundle size: Refactored and slimmed down components that allow you to include the packages and dependencies you need
Interoperability: Works with any modern JavaScript framework
Accessibility: WCAG 2.1 compliant and tested by trusted testers
Design to Code: Stay up to date with Fluent Design Language changes via Design Tokens

What are Web Components?

"Web Components" is an umbrella term that refers to a collection of web standards focused on enabling the creation of custom HTML elements. Some of the standards that are under the umbrella include the ability to define new HTML tags, plug into a standard component lifecycle, encapsulate HTML rendering and CSS, parameterize CSS, skin components, and more. Each of these platform features is defined by the W3C and has shipped in every major browser today.

How does Fluent UI Web Components leverage Web Components?

Fluent UI Web Components is built directly on the W3C Web Component standards, and does not create its own component model. This allows our components to function the same as built-in, native HTML elements. You do not need a framework to use Fluent UI components but you can use them in combination with any framework or library of your choice. Here we are focusing on the Fluent UI Blazor library.

Fluent UI Blazor Library v4

This is the version we currently have and support*. It is not tied to the .NET 8 release and support policy officially, but we aim to follow that. This means v4 will stay supported until November 2026. It does not mean we will keep adding new functionality to that version until Nov 2026 as well.

Once our next major version (v5) reaches a level of maturity where we are confident it can be used as a replacement for v4, the latter will enter a phase of being 'on life support'. New releases will be made available soon after .NET 8 patches are released. But bug fixing will be minimal and no new functionality will be added in that period. Just to re-iterate the current situation:

*This is a pure open-soure project. The library is not an official part of ASP.NET Core. This means the packages are not officially supported and we are not committed to shipping updates as part of any official .NET updates. It is built and maintained by Microsoft employees (and external contributors) and offers support, like most other open-source projects, on a best effort base through the GitHub repository only. No support is offered through any of Microsoft's official support channels.

Fluent UI Blazor Library v5

For our next major version, v5, we are using the new v3 Fluent UI Web Components. We have started work on this already and progress can be followed in the dev-v5 branch in our repo. We are trying to see if we can make preview packages available as well.

With the big changes made on the Web Components side for the v3 release, a lot of changes are necessary on our side as well. This implies the will be a number of breaking changes when you want to move your v4 based code to v5. Where possible, we are aiming to provide helpers and/or utility methods to make incorporating those changes in your code base easier. We are also putting a lot off effort into migration documentation.

Not a simple drop-in replacement

We want tot position v5 not as a direct replacement or upgrade from v4 in a traditional sense but rather as a new and improved version with different, better and more modern implementations, both from the Web Components as from a pure code perspective.

By making these major changes, we're also taking advantage of the experience gained, and feedback gathered from users, over the last 3.5 years. We are considerably improving performance and usability of a number of components. As an example, the FluentDialog will be simpler, more complete and will use the standard HTML <dialog> tag, offering greater scope for customization.

With the support model we have in mind, you can continue to use the library in a safe and secure way until, at least, November 2026. We don't think there is an immediate need to upgrade to the v5 version once that is released. For new projects, we do think it makes sense to use v5 from the start.

We are not waiting with releasing v5 till the Fluent UI Web Component v3 collection is on par what is available with v2. There is a very real chance that won't ever happen at all, as not all v2 components are destined to come to v3. In some cases we will provide Blazor components for things that the v3 Web Components won't provide. As an example of that, we have altered the DataGrid to not depend on Web Components anymore but use HTML table elements for rendering its UI components.

Because of the differences in the sets of Fluent UI Web Components and the changes within those components, upgrading a project that currently uses the Fluent UI Blazor library v4 will not just be a matter of installing the new package(s). We would have loved to be able to make it like that but circumstances beyond our control make that impossible unfortunately. And we certainly do not want to make promises we can't keep.

As mentioned, we think we will offer a great new version of the Fluent UI Blazor library with v5. We look forward to working together with the community to make it a success!