mogwai
v0.6.8 Copy on write element names
m inimal, o bvious, g raphical w eb a pplication i nterface
mogwai เป็นห้องสมุดมุมมองสำหรับการสร้างแอปพลิเคชัน GUI มันถูกเขียนขึ้นในสนิมและทำงานในเบราว์เซอร์ของคุณและมีเซิร์ฟเวอร์ฟังก์ชั่นเพียงพอที่จะทำการเรนเดอร์ มันเป็นทางเลือกในการตอบสนอง, กระดูกสันหลัง, Ember, Elm, Purescript ฯลฯ
แนวคิดหลักที่อยู่เบื้องหลัง mogwai คือ
จมและสตรีมแทนการโทรกลับ
ดูเหตุการณ์เช่นคลิก MouseOver ฯลฯ จะถูกส่งผ่านสตรีมแทนการเรียกโทรกลับ สตรีมสามารถแมปกรองและพับได้
มุมมองวิดเจ็ตเป็นใบ้
มุมมองเป็นเพียงโครงสร้างที่กลายพันธุ์ต้นไม้ UI หลังจากได้รับข้อความจากสตรีม มุมมองถูกสร้างขึ้นและซ้อนกันโดยใช้ฟังก์ชั่นสนิมธรรมดาหรือมาโคร RSX
Widget Logic เป็นหนึ่งงาน async ที่วนซ้ำผ่านข้อความเหตุการณ์
วิดเจ็ตใช้ลูปงานแบบอะซิงโครนัสที่ได้รับเหตุการณ์จากมุมมองและส่งการอัปเดตไปยังมุมมองในการตอบสนอง
นี่คือตัวอย่างของปุ่มที่นับจำนวนครั้งที่ถูกคลิก:
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 ใช้สตรีมอ่างล้างมือผู้สร้างมุมมองที่ประกาศและตรรกะ Async เพื่อกำหนดส่วนประกอบและวิธีการเปลี่ยนแปลงตลอดเวลา
ดูการกลายพันธุ์นั้นชัดเจนและเกิดขึ้นจากมุมมองที่ได้รับข้อความดังนั้นจึงไม่มีค่าใช้จ่ายใด ๆ จากการกระจาย VDOM
หากคุณต้องการรูปแบบการทำงานของการเขียนโปรแกรมที่มีแผนที่และพับมากมาย - หรือถ้าคุณกำลังมองหา Vroom! แล้วบางที mogwai ก็เหมาะกับคุณ :)
โปรดทราบว่า mogwai ยังคงอยู่ในอัลฟ่าและ API กำลังเปลี่ยนแปลงอย่างแข็งขัน - PRS ปัญหาและคำถามได้รับการต้อนรับ จากการเปิดตัว 0.6 เราคาดหวังว่า API จะเข้ากันได้ค่อนข้างย้อนหลัง
mogwai เป็นห้องสมุดแรกที่เป็นสนิม ไม่มีข้อกำหนดที่คุณมี npm หรือ node การทำให้โครงการของคุณทำงานโดยไม่ต้องเขียน JavaScript ใด ๆ ก็ง่ายพอ
mogwai เร็ว! นี่คือตัวชี้วัด TODOMVC ที่มี handwavey และ sketchy มาก:
ก่อนอื่นคุณจะต้องมีเวอร์ชันใหม่ (ish) ของ Rust Toolchain เพื่อที่คุณสามารถเยี่ยมชม https://rustup.rs/ และทำตามคำแนะนำการติดตั้ง
จากนั้นคุณจะต้องใช้ wasm-pack
สำหรับการเริ่มต้นโครงการ Mogwai ใหม่เราจะใช้ cargo-generate ที่ยอดเยี่ยมซึ่งสามารถติดตั้งได้โดยใช้ cargo install cargo-generate
จากนั้นวิ่ง
cargo generate --git https://github.com/schell/mogwai-template.git และให้ชื่อโครงการบรรทัดคำสั่ง จากนั้น 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}ตัวอย่างภายนอกเพิ่มเติม ได้แก่ :
โปรดพิจารณาสนับสนุนการพัฒนาห้องสมุดนี้!
