mogwai
v0.6.8 Copy on write element names
m inimal, o bvious, g raphical w eb a pplication i nterface
mogwai est une bibliothèque de vue pour créer des applications GUI. Il est écrit en rouille et s'exécute dans votre navigateur et a suffisamment de fonctionnalité côté serveur pour faire le rendu. C'est une alternative pour réagir, épine dorsale, bilan, orme, purecript, etc.
Les principaux concepts derrière mogwai sont
Évier et ruisseaux au lieu de rappels
Voir les événements comme Click, Mouseover, etc. sont envoyés via des flux au lieu d'invoquer un rappel. Les ruisseaux peuvent être mappés, filtrés et pliés.
Les vues du widget sont stupides
Une vue n'est qu'une structure qui mute l'arbre d'interface utilisateur après avoir reçu un message d'un flux. Les vues sont construites et imbriquées à l'aide de fonctions de rouille ordinaire ou d'une macro RSX.
La logique du widget est une ou plusieurs tâches asynchrones qui bouclent sur les messages de l'événement
Les widgets utilisent des boucles de tâches asynchrones qui reçoivent des événements de la vue et envoient des mises à jour à la vue en réponse.
Voici un exemple de bouton qui compte le nombre de fois où il a été cliqué:
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>"
} ) ; Si vous souhaitez en savoir plus - veuillez lire l'introduction et la documentation.
ViewBuilder permet de fonctionner sur plusieurs plates-formes (Web, iOS, Android, Desktop, etc.) mogwai utilise des flux, des puits, un constructeur de vues déclaratif et une logique asynchrone pour définir les composants et comment ils changent avec le temps.
La mutation de la vue est explicite et se produit à la suite des vues recevant des messages, il n'y a donc pas de surcharge de performance de la difficulté VDAM.
Si vous préférez un style fonctionnel de programmation avec beaucoup de cartes et de plis - ou si vous cherchez à aller vroom! Alors peut-être que mogwai vous convient :)
Veuillez garder à l'esprit que mogwai est toujours en alpha et que l'API change activement - les PR, les problèmes et les questions sont les bienvenus. Depuis la version 0.6 nous nous attendons à ce que l'API soit relativement compatible en arrière.
mogwai est une bibliothèque Rust First. Il n'y a aucune exigence que vous ayez npm ou node . Faire fonctionner votre projet sans écrire de JavaScript est assez facile.
mogwai est accrocheur! Voici quelques métriques TODOMVC très sommaires et sommaires:
Vous aurez d'abord besoin d'une nouvelle version (ish) de la chaîne d'outils de rouille. Pour cela, vous pouvez visiter https://rustup.rs/ et suivre les instructions d'installation.
Ensuite, vous aurez besoin de Wasm-Pack.
Pour démarrer un nouveau projet Mogwai, nous utiliserons la merveilleuse cargo-generate , qui peut être installée à l'aide cargo install cargo-generate .
Puis courez
cargo generate --git https://github.com/schell/mogwai-template.git et donnez à la ligne de commande un nom de projet. Puis cd dans votre nouveau projet étincelant et
wasm-pack build --target web Ensuite, si vous ne l'avez pas déjà, cargo install basic-http-server ou utilisez votre alternative préférée pour servir votre application:
basic-http-server -a 127.0.0.1:8888Joyeux piratage! ☕ ☕ ☕
? La cuisine avec Mogwai est une série d'exemples de solutions à divers problèmes d'interface utilisateur. Il vise à être un bon document de référence mais pas un tutoriel étape par étape.
Sortez et parlez de mogwai dans la chaîne de support:
Des exemples peuvent être trouvés dans le dossier Exemples.
Pour construire les exemples à utiliser:
wasm-pack build --target web examples/{the example}Des exemples externes supplémentaires comprennent:
Veuillez envisager de parrainer le développement de cette bibliothèque!
