mogwai
v0.6.8 Copy on write element names
m inimal、 o bvious、 g raphical w eb a pplication i nterface
mogwai 、GUIアプリケーションを作成するためのビューライブラリです。 Rustで書かれており、ブラウザで実行されており、レンダリングを行うのに十分な機能サーバー側を備えています。これは、React、Backbone、Ember、Elm、Purescriptなどの代替品です。
mogwai背後にある主な概念はです
コールバックの代わりにシンクとストリーム
クリック、マウスオーバーなどのイベントを表示すると、コールバックを呼び出す代わりにストリームから送信されます。ストリームは、マッピング、フィルタリング、折りたたみます。
ウィジェットビューは愚かです
ビューは、ストリームからメッセージを受け取った後にUIツリーを変異させる単なる構造体です。ビューは、単純な錆機能またはRSXマクロを使用して構築およびネストされています。
ウィジェットロジックは、イベントメッセージをループする1つ以上の非同期タスクです
ウィジェットは、ビューからイベントを受信する非同期タスクループを使用し、それに応じてビューに更新を送信します。
クリックされた回数をカウントするボタンの例は次のとおりです。
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>"
} ) ; もっと学ぶことに興味があるなら、紹介とドキュメントを読んでください。
ViewBuilder使用すると、複数のプラットフォーム（Web、iOS、Android、デスクトップなど）で実行できますmogwai 、ストリーム、シンク、宣言ビュービルダー、非同期ロジックを使用して、コンポーネントとそれらが時間の経過とともにどのように変化するかを定義します。
ビュー変異は明示的であり、メッセージを受信するビューの結果として発生するため、VDOM Diffingからのパフォーマンスオーバーヘッドはありません。
たくさんの地図と折りたたみを備えた機能的なスタイルのプログラミングを好む場合 - またはVroomに行きたい場合！それから多分mogwaiあなたにぴったりです:)
mogwaiはまだアルファにあり、APIは積極的に変化していることに注意してください。PR、問題、質問が歓迎されています。 0.6リリースの時点で、APIは比較的後方に互換性があると予想しています。
mogwaiはRust First Libraryです。 npmまたはnodeを持っているという要件はありません。 JavaScriptを作成せずにプロジェクトを稼働させるのは簡単です。
mogwaiはきびきびしています！ここにいくつかの非常に手がかりと大ざっぱなtodomvcメトリックがあります：
まず、Rust Toolchainの新しい（ISH）バージョンが必要です。そのために、https：//rustup.rs/にアクセスして、インストール手順に従うことができます。
その後、wasm-packが必要です。
新しいMogwaiプロジェクトを開始するには、 cargo install cargo-generateを使用して設置できる素晴らしいcargo-generateを使用します。
その後、実行します
cargo generate --git https://github.com/schell/mogwai-template.gitコマンドラインにプロジェクト名を付けます。次に、Sparking New Projectにcdになります
wasm-pack build --target webその後、まだ持っていない場合は、 cargo install basic-http-serverか、お気に入りの代替品を使用してアプリを提供します。
basic-http-server -a 127.0.0.1:8888ハッピーハッキング！ ☕☕☕
？モグワイでの料理は、さまざまなUI問題の一連の例の解決策です。これは、段階的なチュートリアルではなく、優れたリファレンスドキュメントになることを目指しています。
サポートチャネルでmogwaiについてたむろして、次のことを話します。
例は、例フォルダーにあります。
例を作成するには：
wasm-pack build --target web examples/{the example}その他の外部例は次のとおりです。
このライブラリの開発を後援することを検討してください！
