Abo
  • IT-Karriere:

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. pdv Financial Software GmbH, Hamburg
  2. Süwag Energie AG, Frankfurt am Main

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.

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.



Anzeige
Top-Angebote
  1. 99,00€ (Bestpreis!)
  2. 69,90€
  3. 88,00€
  4. GRATIS im Ubisoft-Sale

kitingChris 19. Dez 2012

Konkurrenz zur Wunderlist? SCNR


Folgen Sie uns
       


AMD Ryzen 9 3900X und Ryzen 7 3700X - Test

Wir testen den Ryzen 9 3900X mit zwölf Kernen und den Ryzen 7 3700X mit acht Kernen. Beide passen in den Sockel AM4, nutzen DDR4-3200-Speicher und basieren auf der Zen-2-Architektur mit 7-nm-Fertigung.

AMD Ryzen 9 3900X und Ryzen 7 3700X - Test Video aufrufen
Nachhaltigkeit: Jute im Plastik
Nachhaltigkeit
Jute im Plastik

Baustoff- und Autohersteller nutzen sie zunehmend, doch etabliert sind Verbundwerkstoffe mit Naturfasern noch lange nicht. Dabei gibt es gute Gründe, sie einzusetzen, Umweltschutz ist nur einer von vielen.
Ein Bericht von Werner Pluta

  1. Nachhaltigkeit Bauen fürs Klima
  2. Autos Elektro, Brennstoffzelle oder Diesel?
  3. Energie Wo die Wasserstoffqualität getestet wird

Smarte Wecker im Test: Unter den Blinden ist der Einäugige König
Smarte Wecker im Test
Unter den Blinden ist der Einäugige König

Einen guten smarten Wecker zu bauen, ist offenbar gar nicht so einfach. Bei Amazons Echo Show 5 und Lenovos Smart Clock fehlen uns viele Basisfunktionen. Dafür ist einer der beiden ein besonders preisgünstiges und leistungsfähiges smartes Display.
Ein Test von Ingo Pakalski

  1. Nest Hub im Test Google vermasselt es 1A

Google Maps: Karten brauchen Menschen statt Maschinen
Google Maps
Karten brauchen Menschen statt Maschinen

Wenn Karten nicht mehr von Menschen, sondern allein von Maschinen erstellt werden, erfinden diese U-Bahn-Linien, Hochhäuser im Nationalpark und unmögliche Routen. Ein kurze Liste zu den Grenzen der Automatisierung.
Von Sebastian Grüner

  1. Kartendienst Google bringt AR-Navigation und Reiseinformationen in Maps
  2. Maps Duckduckgo mit Kartendienst von Apple
  3. Google Maps zeigt Bikesharing in Berlin, Hamburg, Wien und Zürich

    •  /