mogwai
v0.6.8 Copy on write element names
M imkale, oh bvious, g raphical w eb a plication i nterface
mogwai ist eine Sichtbibliothek zum Erstellen von GUI -Anwendungen. Es ist in Rost geschrieben und läuft in Ihrem Browser und verfügt über genügend Funktionen serverseitig, um das Rendering zu machen. Es ist eine Alternative zum Reagieren, Rückgrat, Ember, Elm, Purescript usw.
Die Hauptkonzepte hinter mogwai sind
Sinks und Streams statt Rückrufe
Ereignisse wie Click, Mouseover usw. werden über Streams gesendet, anstatt einen Rückruf aufzurufen. Ströme können zugeordnet, gefiltert und gefaltet werden.
Widget -Ansichten sind dumm
Eine Ansicht ist nur eine Struktur, die den UI -Baum mutiert, nachdem sie eine Nachricht von einem Stream erhalten hat. Die Ansichten werden mit einfachen Rostfunktionen oder einem RSX -Makro gebaut und verschachtelt.
Die Widget -Logik ist eine oder mehrere asynchronische Aufgaben, die sich über Ereignismeldungen wechseln
Widgets verwenden asynchrone Aufgabenschleifen, die Ereignisse aus der Ansicht empfangen und als Antwort Aktualisierungen an die Ansicht senden.
Hier ist ein Beispiel für eine Schaltfläche, die die Häufigkeit zählt, mit der er geklickt wurde:
use mogwai_dom :: prelude :: * ;
# [ derive ( Default ) ]
struct Button {
clicks : usize ,
click : Output < ( ) > ,
text : Input < String > ,
}
impl Button {
/// Convert into a `ViewBuilder`
fn builder ( mut self ) -> ViewBuilder {
rsx ! (
button ( on : click= self . click . sink ( ) . contra_map ( |_ : JsDomEvent | ( ) ) ) {
// Using braces we can embed rust values in our UI tree.
// Here we're creating a text node that starts with the
// string "Clicked 0 times" which updates every time a
// message is received on the stream.
{ ( "Clicked 0 times" , self . text . stream ( ) . unwrap ( ) ) }
}
) . with_task ( async move {
while let Some ( ( ) ) = self . click . get ( ) . await {
self . clicks += 1 ;
self . text . set ( if self . clicks == 1 {
"Clicked 1 time" . to_string ( )
} else {
format ! ( "Clicked {} times" , self . clicks )
} ) . await . unwrap ( ) ;
}
} )
}
}
let btn = Button :: default ( ) ;
// Get a sink to manually send events.
let mut click_sink = btn . click . sink ( ) ;
// Build the view to render in the browser
let view = Dom :: try_from ( btn . builder ( ) ) . unwrap ( ) ;
// Attach it to the browser's DOM tree
view . run ( ) . unwrap ( ) ;
// Spawn asyncronous updates
wasm_bindgen_futures :: spawn_local ( async move {
// Queue some messages for the view as if the button had been clicked:
click_sink . send ( ( ) ) . await . unwrap ( ) ;
click_sink . send ( ( ) ) . await . unwrap ( ) ;
// view's html is now "<button>Clicked 2 times</button>"
} ) ; Wenn Sie mehr erfahren möchten - lesen Sie bitte die Einführung und Dokumentation.
ViewBuilder ermöglicht das Ausführen auf mehreren Plattformen (Web, iOS, Android, Desktop usw.). mogwai verwendet Streams, Sinks, eine deklarative Ansichtserbauer und eine asynchronisierte Logik, um Komponenten zu definieren und wie sie sich im Laufe der Zeit verändern.
Die Ansichtsmutation ist explizit und erfolgt aufgrund von Ansichten, die Nachrichten erhalten, sodass keine Leistungsaufwand von VDOM -Differenzierung vorliegt.
Wenn Sie einen funktionalen Programmierstil mit vielen Karten und Falten bevorzugen - oder wenn Sie vroom gehen möchten! Dann ist mogwai vielleicht richtig für dich :)
Bitte beachten Sie, dass sich mogwai noch in Alpha befindet und die API sich aktiv ändert - PRs, Probleme und Fragen werden begrüßt. Ab dem 0.6 -Veröffentlichung erwarten wir, dass die API relativ rückwärts kompatibel ist.
mogwai ist eine Rost -erste Bibliothek. Es ist nicht erforderlich, dass Sie npm oder node haben. Es ist einfach genug, Ihr Projekt in Betrieb zu nehmen, ohne JavaScript zu schreiben.
mogwai ist bissig! Hier sind einige sehr handwellige und skizzenhafte Tomvc -Metriken:
Zuerst benötigen Sie eine neue (ISH) Version der Rust Toolchain. Dafür können Sie https://rustup.rs/ besuchen und den Installationsanweisungen befolgen.
Dann brauchst du Wasm-Pack.
Zum Start eines neuen Mogwai-Projekts verwenden wir die wundervolle cargo-generate , die mit cargo install cargo-generate installiert werden kann.
Dann rennen
cargo generate --git https://github.com/schell/mogwai-template.git und geben Sie der Befehlszeile einen Projektnamen. Dann cd in Ihr funkelnes neues Projekt und
wasm-pack build --target web Wenn Sie es noch nicht haben, cargo install basic-http-server oder verwenden Sie Ihre bevorzugte Alternative, um Ihre App zu servieren:
basic-http-server -a 127.0.0.1:8888Frohe Hacking! ☕ ☕ ☕
? Das Kochen mit Mogwai ist eine Reihe von Beispiellösungen für verschiedene UI -Probleme. Ziel ist es, ein guter Referenzdokument zu sein, aber kein Schritt-für-Schritt-Tutorial.
Hängen Sie im Support -Kanal über Mogwai ab und sprechen Sie über mogwai :
Beispiele finden Sie im Beispiel -Ordner.
Um die Beispiele zu erstellen, die verwendet werden:
wasm-pack build --target web examples/{the example}Weitere externe Beispiele sind:
Bitte erwägen Sie, die Entwicklung dieser Bibliothek zu sponsern!
