mogwai
v0.6.8 Copy on write element names
m inimal, ó bvious, G Raphical w eb a pplication iNterface
mogwai é uma biblioteca de visualização para criar aplicativos da GUI. Está escrito em ferrugem e é executado no seu navegador e tem o lado de funcionalidade suficiente para fazer a renderização. É uma alternativa a reagir, espinha dorsal, brasa, olmo, risco, etc.
Os principais conceitos por trás de mogwai são
afunda e riachos em vez de retornos de chamada
Veja eventos como clique, mouseover, etc são enviados através de fluxos em vez de invocar um retorno de chamada. Os fluxos podem ser mapeados, filtrados e dobrados.
As visualizações de widgets são burras
Uma visualização é apenas uma estrutura que se afasta da árvore da interface do usuário depois de receber uma mensagem de um fluxo. As vistas são construídas e aninhadas usando funções de ferrugem simples ou uma macro RSX.
A lógica do widget é uma ou mais tarefas assíncronas que atravessam as mensagens de evento
Os widgets usam loops de tarefas assíncronos que recebem eventos da visualização e enviam atualizações para a exibição em resposta.
Aqui está um exemplo de um botão que conta o número de vezes que foi clicado:
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>"
} ) ; Se você estiver interessado em aprender mais - leia a introdução e a documentação.
ViewBuilder permite executar em várias plataformas (Web, iOS, Android, desktop, etc) mogwai usa fluxos, pia, um construtor de visualizações declarativas e lógica assíncrona para definir componentes e como eles mudam com o tempo.
A mutação da visualização é explícita e acontece como resultado de visualizações que recebem mensagens; portanto, não há sobrecarga de desempenho da difusão do VDOM.
Se você preferir um estilo funcional de programação com muitos mapas e dobras - ou se estiver procurando ir ao Vroom! Então talvez mogwai seja adequado para você :)
Lembre -se de que mogwai ainda está em Alpha e a API está mudando ativamente - PRs, problemas e perguntas são bem -vindos. A partir da versão 0.6 , esperamos que a API seja relativamente compatível com o atraso.
mogwai é uma primeira biblioteca de ferrugem. Não há exigência de que você tenha npm ou node . Colocar seu projeto em funcionamento sem escrever nenhum JavaScript é fácil o suficiente.
mogwai é rápido! Aqui estão algumas métricas de onda de mão e esboços de ToDomvc:
Primeiro, você precisará de uma nova versão (ish) da Chain de ferramentas Rust. Para isso, você pode visitar https://rustup.rs/ e seguir as instruções de instalação.
Então você precisará do wasmm-pack.
Para iniciar um novo projeto Mogwai, usaremos o maravilhoso cargo-generate , que pode ser instalado usando cargo install cargo-generate .
Em seguida, corra
cargo generate --git https://github.com/schell/mogwai-template.git e dê à linha de comando um nome de projeto. Em seguida, cd em seu novo projeto brilhante e
wasm-pack build --target web Então, se você ainda não o possui, cargo install basic-http-server ou use sua alternativa favorita para servir seu aplicativo:
basic-http-server -a 127.0.0.1:8888Feliz hacking! ☕ ☕ ☕
? Cozinhar com Mogwai é uma série de soluções de exemplo para vários problemas de interface do usuário. O objetivo é ser um bom documento de referência, mas não um tutorial passo a passo.
Sair e falar sobre mogwai no canal de suporte:
Exemplos podem ser encontrados na pasta Exemplos.
Para construir os exemplos de uso:
wasm-pack build --target web examples/{the example}Exemplos externos adicionais incluem:
Por favor, considere patrocinar o desenvolvimento desta biblioteca!
