The FAST and the Fluent: A Blazor story

Artikel uit SDN Magazine 148

Het lijkt bijna een titel van een film uit de populaire reeks maar dat is het natuurlijk niet. Wel hebben we ook hier een aantal interessante hoofdrolspelers. En die verdienen allemaal een nadere introductie. Zoals ze dat in films altijd doen, in volgorde van opkomst:

FAST

Simpel gezegd is FAST is een collectie van technologieën gebouwd op Web Componenten en Web Standaarden. Binnen Microsoft wordt aan FAST gebouwd door een team van UX-ingenieurs en ontwerpers die UX-uitdagingen willen oplossen met behulp van standaard web technologieën.
FAST is niet één van de vele typische front-end frameworks zoals React, Angular of Vue. In plaats van zich te concentreren op een “SPA-framework dat alles kan”, streeft FAST ernaar de creatie van web componenten mogelijk èn eenvoudiger te maken. Een gevolg hiervan is dat webcomponenten gebouwd met FAST samen kunnen worden gebruikt met vrijwel ieder front-end framework.

Web componenten?

Web componenten (of “Web Components”) is een overkoepelende term die verwijst naar een verzameling web standaarden die gericht is op de creatie van aangepaste HTML-elementen. Enkele van de standaarden die onder deze paraplu vallen, zijn:

• de mogelijkheid om nieuwe HTML-tags te definiëren,
• inhaken in een standaard component levenscyclus,
• gebruik maken van HTML-rendering,
• CSS encapsulatie en parameterisatie,
• componenten skinnen/thema’s toepassen

Elk van deze functionaliteiten is vastgelegd en gestandaardiseerd door het W3C en wordt door iedere moderne browser ondersteund.

FAST heeft dus geen eigen componentmodel gebouwd maar maakt gebruik van de genoemde W3C Web Component-standaarden. Hierdoor is mogelijk om met FAST gebouwde componenten op dezelfde manier te laten functioneren als ingebouwde, normale HTML-elementen. Het is niet noodzakelijk om een framework te gebruiken om met FAST-componenten te werken maar het kan wel. Door ze te combineren met het gewenste framework of de gewenste bibliotheek zal dat ook bijna altijd eenvoudiger zijn.

Sinds begin 2020 is een brede adoptie van webcomponenten te zien. Niet alleen door Microsoft wordt flink geïnvesteerd in de technologie maar ook Google, Adobe, Salesforce, SAP, MIT, SpaceX, en vele anderen volgden al.

Fluent

Fluent is het designsysteem dat Microsoft gebruikt voor al haar moderne applicaties, zowel voor het web als voor Windows 11. De oorsprong van Fluent is te vinden in Modern UI (ook wel bekend als “Metro”), het designsysteem dat werd gebruikt voor de Zune muziekspeler en Windows Phone toestellen. Het systeem bevat richtlijnen voor de ontwerpen en interacties die worden gebruikt binnen software De basis wordt gevormd door vijf belangrijke componenten: licht, diepte, beweging, materiaal en schaal. Recentelijk is de nieuwste versie, Fluent 2, verschenen. Zie voor meer informatie https://fluent2.microsoft.design/.

De Fluent UI Web Components

Het FAST team heeft met de door hen ontworpen bouwstenen een uitwerking van het Fluent design systeem gerealiseerd. Dit zijn de Fluent UI Web Components. Zoals hierboven beschreven zijn deze componenten framework agnostisch en kunnen ze in iedere moderne browser worden gebruikt. Om ieders leven wat makkelijker te maken wordt er uiteraard bijna altijd wel gebruik gemaakt van een front-end framework. Een van die frameworks is Microsoft’s Blazor

Blazor

Blazor is een framework voor het bouwen van interactieve web-applicaties met .NET. Ontwikkelaars bouwen interactieve UI’s met behulp van C# in plaats van met JavaScript. Code kan zowel client-side als server-side worden uitgevoerd en via MAUI zelfs (native) draaien op iOS, Android en Tizen devices.

Het client-side draaien van .NET code wordt mogelijk gemaakt door deze code om te zetten naar het WebAssembly (WASM) formaat.  Ook WASM is een breed omarmde standaard en wordt ondersteund door alle moderne browsers.

Wanneer Blazor server-side wordt uitgevoerd, wordt een SignalR connectie opgezet waarover de benodigde interface updates worden verstuurd. Doordat alleen de verschillen tussen oude ene nieuwe situatie worden verzonden, zijn de berichten vrij klein. Een moderne server kan al gauw tussen de 5- a 10-duizend connecties ondersteunen.

Blazor is een op componenten gebaseerd framework. Ieder component kan afzonderlijk functioneren maar door ze in een hiërarchie te plaatsen is het ook mogelijk om componenten met elkaar te laten communiceren. Wat uiteindelijk op het scherm wordt gerendered is ook weer gewoon standaard HTML, CSS (en soms een beetje JavaScript). Het combineren van Blazor en web components is dan ook zeker mogelijk.

Het script: hoe kunnen we ze samen laten acteren?

Het combineren van de (op FAST gebaseerde) Fluent UI Web Components met Blazor is precies datgene wat Microsoft heeft gedaan in de Fluent UI Blazor library.  In eerste instantie werd deze bibliotheek uitgebracht door het FAST team. Het doel daarbij was om alle Fluent UI Web Componenten te voorzien van een Blazor ‘wrapper’. Dat doel werd gerealiseerd eind 2021. Ongeveer gelijktijdig met .NET 6.0 is de eerste versie, met zo’n 40 verschillende componenten, uitgebracht. Een demo en documentatie site met voorbeelden hoe alle componenten te gebruiken is te vinden op https://www.fluentui-blazor.net.

Ik ben ruim voor de eerste release betrokken geraakt bij het ontwikkelen van de bibliotheek. Dit gebeurde nadat ik eerder maintainer was geworden van de BlazorFluentUI bibliotheek. (Het verschil tussen beide is dat BlazorFluentUI nastreefde om een directe port te maken van de Fluent UI React componenten.) Met het geringe aantal ontwikkelaars dat hielp om de bibliotheek te onderhouden, bleek het echter onmogelijk om alle veranderingen in de React collectie bij te benen. Toen ik hoorde van Microsoft’s eigen Blazor versie van de Fluent componenten heb ik mijn kennis en ervaring, opgedaan met het BlazorFluentUI werk, aangeboden en uiteindelijk ben ik ook hier maintainer geworden. Samen met één andere Microsoft collega zetten we de lijnen uit en bouwen we verder. We krijgen hierbij hulp van een kleine groep van contributors. Meer hulp is welkom!

Inmiddels kan de bibliotheek als vrij succesvol worden omschreven. De teller staat, op het moment van schrijven van dit artikel, op zo’n 525-duizend downloads van de NuGet package. Een veelgehoorde vraag is of de bibliotheek meer componenten kan leveren. Met name componenten die het nog makkelijker maken om een applicatie te bouwen volgens het Fluent design system.Het originele doel van de bibliotheek (het wrappen van de Web Components) vasthouden, maakt uitbreiden lastig. Het team van maintainers heeft daarom besloten (in overleg met de Microsoft FAST en ASP.NET Core Blazor teams) om de bibliotheek los te maken van het FAST team. Uiteraard blijven we nauw met het FAST team samenwerken. Sterker nog, we zijn al begonnen met het testen van de volgende versie van de Web Componenten (welk zijn gebaseerd op Fluent 2). Inmiddels zijn we hard aan het werk om de volgende versie (v3) van de bibliotheek te bouwen. Het aantal Blazor componenten zal daarbij richting de 60 gaan. Een flinke vooruitgang dus. Een release zal waarschijnlijk na de zomerperiode plaatsvinden. Via NuGet kan een preview van de versie worden verkregen.

Een voorbeeld

Hieronder een voorbeeld (vanuit de demosite van de volgende versie) waarbij een samenspel van een aantal component wordt gebruikt om een layout van een applicatie te realiseren:

En de bijbehorende broncode:
<FluentSwitch Style=”width: 150px;” @bind-Value=”ShowHeader”>
Header
</FluentSwitch>
<FluentSwitch Style=”width: 150px;” @bind-Value=”ShowNavMenu”>
NavMenu
</FluentSwitch>
<FluentSwitch Style=”width: 150px;” @bind-Value=”ShowBodyContent”>
BodyContent
</FluentSwitch>
<FluentSwitch Style=”width: 150px;” @bind-Value=”ShowFooter”>
Footer
</FluentSwitch>

<FluentLayout Style=”margin-top: 10px;”>
@if (ShowHeader) {
<FluentHeader>
Some Header Text
<FluentSpacer />
Aligned to the end
</FluentHeader>
}

<FluentStack Orientation=”Orientation.Horizontal” Width=”100%”>
@if (ShowNavMenu) {
<FluentNavMenu Width=”150″>
<FluentNavMenuLink Icon=”@(new Icons.Regular.Size24.Home())” Text=”Item 1″ />
<FluentNavMenuLink Icon=”@(new Icons.Regular.Size24.Cloud())” Text=”Item 2″ />   <FluentNavMenuGroup Text=”Item 3″>
<FluentNavMenuLink Icon=”@(new Icons.Regular.Size24.LeafOne())” Text=”Item 3.1″ />
<FluentNavMenuLink Icon=”@(new Icons.Regular.Size24.LeafTwo())” Text=”Item 3.2″ />
</FluentNavMenuGroup>
<FluentNavMenuLink Icon=”@(new Icons.Regular.Size24.CalendarAgenda())” Text=”Item 4″ Disabled=”true” />
</FluentNavMenu>
}
@if (ShowBodyContent) {
<FluentBodyContent>
…Hier de content…
</FluentBodyContent>
}
</FluentStack>

@if (ShowFooter) {
<FluentFooter Style=”@(“height: 40px; color: white; text-align: center;”)”>
Footer Text
</FluentFooter>
}
</FluentLayout>

@code {
bool ShowHeader = true;
bool ShowNavMenu = true;
bool ShowBodyContent = true;
bool ShowFooter = true;
}

Het begin van een nieuwe serie?

Net als in de filmindustrie, zijn ook wij dol op vervolgen. We hebben dan ook al een aantal veranderingen op het oog voor de volgende, volgende versie (v4). Natuurlijk horen we ook graag van onze gebruikers wat zij toegevoegd en/of aangepast zouden willen zien. Discussieer met ons mee in onze GitHub repository (http://github.com/microsoft/fluentui-blazor).

To be continued…