Quelle: dotnetpro
Komponentenbasierte Apps mit Fluent/FAST, Teil 4 15.07.2024, 00:00 Uhr

Web-Apps mit Fluent UI Web

Microsoft stellt mit Fluent UI Web eine Sammlung von Tools sowie React- und Webkomponenten für die Entwicklung von Web-Apps zur Verfügung.
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.
Überblick zu den Entwicklungspaketen für Fluent UI
Für die Entwicklung von Web-Apps mit JavaScript/TypeScript, HTML/CSS stehen in der Microsoft-Welt verschiedene Tools auf der Basis von Fluent (UI) zur Verfügung:
  • Fabric Core: Eine Sammlung von CSS-Klassen und Sass-Mix­ins für die Gestaltung von Animationen, Farben, Fonts, Grid und Icons auf der Basis der Fluent Design Language. Ziel­richtung dieses NPM-Packages sind statische Webseiten.
  • Fluent UI React bis Version 8: Ein Frontend-Framework für die React-Programmierung von Oberflächen für Office-Apps. Das speziell auf Teams ausgerichtete Stardust @fluentui/
  • react-northstar wird kontinuierlich in @fluentui/react inte­griert. Microsoft empfiehlt, damit entwickelte Software auf die Version 9 zu migrieren.
  • Fluent UI React ab Version 9: Mit diesem React-Framework erweitert Microsoft das Einsatzgebiet auf die Produkte von Microsoft 365. Es soll für die Programmierung von React-Frontends eingesetzt werden.
  • Fluent UI Web Components: Richtet sich an Softwareentwickler, die Web Components gemäß W3C auf der Basis der Fluent Design Language in ihren Web-Apps einsetzen wollen.

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
  • + Digitales Kundenkonto,
  • + Zugriff auf das digitale Heft,
  • + Zugang zum digitalen Heftarchiv,
  • + Auf Wunsch: Weekly Newsletter,
  • + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar