Web Components: UI-Bibliothek für Googles Dart

Google hat mit Web UI eine User-Interface-Bibliothek für seine Javascript-Alternative Dart veröffentlicht. Web UI nutzt Web Components, mit denen sich eigene HTML-Tags definieren und mit Inhalten versehen lassen, so dass sie wie Bausteine verwendet werden können.

Artikel veröffentlicht am ,
Todo-App auf Basis von Dart und Web UI
Todo-App auf Basis von Dart und Web UI (Bild: Google)

Web UI soll die Entwicklung mittlerer und großer Web-Apps vereinfachen. Die für Googles Programmiersprache Dart entwickelte Bibliothek unterstützt dazu dynamische Templates und Web Components.

Stellenmarkt
  1. IT-Produktverantwortliche/IT- -Produktverantwortlicher (m/w/d) Referat Projekt- und Portfoliomanagement
    GKV-Spitzenverband, Berlin
  2. Experte (w/m/d) Corporate Governance & Compliance
    AIXTRON SE, Herzogenrath
Detailsuche

Templates funktionieren in Web UI ähnlich wie bei Mustache mit doppelten geschweiften Klammern. Damit lassen sich Inhalte, Attribute und Klassen in CSS mit Platzhaltern versehen, die gegebenenfalls nur dann angezeigt werden, wenn bestimmte Bedingungen erfüllt sind. Auch Schleifen werden unterstützt. Zudem lassen sich UI-Elemente mit Dart-Variablen verknüpfen, so dass die beiden Werte synchronisiert werden, wenn sich die Variable oder der Wert des UI-Elements ändert, beispielsweise durch eine Nutzereingabe.

Darüber hinaus hat Google in Web UI sein Web-Komponenten-Konzept umgesetzt, das Google im Mai bereits als W3C-Entwurf für Web Components veröffentlicht hat. Damit lassen sich Elemente in einer Seite in einem neuen Tag zusammenfassen, das im Code wiederverwendet werden kann. Das umfasst den dazu in einem Template gekapselten HTML-Code ebenso wie den dafür notwendigen CSS-Code und die zugehörige Script-Logik.

Eine Übersicht der Funktionen von Web UI hat Google unter dartlang.org samt passenden Beispielen zusammengestellt. Allerdings handelt es sich bei der jetzt veröffentlichten Version von Web UI um eine frühere Version. Diese enthält aber auch einen Compiler, der den Dart- und Web-UI-Code umwandelt, so dass er in jedem modernen Browser funktioniert.

Golem Karrierewelt
  1. ITIL 4® Foundation: virtueller Zwei-Tage-Workshop
    18./19.07.2022, virtuell
  2. CEH Certified Ethical Hacker v11: virtueller Fünf-Tage-Workshop
    01.-05.08.2022, Virtuell
Weitere IT-Trainings

Auch eine kleine Todo-App, die mit Dart und Web UI umgesetzt wurde, stellt Google zur Verfügung. Sie kann unter dart-lang.github.com ausprobiert werden.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Aktuell auf der Startseite von Golem.de
US-Streaming
Abonnenten immer unzufriedener mit Netflix

Wenn Netflix-Abonnenten das Abo kündigen, wird vor allem der hohe Preis sowie ein schlechtes Preis-Leistungs-Verhältnis als Grund dafür genannt.

US-Streaming: Abonnenten immer unzufriedener mit Netflix
Artikel
  1. Machine Learning: Die eigene Stimme als TTS-Modell
    Machine Learning
    Die eigene Stimme als TTS-Modell

    Mit Machine Learning kann man ein lokal lauffähiges und hochwertiges TTS-Modell der eigenen Stimme herstellen. Dauert das lange? Ja. Braucht man das? Nein. Ist das absolut nerdig? Definitv!
    Eine Anleitung von Thorsten Müller

  2. Elektro-SUV: Drako Dragon soll Teslas Model X Plaid deutlich übertreffen
    Elektro-SUV
    Drako Dragon soll Teslas Model X Plaid deutlich übertreffen

    Das Elektroauto Drako Dragon soll mit seinen vier Motoren eine Leistung von 1.470 kW entwickeln und 320 km/h Spitze fahren.

  3. Discovery+: Neues Streamingabo in Deutschland verfügbar
    Discovery+
    Neues Streamingabo in Deutschland verfügbar

    Während etwa Netflix oder Disney werbefinanzierte Varianten ihrer Abos planen, startet Discovery+ gleich mit einem solchen Dienst.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • MSI RTX 3080 Ti Ventus 3X 12G OC 1.049€ • Alternate (u. a. Corsair Vengeance LPX 32 GB DDR4-3600 106,89€) • be quiet! Pure Rock 2 26,99€ • SanDisk microSDXC 400 GB 29€ • The Quarry + PS5-Controller 99,99€ • Samsung Galaxy Watch 3 119€ • Top-PC mit Ryzen 7 & RTX 3070 Ti 1.700€ [Werbung]
    •  /