Cross-Browser-Support war gestern: fui-as und die Renaissance der Canvas-UI

Mal ganz ehrlich: Wer kennt das nicht? Du polierst stundenlang einen Button-Hovereffekt, nur um festzustellen, dass Safari das Ergebnis völlig anders darstellt als Chrome. Du brauchst ein Custom-UI-Element, greifst zum Canvas — und verlierst im Gegenzug Barrierefreiheit, SEO und das geliebte "Rechtsklick → Untersuchen".

Ein frisches Open-Source-Projekt namens fui-as geht einen anderen Weg. Und ehrlich gesagt bringt es mich dazu, meine bisherigen Annahmen über Web-UI-Entwicklung zu hinterfragen.

Der Traum vom Desktop, verwirklicht im Browser

Wer schon mal eine Desktop-Anwendung mit WPF oder Qt gebaut hat, kennt das Gefühl: Man hat die volle Kontrolle über jedes Pixel. Animationen laufen geschmeidig, Text wird konsistent gerendert, das Interface sieht exakt so aus, wie man es designed hat — egal wo.

Stellt euch vor, dieses Erlebnis ließe sich auf das Web übertragen. Genau das versuchen Canvas-basierte UI-Frameworks: Die gesamte Oberfläche auf einem HTML5-Canvas rendern und damit die Präzision von Desktop-Entwicklung mit der Reichweite des Webs verbinden.

Mehr als nur hübsche Pixel

Die Entwickler hinter fui-as wissen aber: Canvas-UIs drehen sich nicht nur um schöne Grafiken. Sie lösen auch die echten Probleme, die Entwickler normalerweise von diesem Ansatz abhalten:

Barrierefreiheit: Eine der größten Schwächen von Canvas-Anwendungen ist, dass Screenreader und Hilfstechnologien darin nichts erkennen. fui-as integriert standardmäßig einen semantischen Baum — eure Canvas-Anwendung kann also weiterhin problemlos mit Accessibility-Tools kommunizieren.

Internationalisierung: Durch HarfBuzz für Text-Shaping und ICU für Lokalisierungsdaten gibt es properen Support für CJK-Sprachen, komplexe Schriftsysteme und das oft vergessene Problem des Font-Fallbacks, wenn Nutzer plötzlich Text in Sprachen einfügen, die ihr nicht einkalkuliert hattet.

Performance: Das Framework nutzt Brotli-Komprimierung, um die initiale Payload klein zu halten (unter 100KB für Demo-Seiten), mit permanent gecachten Runtime-Assets. Damit wird eine häufige Kritik an Canvas-basierten Ansätzen adressiert — nämlich dass sie zu schwergewichtig sind.

Die Technik dahinter

Was mich besonders fasziniert: die Tools, die dieses Projekt antreiben:

• Yoga für responsive Layoutberechnungen (ja, genau die Layout-Engine aus React Native)
• Skia für hardwarebeschleunigtes 2D-Rendering
• HarfBuzz für intelligentes Text-Shaping
• ICU für umfassende Internationalisierungsunterstützung

Im Grunde werden hier battle-getestete Open-Source-Komponenten, die seit Jahren Mobile-Apps und Desktop-Software antreiben, auf den Browser losgelassen.

Warum das für euer nächstes Projekt relevant ist

Die Sache ist die: Traditionelle Web-Entwicklung mit DOM-basierten Frameworks wie React oder Vue ist unglaublich mächtig und bleibt für die meisten Projekte die richtige Wahl. Aber es gibt eine wachsende Klasse von Anwendungen, bei denen Canvas-Rendering wirklich Sinn ergibt:

• Datenvisualisierungstools, die Custom-Grafiken brauchen
• Kollaborative Whiteboards mit komplexen Zeichenfunktionen
• Spiele und interaktive Erlebnisse, die ohnehin im Canvas leben
• Enterprise-Dashboards, wo pixelgenaue Konsistenz zählt

Und mal ganz ehrlich? Manchmal will man einfach etwas bauen, ohne sich über Browser-Inkonsistenzen, CSS-Spezifitätsschlachten oder die Frage den Kopf zerbrechen zu müssen, warum box-sizing: border-box nach all den Jahren immer noch nicht der Standard ist.

Die philosophische Perspektive

Der Ersteller von fui-as hat mal etwas gesagt, das mir im Kopf geblieben ist: "Vielleicht gibt es für so etwas heutzutage keinen Sinn mehr, wo jeder einfach KI nutzen kann, um Dinge ad-hoc zu erledigen."

Eine berechtigte Frage. Mit KI-Coding-Assistenten, die omnipräsent werden — hat principled Engineering, also das Lösen schwieriger Probleme mit durchdachter Architektur statt dem Zusammenflicken von KI-generiertem Code, noch einen Wert?

Ich würde sagen: Ja. KI kann helfen, schneller zu liefern. Aber das Verständnis der Grundlagen — wie Text-Rendering tatsächlich funktioniert, wie man Barrierefreiheit in unkonventionellen Interfaces erhält, wie man für reale Performance optimiert — dieses Wissen wächst über die Zeit. Projekte wie fui-as erinnern uns daran, dass gutes Engineering nicht out of style ist.

Wo es hingeht

Wenn euch dieser Ansatz neugierig macht, lohnt es sich, das Projekt im Auge zu behalten. Canvas-basierte UI-Frameworks existierten immer am Rand der Web-Entwicklung, aber die Werkzeuge reifen schnell.

Und falls ihr an einem Projekt arbeitet, das von diesem Ansatz profitieren könnte: Denkt auch an die Hosting-Infrastruktur. WebAssembly-Anwendungen mit Canvas-Rendering können überraschend schlank sein, wenn sie richtig deployed werden — besonders mit der richtigen CDN- und Caching-Strategie.

Die Web-Plattform überrascht uns immer wieder. Manchmal sind die alten Träume — Desktop-Qualität im Browser — gar nicht so abwegig.

Was meint ihr zu Canvas-basierten Web-Frameworks? Habt ihr schon etwas gebaut, das von diesem Ansatz profitieren würde? Schreibt eure Gedanken in die Kommentare — wir sind immer gespannt, was unsere Developer-Community entwickelt.