mogwai
v0.6.8 Copy on write element names
M INIMAL, O BVIUS, G RAPHICAL WEB UNA PLICACIÓN INTERFACIA
mogwai es una biblioteca de vista para crear aplicaciones GUI. Está escrito en óxido y se ejecuta en su navegador y tiene suficiente funcionalidad del lado del servidor para realizar la representación. Es una alternativa a React, Backbone, Ember, Elm, PureScript, etc.
Los principales conceptos detrás de mogwai son
sumideros y transmisiones en lugar de devoluciones de llamada
Ver eventos como Click, Mouseover, etc. se envían a través de transmisiones en lugar de invocar una devolución de llamada. Las transmisiones se pueden asignar, filtrar y doblar.
Las vistas de widget son tontas
Una vista es solo una estructura que muta el árbol de la interfaz de usuario después de recibir un mensaje de una transmisión. Las vistas se construyen y anidan utilizando funciones de óxido liso o una macro RSX.
La lógica de widget es una o más tareas de asíncrono que pasan por los mensajes de eventos
Los widgets usan bucles de tareas asíncronos que reciben eventos desde la vista y envían actualizaciones a la vista en respuesta.
Aquí hay un ejemplo de un botón que cuenta la cantidad de veces que se ha hecho clic:
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 está interesado en aprender más, lea la introducción y la documentación.
ViewBuilder permite ejecutar múltiples plataformas (web, iOS, Android, escritorio, etc.) mogwai usa transmisiones, sumideros, un constructor de vista declarativo y lógica de asíncrono para definir componentes y cómo cambian con el tiempo.
La mutación de la vista es explícita y ocurre como resultado de las vistas que reciben mensajes, por lo que no hay una sobrecarga de rendimiento de VDOME DIFING.
Si prefiere un estilo funcional de programación con muchos mapas y pliegues, ¡o si está buscando ir a Vroom! Entonces tal vez mogwai sea adecuado para ti :)
Tenga en cuenta que mogwai todavía está en alfa y la API está cambiando activamente: los PRS, los problemas y las preguntas son bienvenidos. A partir de la versión 0.6 , esperamos que la API sea relativamente compatible con versiones anteriores.
mogwai es una primera biblioteca de óxido. No hay requisito de que tenga npm o node . Poner en funcionamiento su proyecto sin escribir JavaScript es bastante fácil.
mogwai es ágil! Aquí hay algunas métricas muy onduladas y incompletas de ToDomvc:
Primero necesitará una nueva versión (ISH) de la cadena de herramientas de Rust. Para eso, puede visitar https://rustup.rs/ y seguir las instrucciones de instalación.
Entonces necesitarás Wasm-Pack.
Para comenzar un nuevo proyecto de Mogwai, utilizaremos el maravilloso cargo-generate , que se puede instalar utilizando cargo install cargo-generate .
Luego corre
cargo generate --git https://github.com/schell/mogwai-template.git y darle a la línea de comando un nombre de proyecto. Luego cd en su nuevo proyecto brillante y
wasm-pack build --target web Luego, si aún no lo tiene, cargo install basic-http-server o use su alternativa favorita para servir a su aplicación:
basic-http-server -a 127.0.0.1:8888¡Feliz piratería! ☕ ☕ ☕
? Cocinar con Mogwai es una serie de soluciones de ejemplo a varios problemas de IU. Su objetivo es ser un buen documento de referencia, pero no un tutorial paso a paso.
Pasar el rato y hablar sobre mogwai en el canal de soporte:
Se pueden encontrar ejemplos en la carpeta de ejemplos.
Para construir los ejemplos, uso:
wasm-pack build --target web examples/{the example}Ejemplos externos adicionales incluyen:
¡Considere patrocinar el desarrollo de esta biblioteca!
