Pre-Spezifikation · Konzeptphase Offen für Diskussion

UI einmal definieren.
Überall rendern.

as-ui ist ein vorgeschlagener UI-Abstraktions-Standard. Eine framework-unabhängige Beschreibung von Komponenten und Layouts, die nativ auf React, Vue, Svelte, Angular und darüber hinaus rendert. Struktur schreiben. Framework wählen. Ausliefern.

Diese Seite dokumentiert das Konzept, wie es ursprünglich gedacht war. Es ist eine Pre-Spezifikation — ein Startpunkt für eine Diskussion, kein fertiges Produkt.

Die Kernidee
{ "login-form": { "type": "form", "fields": [ { "name": "email", "kind": "email", "required": true }, { "name": "password", "kind": "password", "required": true } ], "submit": { "label": "Sign in" } } }

Eine Beschreibung. Jedes Component-Framework rendert sie.

Das Problem

Framework-Lock-in

Eine UI, die in React geschrieben wurde, lebt in React. Zu Vue oder Svelte zu portieren heißt, jede Komponente, jedes Stück Logik, jedes Styling neu zu schreiben.

Team-Divergenz

Ein Team baut in React, ein anderes in Vue. Dasselbe Design-System, dieselben Komponenten — zwei parallele Implementierungen. Einen Bug beheben heißt, ihn zweimal zu beheben.

Wiederholte Arbeit

Jede große Framework-Migration fängt bei Null an. Dieselben UI-Formen werden jedes Mal neu gebaut, wenn ein Team beschließt, seinen Stack zu wechseln.


Das Konzept

Ein deklarativer UI-Vertrag

as-ui definiert eine strukturierte Beschreibung von UI — Komponenten, Komposition, Props, Events. Die Beschreibung ist die Quelle der Wahrheit. Frameworks liefern Renderer, die die Beschreibung in ihr eigenes Component-System übersetzen.

Framework-Renderer

Jedes unterstützte Framework hat einen Renderer, der den Vertrag liest und nativen Output produziert. React bekommt JSX. Vue bekommt SFCs. Svelte bekommt Svelte. Gleicher Input, nativer Output.

ReactVueSvelteSolidJSAngular

Ecosystem-Fit

Funktioniert mit as-cssdo

as-ui beschreibt die Struktur, as-cssdo beschreibt das Styling. Zusammen entkoppeln sie beide Belange vom Framework. Der UI-Vertrag zeigt auf semantische CSS-Klassen, die cssdo bereitstellt.

Teil von frameworkic

frameworkic — die Cross-Framework-Studien-Reihe — ist das natürliche Testfeld für as-ui: dieselbe App, gerendert von jedem Framework, alles aus einer UI-Beschreibung.

Interesse an dieser Idee?

Das Konzept ist in seiner frühesten Phase. Wenn du an einem Component-Framework arbeitest, einem Design-System, oder einfach sehen willst, wohin das führt — melde dich.