mogwai
v0.6.8 Copy on write element names
m inimal, o bvious, g raphical w e a pplication i nterface
mogwai 는 GUI 애플리케이션을 만드는 뷰 라이브러리입니다. Rust로 작성되었으며 브라우저에서 실행되며 렌더링을 수행하기에 충분한 기능 서버 측이 있습니다. React, Backbone, Ember, Elm, Purescript 등의 대안입니다.
mogwai 의 주요 개념은입니다
콜백 대신 가라 앉고 스트림
클릭, 마우스 오버 등과 같은 이벤트보기 등은 콜백을 호출하는 대신 스트림을 통해 전송됩니다. 스트림은 매핑, 여과 및 접을 수 있습니다.
위젯 뷰는 바보입니다
보기는 스트림에서 메시지를받은 후 UI 트리를 돌연변이하는 구조물 일뿐입니다. 뷰는 일반 녹 기능 또는 RSX 매크로를 사용하여 구성 및 중첩됩니다.
위젯 로직은 이벤트 메시지를 통해 루프하는 하나 이상의 비동기 작업입니다.
위젯은보기에서 이벤트를 수신하고 응답으로 뷰로 업데이트를 보낸 비동기적인 작업 루프를 사용합니다.
다음은 클릭 한 횟수를 계산하는 버튼의 예입니다.
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 여러 플랫폼 (웹, iOS, Android, 데스크탑 등)에서 실행할 수 있습니다. mogwai 스트림, 싱크, 선언적 뷰 빌더 및 비동기 논리를 사용하여 구성 요소를 정의하고 시간이 지남에 따라 변하는 방법을 정의합니다.
뷰 돌연변이는 명시 적이며 뷰가 메시지를 수신 한 결과 발생하므로 vdom diffing의 성능 오버 헤드가 없습니다.
맵과 주름이 많은 기능적 스타일의 프로그래밍을 선호하는 경우 - vroom으로 가려고한다면! 그렇다면 아마도 mogwai 당신에게 맞습니다 :)
mogwai 여전히 알파에 있으며 API가 적극적으로 변화하고 있습니다. PR, 문제 및 질문이 환영됩니다. 0.6 릴리스 기준으로 API는 상대적으로 거꾸로 호환 될 것으로 예상합니다.
mogwai 는 Rust First Library입니다. npm 또는 node 있어야 할 필요가 없습니다. JavaScript를 작성하지 않고 프로젝트를 시작하고 실행하는 것은 쉽습니다.
mogwai 는 Snappy입니다! 다음은 매우 핸드 웨이브와 Sketchy 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 명령 줄에 프로젝트 이름을 제공하십시오. 그런 다음 Sparkling New Project에 cd
wasm-pack build --target web 그런 다음 아직 가지고 있지 않으면 cargo install basic-http-server 좋아하는 대안을 사용하여 앱을 제공하십시오.
basic-http-server -a 127.0.0.1:8888행복한 해킹! ☕ ☕ ☕
? Mogwai로 요리하는 것은 다양한 UI 문제에 대한 일련의 예제 솔루션입니다. 좋은 참조 문서가되지만 단계별 자습서는 아닙니다.
지원 채널에서 mogwai 에 대해 놀고 이야기하십시오.
예제는 예제 폴더에서 찾을 수 있습니다.
예제를 구축하려면 사용합니다.
wasm-pack build --target web examples/{the example}추가 외부 예제에는 다음이 포함됩니다.
이 도서관의 개발을 후원하는 것을 고려하십시오!
