Web-Apps mit Fluent UI Web

Mit der Entscheidung, das Frontend-Framework Office UI Fabric [1] für die Programmierung von Weboberflächen zu entwickeln, schuf Microsoft die Basis für Fluent UI Web [2]. Anfangs waren die damit verfügbaren Komponenten auf die Microsoft-eigenen Designprinzipien abgestimmt und primär auf SharePoint und Office ausgerichtet. Die mit Office UI Fabric programmierten Anwendungen sorgten innerhalb der Microsoft-Welt für ein einheitliches Erscheinungsbild. Daraus resultierte für Endbenutzer eine durchdachte und ausgefeilte Benutzererfahrung. Diese findet sich inzwischen auch im eigenen Design-System Fluent 2 [3], in Windows 11 und in den darauf aufbauenden Microsoft-Produkten wieder.

Webkomponenten bieten Vorteile für die Programmierung von Web-Apps

Aus Sicht der Softwaretechnik tragen Web Components über ein standardisiertes Komponentenmodell zur Modularisierung, zu Information Hiding (Datenkapselung) und zu Interoperabilität bei. Aufgrund dieser Eigenschaften programmiert ein Entwickler völlig unabhängig von einem Framework modular und komponentenbasiert. Modularität erleichtert die Wartung und Weiterentwicklung einer Anwendung. Die mit Webkomponenten verbundene Interoperabilität stellt sicher, dass diese gut zusammenarbeiten, Daten effizient austauschen und sie dem Benutzer zur Verfügung stellen. Dabei erfordert diese inhärente Zusammenarbeit der Komponenten keine besonderen internen Anpassungen.Somit unterstützen Web Components grundsätzlich die Wiederverwendbarkeit. Eine Webkomponente basiert auf folgenden vier Spezifikationen, um die oben genannten ­Ziele zu gewährleisten: Custom Elements, Shadow DOM, ECMA­Script/ES Modules und HTML Templates. Custom Elements stellen APIs bereit, um neue HTML-Elemente zu definieren. Primär erfolgt die Deklaration eines Custom Elements als eigenes HTML-Element, das zunächst dem Webbrowser un­bekannt ist. Um dem Browser das noch unbekannte Element bekannt zu geben, registriert der Programmierer dieses per Java­Script in der CustomElementRegistry über das Shadow DOM/Tree. Letzteres dient als Konstrukt im Webbrowser, um DOM-Elemente über ein eigenes API zu rendern, ohne diese direkt in den Dokumentenbaum des DOM einzufügen (Bild 1). Für die Bereitstellung und das Management des Codes der Webkomponenten als modulare Blöcke kommen ECMA­Script/ES Modules zum Einsatz.

Die Bereitstellung von HTML Templates ermöglicht eine Wiederverwendbarkeit in HTML. Es entstehen wiederverwendbare HTML-Fragmente, die unter anderem beim Rendern der Custom Elements benutzt werden. Ein HTML Template stellt ein HTML-Element dar, das nicht sofort gerendert, sondern als Quellcode in einer Datei vorgehalten wird. Dieser Quellcode wird zur Laufzeit per JavaScript dynamisch an der gewünschten Stelle eingesetzt. Der Name HTML Template sollte allerdings nicht den Eindruck erzeugen, dass es sich hierbei um eine browsereigene Templating-Engine handelt. Vielmehr tragen HTML Templates dazu bei, den Inhalt einer Web Component deklarativ zu definieren und diese innerhalb der Browser-Engine sehr effizient und performant zu rendern.

Fluent UI Web – eine Sammlung von Tools und Komponentenbibliotheken

Anfangs realisierte Microsoft Office UI Fabric mit React-Komponenten – daher erhielt das Frontend-Framework ursprünglich den Namen Office UI Fabric React. In Anlehnung an diese Office-Edition entstand bei Microsoft eine weitere React-Komponenten-Bibliothek: Stardust UI für Microsoft Teams. Parallel zu diesen beiden Frameworks konzipierte Microsoft einheitliche Design-Guidelines für das Web, Fluent UI genannt, die sukzessive in den Komponenten von Office UI ­Fabric React Eingang fanden. Analog stimmte Microsoft die React-Komponenten von Stardust UI auf Fluent UI als eigenständige Komponenten-Bibliothek Fluent UI Northstar ab.Mit der Evolution von Windows entwickelte Microsoft ein eigenes Design-System mit der Bezeichnung Fluent – inzwischen ist Version 2 verfügbar. Um für Entwickler die Programmierung von React-Apps über ein Fluent-UI-Ökosystem zu vereinheitlichen, konsolidierte und verbesserte Microsoft die beiden React-Bibliotheken Office UI Fabric React und Fluent UI Northstar: Als Ergebnis entstand Fluent UI React (v8) für die Office-Welt und später Fluent UI React Components (v9) für die Microsoft-365-Welt [4] [5]. Mit dem Aufkommen neuer Technologien im Web präsentierte Microsoft ein spezielles, adaptierbares Design-System: FAST [6]. Es umfasst mit FAST Frame ein konfigurierbares Design-System basierend auf den Spezifikationen der Design Tokens Community Group (­DTCG) des W3C [7].Alle Design Tokens hat das FAST-Team in einer eigenen NPM-Library @microsoft/fast-foundation – einem Baukasten für Design-Systeme und Webkomponenten – realisiert. Mit den über diese Library verfügbaren APIs passt ein Programmierer oder Designer das Design-System FAST Frame an seine Vorstellungen für ein eigenes Design-System an. Entsprechend dieser Vorgehensweise hat das FAST-Team bei Microsoft mit den in FAST enthaltenen Bausteinen als weitere Library mit Webkomponenten @microsoft/fast-components implementiert. Zusätzlich stellt Microsoft auch das eigene Design-System Fluent über FAST und eine Bibliothek mit Fluent-Webkomponenten (gemäß W3C) für die Programmierung von Web-Apps bereit: @fluentui/web-components.

Infrastruktur für Web-Apps mit Fluent UI Web Components einrichten

Die Programmierung mit Fluent UI Web Components [8] erfolgt mit den Sprachen JavaScript/TypeScript [9] und HTML/CSS. Eine derartige Web-App kommt über die JavaScript-Laufzeitumgebung Node.js [10] zusammen mit dem Webserver zur Ausführung. In der Regel ist in einem Projekt für diese Laufzeitumgebung eine ganz bestimmte Version von Node.js erforderlich. Daher befinden sich auf einem Entwicklungssystem häufig verschiedene Versionen von Node.js. Das gezielte Umschalten zwischen den installierten Node-Versio­nen auf eine ganz bestimmte Version erledigt ein Node Version Manager (NVM), zum Beispiel nvm [11] [12].Nach dem Einrichten einer NVM-Software installiert diese auch schnell die benötigte Version von Node.js über den Befehl nvm install <VersionsNummer>. Alle auf einem Betriebssystem installierten Versionen zeigt der Befehl nvm list an. Im Projektverzeichnis aktiviert der Befehl nvm use <VersionsNummer> die übergebene Versionsnummer; dies erfordert eine Administrationsberechtigung. Die aktuelle im Projekt verwendete Node.js-Version zeigt der Befehl nvm current an. Das Package-Management der Entwicklungsbibliotheken wie Fluent UI Web Components übernimmt NPM (Node Package Manager) oder Yarn [13]. Für Yarn ist eine projektbezogene, lokale Installation gegenüber einer globalen vorzuziehen, da Yarn dann eventuelle Konflikte mit global installierten NPM-Packages verhindert.Das Einrichten von Yarn als Package-Manager erfolgt lokal im Verzeichnis eines konkreten Entwicklungsprojekts. Eine lokale Installation von Yarn nimmt der Terminalbefehl corepack enable im aktuellen Projekt vor. Wie der Node Package Manager befindet sich die Corepack-Software ebenfalls mit im ausgelieferten Bundle von Node.js. Für die Versionsverwaltung innerhalb des Projekts greift man auf Git [14] zurück. Um der Programmierung TypeScript zugänglich zu machen, installiert der Befehl npm install -g typescript die aktuelle Type­Script-Version global auf dem Betriebssystem. Die Übersetzung von Quellcode erledigt der Com­piler von TypeScript (tsc) anhand der Vorgaben in der Konfigura­tionsdatei tsconfig.json.

Storybook-Site für Fluent UI Web Components ­zugänglich machen

Storybook als Werkzeug eignet sich für die Erkundung von Komponenten, um sie als Entwickler passend in einer eigenen App zu verwenden. Dieses Browsen einer Komponente erfolgt mittels einer vom Komponenten-Entwickler bereitgestellten Story. Dabei handelt es sich um JavaScript/TypeScript-Quellcode, der die Komponente mit ihren verschiedenen Properties und Zuständen beschreibt. Die Storybook-Software selbst läuft als Web-App im Browser – sie bereitet die ihr zugänglichen Stories der Komponenten auf und präsentiert sie einem Programmierer. Der Programmierer erkundet die Eignung der Komponente für seine eigene Web-App über diese Stories. Entscheidet sich der Programmierer für den Einsatz einer Komponente, so liefert Storybook beispielhaft auch den dazu passenden Quellcode.Die über Storybook realisierten Stories geben einen schnellen Überblick zu den verfügbaren Komponenten. Aus Sicht der Softwareentwicklung sollte jeder Programmierer Zugriff auf diesen Komponenten-Browser haben. Microsoft stellt für die in Fluent UI Web Components enthaltenen Komponenten passende Stories bereit. Auf der Homepage von Storybook [15] verweist das Microsoft-Team über einen Link auf diesen Komponenten-Browser. Der Storybook-Browser zu Fluent UI Web Components läuft in der Microsoft-Cloud als Azure-Website. Jedoch sollte ein Programmierer in einer eigenen Entwicklungsumgebung immer einen direkten Zugriff auf ein Storybook mit den aktuell verwendeten Komponenten haben.Die Einrichtung eines eigenen Komponenten-Browsers für die Storybook-Software erfolgt in mehreren Schritten: Zu Beginn erzeugt der Git-Befehl git clone https://github.com/microsoft/fluentui.git einen Klon des GitHub-Repositorys der Fluent UI Web Component Library. Danach installiert der Befehl yarn install im Verzeichnis fluentui/packages/web-components die erforderlichen NPM-Packages. Aufgrund der Projektvorgaben in der package.json-Datei starten anschließend ein clean- und ein build-Prozess. Zum Schluss führt der TypeScript-Compiler eine Übersetzung durch, der Rollup-Bundler erzeugt ein JavaScript-Bundle und das TypeScript Analysis Tool API Extractor das api.ts-File.Jetzt stehen die vom Microsoft-Team definierten Stories zur Erkundung zur Verfügung. Dazu startet der Befehl yarn start in einem Webbrowser den Komponenten-Browser (Bild 2). Der linke Fensterausschnitt im Browser gliedert sich in mehrere Bereiche: Der Getting Started-Bereich liefert einen Überblick zum Einsatz, zur Installation und zum Styling der Webkomponenten in einem Projekt. Der darunter stehende Bereich Components listet alle über Fluent UI Web Components verfügbaren Webkomponenten in alphabetischer Reihenfolge auf. Ein Klick auf einen der Einträge in der Components-Liste visualisiert die ausgewählte Komponente im rechten Fensterausschnitt. Erfolgt danach ein Klick auf die Schalt­fläche Show code, so erscheint im Browser der zugehörige Quellcode, den die Schaltfläche Copy in die Zwischenablage überträgt.

Projekt für JavaScript/TypeScript und ASP.NET Core anlegen

Seit Ende April 2023 unterstützt Visual Studio 2022 ab Ver­sion 17.5 sogenannte kombinierte Templates für den Einsatz von ASP.NET als Backend und Angular, React oder Vue im Frontend. Damit ermöglicht Microsoft eine Fullstack-Entwicklung für diese drei Frameworks. Tippt der Entwickler bei der Neuanlage eines Projekts im Eingabefeld Nach Vorlagen suchen in Visual Studio 2022 Full Stack ein, so erscheint eine Liste aller dazu passenden Templates. Für jedes Template existiert eine Version für JavaScript und eine zweite für Type­Script. Die zum Template gehörende Sprachversion zeigt Visual Studio 2022 unterhalb der Beschreibung der jeweiligen Vorlage an.Wählt der Entwickler das Template React and ASP.NET Core mit der Sprachversion TypeScript aus, so folgen einige Dialogfenster, um das Projekt zu konfigurieren. Dabei vergibt der Programmierer einen Namen wie zum Beispiel ReactApp für die Projektmappe und definiert einen Ablageorder. An­schließend legt er die Version des zu verwendenden .NET Frameworks (ab Version 8) fest und klickt die Checkboxen Für ­HTTPS konfigurieren, OpenAPI-Unterstützung aktivieren und Controller verwenden an. Visual Studio 2022 erzeugt ausgehend von diesen Festlegungen alle notwendigen Dateien im Ablageordner. Die Generierung der React-App erledigt der im Hintergrund automatisch startende init-Befehl von NPM zusammen mit dem Frontend Tooling von Vite [16]:

Das neue Projekt gliedert sich in einen Client-Teil mit der Bezeichnung reactapp.client und einen Server-Teil mit dem Namen ReactApp.Server.Der Client-Teil implementiert die vom Webbrowser ausgeführte Benutzeroberfläche. Die zugehörigen Daten stellt der über ASP.NET Core realisierte Server dem Client über den dort vorhandenen Controller zur Verfügung.Als lokaler Entwicklungsserver kommt Vite zum Einsatz; dieser enthält eine Unterstützung für SSR (Server-Side Rendering) und implementiert HMR (Hot Module Replacement). Aufgrund des HMR in Vite führt die Web-App gespeicherte Änderungen im Quellcode während des Testens sofort aus.Ein Klick in der Toolleiste von Visual Studio 2022 auf Starten bringt die Web-App im Debugging-Modus zur Ausführung. Dazu startet Visual Studio 2022 zunächst den Server-Teil ReactApp.Server und anschließend den Client-Teil react­app.client. Dies zeigt der Eintrag Startprojekt im Dialogfenster Projektmappe ”ReactApp” Eigenschaftsseiten an; in der Auswahlliste des Starten-Eintrags der Toolleiste öffnet der Menüeintrag Startprojekte konfigurieren … dieses Dialogfenster. Es erscheint der Webbrowser mit der React-App und ein zweites Browser-Fenster mit der in Visual Studio enthaltene Swagger-Integration für Tests mit den API-Endpoints.

Starterprojekt für die Entwicklung mit Fluent UI React (v9) vorbereiten

Microsoft hat in der Version 9 von ­Fluent UI React die beiden NPM-Packages @fluentui/react und @fluentui/react-northstar in einem einzelnen NPM-Package @fluentui/react-components zusammengeführt. Für die Programmierung mit Fluent UI React muss der React-App diese NPM-Library zugänglich sein. Nähere Informationen über diese NPM-Library liefert der Terminalbefehl npm view @fluentui/react-components. Er gibt die letzte freigegebene Versionsnummer, eine Kurzbeschreibung, eine Liste mit den Abhängigkeiten zu anderen NPM-Packages, die Kurznamen der Maintainer mit ihren E-Mail-Adressen sowie den offiziellen Publi­sher mit E-Mail-Adresse aus.Um diese Library in ein Starterprojekt von Visual Studio Code (VS Code) aufzunehmen, bieten sich zwei Möglichkeiten an: Bei der ersten erweitert der Entwickler die package.json-Datei um einen dependencies-Eintrag für dieses NPM-Package (Listing 1), und ein npm install-Befehl installiert es. Alternativ überträgt der Befehl npm install @fluentui/react-components dieses NPM-Package in den node_modules-Ordner des Starterprojekts und trägt dabei den erforderlichen dependencies-Eintrag in die package.json-Datei ein. Der npm install-Befehl berücksichtigt die in der package.json angegebenen Versionsnummern und eventuelle Abhängigkeiten. Abschließend identifiziert ein npm audit-Befehl potenzielle Schwachstellen oder bekannte Sicherheitslücken.

Alternativ dazu besitzt Visual Studio 2022 einen NPM-Package-Explorer: Nach Auswahl des NPM-Knotens im Projektmappen-Explorer öffnet dessen Kontextmenü Installieren neuer npm-Pakete das zugehörige Dialogfenster. Der Eintrag @fluentui/react-components in dessen Suchfeld zeigt alle passenden NPM-Packages in einer Auswahlliste an (Bild 3). Die Version 9.x entspricht dem aktuell freigegebenen Release-Stand von Microsoft, was auch der Beschreibungstext für dieses Package im rechten Fensterabschnitt ersichtlich macht. Nach dessen Auswahl führt ein Klick auf die Paket installieren-Schaltfläche eine Installation von Fluent UI React durch.

Nach erfolgreicher Installation erscheint in der Auswahlliste dieses Dialogfensters beim Paket die Anmerkung Lokal installiert. Gleichzeitig hat der Package-Manager in der package.json-Datei beim dependencies-Bereich den Eintrag @fluentui/react-components … aufgenommen. Eine zentrale Komponente der Fluent-UI-React-Komponenten stellt der FluentProvider dar: Sie führt eine eventuell globale Konfiguration durch, steuert die Barrierefreiheit und übernimmt Styling, Theming, Internationalisierung sowie Lokalisierung. Soll eine Fluent-UI-React-Komponente eine dieser Aufgaben erledigen, so bindet der Entwickler die betroffene Komponente über FluentProvider als Wrapper ein (Listing 2).

Arbeiten mit Fluent-UI-React-Komponenten in einer React-App

Generell arbeitet ein Programmierer mit einer Fluent-UI-React-Komponente wie mit jeder anderen React-Komponente. Nach erfolgter Import-Anweisung steht die Fluent-UI-React-Komponente als HTML-Element im Quellcode zur Verfügung. Der Zugriff auf eine Fluent-UI-React-Komponente erfolgt innerhalb einer spitzen Klammer über ihren Namen. So greift die Anweisung <Button …></Button>(Listing 2) auf die Button-Komponente von Fluent UI React zu. Zugriff und Initialisierung einer Fluent-UI-React-Komponente erfolgen innerhalb der ersten spitzen Klammer – dem sogenannten öffnenden Tag. Innerhalb dieses sich öffnenden Tags übergibt der Programmierer die Werte der Props an die Fluent-UI-React-Komponente.Setzt sich die gewünschte Komponente aus einer Hierarchie anderer Komponenten zusammen, so übernimmt der Programmierer diese in das erste sich öffnende Tag. Beispielsweise besteht eine RadioGroup aus mehreren Radio-Buttons; die Deklaration der zugehörigen RadioGroup erfolgt über eine mehrstufige Komponenten-Hierarchie:

Wichtige Informationen, Hilfestellungen und Ausblicke auf geplante Neuerungen liefert die Homepage der Storybook-Showcases von Fluent UI React. Diese öffnet sich durch Klick auf die gleichnamige Schaltfläche der Storybook-Infoseite zu Fluent UI React [17]. Der linke Fensterbereich der Storybooks von Fluent UI React teilt sich in unterschiedliche Bereiche ein, von denen Entwickler die folgenden kennen sollten:

• Theme Designer: Implementiert einen Fluent Theme Designer, der über einen schrittweisen Prozess die Vorgabe für ein eigenes Theming ermöglicht; dieses stellt eine Export-Schaltfläche im Quellcode oder im JSON-Format bereit.
• Components: Visualisiert in alphabetischer Reihenfolge verschiedene Beispiele der Fluent-UI-React-Komponenten und macht über die dortigen Beispiele deren Quellcode zugänglich.
• Compat Components: Die darin enthaltenen Komponenten gewährleisten Rückwärtskompatibilität mit den älteren Versionen der Fluent-UI-React-Komponenten. Diese Komponenten erlauben den Einsatz der aktuellen Fluent-UI-React-Komponenten, ohne den bisher vorhandenen Quellcode vollständig portieren zu müssen. Dies erleichtert die Migration und senkt den Aufwand, vorhandene Apps auf die aktuellste Fluent UI React Library umzustellen.
• Migration Shims: Dieser Bereich stellt Utility-Komponenten oder Funktionen zur Verfügung, um die Migration einer älteren Fluent-UI-Version auf eine andere, zum Beispiel auf die aktuellen Fluent-UI-React-Komponenten, durchzuführen. Hier erhält der Programmierer Hilfestellungen, um die Migration in kleinere Arbeitsschritte aufzuteilen und so den Aufwand zeitlich zu verteilen.
• Preview Components: Diese Komponenten befinden sich aktuell in Entwicklung bei Microsoft. Sie sollen zukünftige Weiterentwicklungen der Fluent UI React Library aufzeigen und während der noch stattfindenden Realisierung mögliche Problemfelder identifizieren. Das Microsoft-Team gibt diese Komponenten zu Testzwecken über separate NPM-Packages frei.
• Utilities: Hier findet der Programmierer Erläuterungen zur Umsetzung von ARIA-Live-Regionen für Barrierefreiheit und verschiedene Preview-Features für Focus-Management oder Motion (Animationen und Übergänge).

Theming in Fluent-UI-React-Apps deklarieren und durchführen

Mit dem zuvor beschriebenen Theme Designer erstellt der Programmierer im Bedarfsfall individuelle Themes für eine App. Das Storybook von Fluent UI React v9 [18] veranschaulicht über seinen Bereich Theme eine ganze Reihe möglicher Einstellungen. Dazu gehören unter anderem: Colors, Fonts, Motion, Shadows oder Typography. So lassen sich für die ­Typo­grafie Abstände, Farben, Schatten oder Schriftarten festlegen. Grundsätzlich repräsentiert das Fluent-UI-Theme eine Menge von Tokens (CSS-Variablen), die alle durch die Vorgabe eines bestimmten Wertes eingestellt werden. Die vordefinierten Werte für diese Tokens macht das Storybook von Fluent UI React v9 (wie zuvor erläutert) ersichtlich.Die Verwendung von Tokens im Quellcode ermöglicht eine import-Anweisung: import { tokens } from ’@fluentui/react-theme’ – davor muss dieses Package im Projekt installiert werden. Zum Zeitpunkt der Übersetzung erfolgt mittels des vom Fluent-UI-Team entwickelten Griffel-Werkzeugs ein Precompile der Stildefinitionen. Bei Griffel [19] handelt es sich um ein CSS-in-JS-Werkzeug – ausgehend von der Deklaration eines Themes mittels der Tokens erzeugt Griffel Java­Script-Objekte. Diese JavaScript-Objekte verwendet Fluent UI React für das Theming und Styling der Web-App. Diese Vorgehensweise erleichtert die Ausführung der visuellen Gestaltung in der Web-App, da Griffel das CSS-Styling für das Theming übernimmt. Bei der Umsetzung von Griffel hat sich das Microsoft-Team am Styletron-Tool, einem CSS-in-JS-Tool für React, orientiert.In Fluent UI React kommt ab Version 8 der Library für das Theming die Komponente ThemeProvider zum Einsatz. Der Programmierer stellt ein Theme anhand einer Menge von Tokens zusammen, diese Menge definiert eine eigenständige CSS-Property. Anschließend führt der Programmierer wie mit CSS üblich das Styling von Komponenten durch – dabei kommt der useTheme-Hook zum Einsatz. Der ThemeProvider erhält über die theme-Prop das benutzerdefinierte Theme übergeben (Listing 3). Ein kontextbezogenes Theme gibt der ThemeProvider an alle untergeordneten Komponenten weiter. Auch verschachtelte ThemeProvider sind möglich, um verschiedene Teile einer App unterschiedlich zu stylen.

W3C-Webkomponenten des FAST Frameworks erkunden und testen

Das FAST Framework unterstützt zwei Design-Systeme: Fluent UI und FAST Frame. Während FAST Frame ein konfigurierbares Design-System für Designer mit einer Komponenten-Library zur Programmierung von Web-Apps darstellt, basieren die über Fluent UI Web Component verfügbaren Webkomponenten auf dem Design-System Fluent UI. Jede auf FAST Frame basierende Component-Library ist Framework-unabhängig und eignet sich deshalb für die Programmierung von Web-Apps mit jedem beliebigen Framework. Ähnlich verhält es sich mit den Fluent UI Web Components @microsoft/fast-foundation, die sich auch mit Blazor, .NET, React und Vue einsetzen lassen.Grundsätzlich kann die Programmierung mit den Webkomponenten allerdings aufgrund der W3C-Spezifikation auch immer ohne Framework erfolgen.Microsoft hat für die Erkundung der FAST Component Li­brary einen Component Explorer im Web realisiert [20]. Die zugehörige Website listet die über FAST verfügbaren Webkomponenten in alphabetischer Reihenfolge im linken Fensterausschnitt auf. Im mittleren Fensterbereich zeigt der Component Explorer eine links ausgewählte Webkomponente ­unmittelbar an. Unterhalb der Webkomponente befinden sich verschiedene Registerreiter: Code, Guidance, Definition und Schema. Über Code erscheint der zur angezeigten Webkomponente passende HTML-Quellcode: Vorgenommene Änderungen (Listing 4) visualisiert der Component Explorer direkt bei der angezeigten Webkomponente (Bild 4). Guidance enthält URLs mit Verweisen auf die HTML-Implementierung und die FAST-Component-Spezifikation. Definition gibt die tag-Deklaration des HTML-Elements aus. Schema erzeugt die JSON-Deklaration der ausgewählten Webkomponente.

Im rechten Fensterausschnitt zeigt der Component Explorer für die ausgewählte FAST-Webkomponente die verfügbaren Attribute des HTML-Elements an. Legt der Programmierer über diesen rechten Fensterausschnitt Werte für die einzelnen Attribute fest, so generiert der Component Explorer beim Registerreiter Code den passenden Quellcode. Zusätzlich visualisiert der Component Explorer oberhalb dieses Code-Registerreiters die angepasste Webkomponente. Überträgt der Entwickler mit der Zwischenablage den angezeigten Quellcode in die eigene Web-App, so fallen in der Regel keine zusätzlichen Anpassungen mehr an.Ergänzend zum Component Explorer macht Microsoft über die Online-Community CodePen [21] die realisierten Fluent UI Web Components verfügbar. Mit CodePen erkundet ein Programmierer mittels Codeschnipseln (Pens) den Quellcode einer Webkomponente. Nimmt der Programmierer anhand der Funktionen des in CodePen bereitgestellten Dashboards Änderungen im Quellcode der Webkomponente vor, so visualisiert CodePen diese sofort. Das Dashboard von CodePen teilt sich in die drei Anzeigebereiche HTML, CSS und JS (TypeScript) auf. Alle drei Bereiche stehen dem Entwickler zum Editieren bereit, sodass CodePen im Unterschied zum Component Explorer auf der Ebene einer Fluent-UI-Webkomponente alle verfügbaren Anweisungen unterstützt.

Web-Apps mit Vanilla JavaScript und Fluent UI Web Components programmieren

Die Entwicklung einer Web-App mit Fluent UI Web Components setzt lediglich reines JavaScript und HTML/CSS voraus – auch Vanilla JavaScript genannt. Für den Zugriff auf Webkomponenten von Fluent UI Web innerhalb der Programmierung genügt eine Einbindung über ein Content Delivery Network (CDN) wie etwa unpkg.com. Diese übernimmt in einer HTML-Datei innerhalb des <head>-Tags die Anweisung:

Eine Programmierung unabhängig vom CDN benötigt die Installation eines Build-Systems. Dazu eignet sich besonders Vite, da dessen Tooling neben Vanilla JavaScript auch alle im Umfeld von Web-Apps häufig verwendeten Frameworks (Angular, React, Vue, Svelte) unterstützt. Der Terminalbefehl npm create vite
@latest erledigt schnell ein Scaffolding für das Projekt; danach macht folgender NPM-Befehl die Fluent UI Web Components als Library dem Projekt zugänglich:

Eine import-Anweisung gibt die gewünschte Webkomponente der Fluent UI Web Components Library der IDE bekannt. Um eine Webkomponente innerhalb der Web-App zu verwenden, muss eine Instanzierung mittels folgender Anweisung in der JavaScript-Datei vorgenommen werden:

Ein <script>-Tag mit type=”module” im HTML-Quellcode auf diese JavaScript-Datei führt den Zugriff auf die Webkomponente als HTML-Element durch. Um beim Tree-Shaking mit Bundlern keine Probleme für das Projekt zu bekommen, sollte nicht generell über allComponents registriert, sondern bedarfsorientiert mit einer sequenziellen Registrierung tatsächlich benötigter Fluent-UI-Webkomponenten gearbeitet werden; vergleiche auch den Textkasten Tree-Shaking und Minifizierung a priori testen.

Die Webkomponenten der Fluent UI Web Components Library besitzen eine vollständige Kompatibilität zu allen gängigen HTML-Elementen. Damit stehen den Webkomponenten von Fluent UI Web Components deren Attribute, Eventhandler et cetera zur Verfügung. Natürlich gilt auch die umgekehrte Richtung: Über HTML-Elemente erhält der Programmierer anhand deren JavaScript-Methoden Zugriff auf die Attribute/Properties verwendeter Webkomponenten. Um beispielsweise den eingegebenen Wert in einem Eingabefeld fluent-text-field eines HTML-Dokuments zu lesen, führt der folgende JavaScript-Code zum Ziel:

FAST besitzt ein eigenes Styling-System eingebettet in HTML/CSS

Das übliche CSS-Styling mit den beiden Ansätzen CSS- oder Inline-Styles lässt sich aufgrund der HTML/CSS-Kompatibilität auch für Fluent UI Web Components nutzen. Zusätzlich zu diesem üblichen CSS-Styling kennt Fluent UI das über FAST Frame eingeführte Konzept der Design Tokens. Dabei handelt es sich um Variablen, die eine bestimmte Eigenschaft des Design-Systems beschreiben. Dazu gehören beispielsweise Farbe, Größe, Abstände innerhalb der Benutzeroberfläche oder Eigenschaften der Typografie. Beispielsweise verweist das Design Token bodyFont auf die Schriftart. Jedes dieser über FAST Frame/Fluent eingeführte Design Tokens besitzt Methoden, um seine Werte zu lesen, zu setzen, zu ändern oder zu löschen.Es besteht auch die Möglichkeit der Deklaration eigener Design Tokens über die create-Methode aus @microsoft/fast-foundation. Als mächtiges Konstrukt steht für die Klasse DesignToken eine subscribe()-Methode zur Verfügung. Ein I­nteressent, der ein Abonnement zu einem Design Token registriert, erhält eine Benachrichtigung, sobald dieses sich ändert, und kann entsprechend reagieren. Zusätzlich lässt sich ein Design Token als CSS-Direktive verwenden. Zur Laufzeit der Web-App ersetzt FAST/Fluent diese Direktive durch die benutzerdefinierte CSS-Eigenschaft, und das betroffene HTML-­Element oder die Webkomponente erhält das entsprechende Styling.FAST besitzt ein adaptives Color-System, um dem Programmierer das Arbeiten mit Farben zu erleichtern. Das adap­tive Color-System erfüllt die Anforderungen des W3C, was die Farbkontraste betrifft. Zudem bietet es ein einfaches Theming und erleichtert die Anpassung der Farbdarstellungen über Algorithmen, die mit Namen verbunden sind. Diese Algorithmen bezeichnet FAST als Recipes (Rezepte) – sie kombinieren Einstellungswerte mit den Algorithmen und führen so zum gewünschten Ergebnis.Um die Arbeitsweise der Recipes zu veranschaulichen, hat das FAST-Team für die Erkundung des Color-Systems einen Color Explorer entwickelt [22]. Dessen rechter Fensterausschnitt Settings bietet verschiedene Einstellungen an (vergleiche Bild 5), deren Auswirkungen die linke Seite direkt als Farben anzeigt.

Styling von Fluent UI Web Components in der Web-App durchführen

Als Beispiel dient die Programmierung eines Formulars, das Personaldaten erfasst (Bild 6). Der Endbenutzer gibt den Nachnamen und Vornamen eines Mitarbeiters über zwei Ausprägungen der Fluent-UI-Webkomponente fluent-text-field ein. Für eine bessere Lesbarkeit sorgt eine Umrandung durch das <fluent-card>-Element. Lesen und Weiterreichen der Daten erledigt ein Klick auf eine Speichern-Schaltfläche; dabei handelt es sich um eine Ausprägung der Fluent-UI-Webkomponente fluent-button. Die abschließende Weiterverarbeitung übernimmt die mit dem click-Event verbundene JavaScript-Funktion submitForm(), die sich im <script>-Bereich des HTML-Dokuments befindet (Listing 5).

Die Umrandung des fluent-card-Elements (Bild 6) soll auf die Größe beiden Eingabefelder abgestimmt sein. Der nachfolgende Quellcode zeigt, dass ein Programmierer, der diese Fluent-UI-Webkomponente benutzt, die übliche mit Java­Script verbundene Vorgehensweise verwenden kann. Das für die Größe der Umrandung der beiden Eingabefelder notwendige Styling des fluent-card-Elements erfolgt über JavaScript; dieses bestimmt im HTML-Dokument den benötigten querySelector und setzt für ihn eine passende Größe:

Um innerhalb der Web-App das Styling für die Darstellung weitgehend von den Inhalten zu trennen, deklariert der Programmierer diese zugehörigen Anweisungen in einer zentralen style.css-Datei. Diese CSS-Datei realisiert wie üblich das CSS-Styling der Web-App für die betroffenen Fluent UI Web Components. Um beispielsweise den Innenabstand für die beiden Eingabefelder (Bild 6) im fluent-card-Element passend zu setzen, definiert der Programmierer dessen CSS-Styling in einer zentralen style.css-Datei:

Nach dem gleichen Verfahren erfolgt die Deklaration für den oberen Abstand (Bild 6) der Speichern-Schaltfläche. Der nachfolgende Quellcode zeigt, dass sich das Styling gezielt auf eine bestimmte Ausprägung der fluent-button-Webkomponente ausrichten lässt. So definiert der Quellcode <fluent-button id=”speichernBtn”… im HTML-Dokument eine eindeutige id für diese Webkomponente. Auf deren Ausprägung greift der Selektor beginnend mit dem Rautezeichen (#) gefolgt vom id-Namen #speichernBtn in der zentralen style.css-Datei zu und setzt das margin-top-Attribut passend:

Benutzererfahrungen über Webstandards erhöhen die Wirtschaftlichkeit

Die heutige Anwendungslandschaft präsentiert sich immer noch dreigeteilt in die Welten Desktop, Web/Internet und mobile Endgeräte. Aus dem Zwang, mehr Produktivität und Effizienz sowohl in den Anwendungen als auch bei deren Entwicklung und Bereitstellung zu erreichen, resultieren zunehmend Anstrengungen, den mit dieser Dreiteilung verbundenen Zusatzaufwand zu minimieren. Das Arbeiten mit Anwendungen aus diesen drei Welten hat gezeigt, dass die Benutzeroberfläche und die damit verbundenen Benutzererfahrungen eine Schlüsselrolle für die Wirtschaftlichkeit einnehmen. Dies trifft ebenso für die bei der Entwicklung und Bereitstellung der Anwendungen eingesetzten Methoden, Verfahren und Werkzeuge zu.Dabei trägt der Einsatz eines Design-Systems wie Fluent von Microsoft wesentlich zur Vereinheitlichung der Benutzeroberflächen der drei Welten bei. Ebenfalls positiv wirkt sich eine Vereinheitlichung der Methoden, Verfahren und Werkzeuge für Entwicklung und Bereitstellung der Anwendungen aus. Microsoft bietet mit dem eigenen Design-System Fluent und den auf dem W3C-Standard basierenden Fluent UI Web Components einen evolutionären Migrationspfad für die Anwendungsentwicklung an.Dieser Migrationspfad umfasst ein sehr breites Spektrum: Es reicht von der Einbindung herkömmlicher Frameworks (wie Angular, React oder Vue) über den Einbezug des eigenen oder fremder Design-Systeme wie Material Design und deren Umsetzung mittels FAST Frame bis zur schrittweisen Realisierung einer stärkeren Durchgängigkeit vom Design zum Quellcode mittels Figma Dev Mode (siehe [23]). Damit strebt Microsoft mit diesem Migrationspfad eine einheitliche, einfachere und somit produktivere Welt der Anwendungsentwicklung an. Damit verbundene Benutzererfahrungen wirken sich anwenderseitig ebenfalls positiv auf die Wirtschaftlichkeit beim Einsatz der Apps aus.

Fussnoten

1. [1] GitHub-Repository von Office UI Fabric Core, http://www.dotnetpro.de/SL2408FluentUI1
2. [2] GitHub-Repository von Fluent UI Web, https://github.com/microsoft/fluentui
3. [3] Homepage des Design-Systems Fluent 2, https://fluent2.microsoft.design/
4. [4] Homepage von Fluent UI React v9, http://www.dotnetpro.de/SL2408FluentUI2
5. [5] Entwicklungshandbuch für Fluent UI React, http://www.dotnetpro.de/SL2408FluentUI3
6. [6] Homepage des Design-Systems FAST, http://www.fast.design
7. [7] Homepage der Design Tokens Community Group (DTCG), http://www.dotnetpro.de/SL2408FluentUI4
8. [8] Entwicklungshandbuch für Fluent UI Web Components, http://www.dotnetpro.de/SL2408FluentUI15
9. [9] Homepage von TypeScript, http://www.typescriptlang.org
10. Homepage von Node.js, https://nodejs.org
11. GitHub-Repository von Node Version Manager (macOS, Linux), https://github.com/nvm-sh/nvm
12. GitHub-Repository von NVM for Windows, http://www.dotnetpro.de/SL2408FluentUI6
13. Homepage des Package-Managers Yarn, https://yarnpkg.com
14. Homepage von Git, https://git-scm.com
15. Storybook-Infoseite zu Microsoft Fluent UI Web ­Components, http://www.dotnetpro.de/SL2408FluentUI7
16. Homepage von Vite, https://vitejs.dev
17. Storybook-Infoseite zu Fluent UI React, http://www.dotnetpro.de/SL2408FluentUI8
18. Storybook von Fluent UI React v9, https://react.fluentui.dev/
19. Homepage von Griffel, https://griffel.js.org/
20. Homepage des FAST Component Explorer, https://explore.fast.design/
21. Fluent UI Web Components on CodePen, https://codepen.io/team/fluentuiwc
22. Homepage des Fast color explorer, https://color.fast.design/
23. Frank Simon, Design-Systeme für UI-Komponenten, dotnetpro 4/2024, Seite 21 ff., http://www.dotnetpro.de/A2404FluentUI
24. Homepage von Tabster, https://tabster.io