Blazor FAST Web Components

Interfaces built with FAST adapt to your design system

Interfaces built with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components.

Let’s put this to the test using Blazor.

In this article you’ll find answers to the following questions:

1. What is fast in a nutshell
2. What are the pitfalls of integrating Blazor with FAST
3. Why we created Blazor.Fast (a very tiny wrapper around FAST)
4. How we abstracted away the Themes
5. How we integrated the <Input*/> | <EditForm> components
6. How you can integrate Blazor.Fast in your own project.

What is fast?

FAST tries to solve the -redundant- problem I have in every new project… creating web components. However FAST does it in a framework agnostic way. The components should behave the same whether you’re creating an Angular, React, Vue or any other framework. In this case I’m wondering how FAST can be integrated with Blazor Projects. There are already quite some components implemented as you can see using the component explorer:

FAST

Using these components is quite trivial for example the fast-button with a framework-agnostic setup.

<fast-button>Button</fast-button>

Configuration

You can easily configure the primary colors, border-radius, density, etc.… The dark or light mode is built-in and very easy to use, it’s really just a switch away.

On the website of Fast you can configure your theme as you’d like. For example I believe border-radius is overrated so I turned it to 0 but hey, that’s subjective….

Themes

Currently there are 2 themes, the FAST default theme and the Microsoft’s Fluent Design theme, the latter is quite know in the community for their React implementation and looks really nice, however it’s quite unfortunate that the styling is tightly coupled to React and JavaScript so it’s not so easy to wrap in a Blazor Component library.

Integration with Blazor

It’s quite easy to integrate the basic components like fast-button, fast-anchor and some others. But it gets tricky when you try to use the form components like InputDate, InputNumber , etc-and let’s be honest- an application or website without a descent EditForm is really basic… We’ve been spoiled by the Blazor team with our Input* components for example:<InputText/>,<InputNumber/>,<InputDate/> and some others which automagically binds datatypes and their values, so I guess we have to wrap these components to be able to use them?

Transition to BlazorFAST instead of Blazor + Fast.

First, I was quite hesitant to wrap the FAST web components because it’s against the design principles of the library (being framework agnostic). But what if we could do it in a way that:

1. Keeps the same API, without introducing a bunch of custom parameters and redundant work.
2. If you know how to use FAST in another framework, it doesn’t take a lot of time to learn how to use the Blazor wrapper.
3. The heavy lifting is done in the core FAST or Fluent library.
4. Abstracts away the theme so we can use Fluent and/or FAST by switching a JavaScript import and change the value of an Enum .
5. Makes it easier for Blazor developers to start using FAST and Fluent Web Components.

It turns out… that it can be done, that’s why we created Blazor.Fast a very tiny wrapper around Fast. You can see some examples below, the API is almost the same and very familiar for Blazor developers and FAST or Fluent library users. The only difference is that there is no prefix of fast- or fluent- since we abstracted away the theme.

FAST Button

<fast-button>Button</fast-button>

Blazor.Fast Button

<Button></Button>

FAST Menu

<fast-menu>
   <fast-menu-item>Menu item 1</fast-menu-item>
   <fast-menu-item>Menu item 2</fast-menu-item>
   <fast-menu-item>Menu item 3</fast-menu-item>
   <fast-divider></fast-divider>
   <fast-menu-item>Menu item 4</fast-menu-item>
</fast-menu>

Blazor.Fast Menu

<Menu>
   <MenuItem>Menu item 1</MenuItem>
   <MenuItem>Menu item 2</MenuItem>
   <MenuItem>Menu item 3</MenuItem>
   <Divider></Divider>
   <MenuItem>Menu item 4</MenuItem>
   <MenuItem>Menu item 5</MenuItem>
</Menu>

Fast TextField

<fast-text-field appearance="filled"></fast-text-field>

Blazor.Fast TextField inside a Form

The EditModel

public class MyFormModel
{
   public string Text { get; set; }
}

The Form

<EditForm Model="model" OnValidSubmit="HandleValidSubmit">
   <TextField @bind-Value="model.Text"> </TextField>
</EditForm>

Or a more realistic example with validation of multiple datatypes:

How is this possible?

Actually it’s pretty simple due to the flexibility of both the Blazor framework and the FAST library, it took about 2 days to wrap almost all the components from the FAST library and create some examples and documentation around it. Basically we created a ThemeProvider which serves as a CascandingParameter to all the components and use it as the highest-level component which takes care of the “Theme agnostic side of things”.

For the EditFormcomponents or <Input*/> components we inherit from the <InputBase<T>> and override the BuilderRenderTree(RenderTreeBuilder b) to have some more control, but the heavy lifting is still done in the core framework and the FAST or Fluent API didn’t change.

Getting Started

1. Create a new Blazor application

dotnet new blazorwasm -o WebApplication

2. Install the Nuget package

Install-Package Append.Blazor.Fast

3. Add the Javascript file to the _host.cshtml(server-side) or index.html(client-side) page below the Blazor framework script.

// Provided by default
<script src="_framework/blazor.webassembly.js"></script>
// FAST
<script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>
// Fluent (optional)
<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>

4. Add the required namespaces in the _imports.razor file

@using Append.Blazor.Fast.Components
@using Append.Blazor.Fast.Core

5. Adjust the App.razorfile to the following, to provide a highest level ThemeProvider.

6. Use a component on the index.razor page

<Button appearance="accent">Click Me</Button>

To see all the components in action you can visit the documentation site

Blazor Fast

We ❤ open source so the source code can be found on Github

Append-IT/Blazor.Fast