wui_builder

Eine DART -Bibliothek zum Erstellen von Benutzeroberflächen für das Web, inspiriert von ReactJs

Zum Erstellen deklarativer, komponentenbasierter Webbenutzer -Schnittstellen in DART.

Bietet eine reichhaltige Bibliothek typisierter virtueller Elemente für SVG & Standard HTML.

Unterstützt das Definieren von benutzerdefinierten Komponenten mit einer Schnittstelle, die dem React ähnelt. Alle die gleichen Lebenszyklusmethoden werden unterstützt.

Von Anfang an gebaut mit Async.

Vollständig mit Dart 2, starkem Modus und dem DDC.

Dokumentation und Beispiele

Schauen Sie sich die Dokumentation auf Github -Seiten an, um den Framework ausführlich zu sehen

Was unterscheidet dieses virtuelle DOM -Framework?

Es ist in Dart geschrieben. Plus:

Generierte virtuelle DOM -Elemente

Der Generator ist das einzigartigste Merkmal von Wui_Builder. Der Generator generiert einen virtuellen DOM -Element -Builder für jeden Elementtyp, der in den Paketen von DART HTML und SVG definiert ist. Jeder virtuelle DOM -Element -Builder liefert dieselben getippten Setter wie sein entsprechendes HTML/SVG -Element. Dies erleichtert es einfach, belastbare Komponenten zu schreiben.

Konfigurierbare Update -Planung

Als nächstes unterstützt Wui_Builder das iterative Rendering, um zu vermeiden, dass der Haupt -Thread bei großen Updates blockiert wird. Iterative Updates nur Prozesse für Leerlauf -Rückrufe, was bedeutet, dass das Rendering -Job und das Layout über mehrere Frames aufgeteilt werden. Wui_Builder gibt dem Entwickler die Macht, zu entscheiden, wann Komponenten rendern sollten. Der Entwickler kann entscheiden, ob eine Komponente synkron, auf dem Animationsrahmen oder auf und im Leerlauf -Rückruf aktualisiert. Idealerweise wird eine Komponente entweder:

• Rendern Sie den Animationsrahmen für Updates mit hoher Priorität, die abgeschlossen sind. Aktualisierungen von mulitiple Komponenten können auf Animationsrahmen gestapelt werden.
• Rendern Sie Leerlaufrückrufe für Updates mit niedriger Priorität, die über Frames aufgeteilt werden können.

Syncronous -Updates dürfen jedoch auch bei Bedarf ausgeführt werden, ohne auf einen Animationsrahmen oder einen Leerlauf -Rückruf zu warten.

Smart Update -Charge

Schließlich verhindert Wui_Builder unaufmerksame Updates, wenn mehrere Aktualisierungen derselben Komponente in der Warteschlange gestellt werden, bevor eine bearbeiten kann. Angenommen, ich habe eine Komponente, die den Animationsrahmen mithilfe von setStateonanimationFrame aktualisiert. Wenn setStateonanimationFrame zwischen den Frames zweimal aufgerufen wird, wird der Aktualisierungsprozess nur einmal ausgeführt, während beide staatlichen Setterfunktionen ausgeführt werden können.

Beachten Sie, dass RequestIdleCallback derzeit nicht von allen Browsern unterstützt wird, und Wui_Builder enthält derzeit keine Polyfill. Synchrones Rendering funktioniert immer noch auf allen Browsern. Sehen Sie hier ein Kompatabilitätsdiagramm.

Syntax

 class HelloWorldProps {
    final String text;
    HelloWorldProps ( this .text);
}

class HelloWorld extends PComponent < HelloWorldProps > {
    HelloWorld ( String text) : super ( HelloWorldProps (text));

    @override
    VNode render () => VDivElement ()
        ..text = props.text;
}

// instantiate the component, pass it an instance of HelloWorldProps
final component = HelloWorld ( 'Hello world' );

// render the virtual element into a container
render (component, querySelector ( '#container' ));

In der Dokumentation auf Github -Seiten finden Sie in tiefsten Beispielen.