mogwai

Mogwai

m inimal, o bvious, g raphical w eb a pplication i nterface

mogwai adalah perpustakaan tampilan untuk membuat aplikasi GUI. Ini ditulis dalam karat dan berjalan di browser Anda dan memiliki fungsi server yang cukup untuk melakukan rendering. Ini adalah alternatif untuk bereaksi, tulang punggung, bara, elm, purescript, dll.

• sasaran
• konsep
• contoh
• intro
• Mengapa
• awal
• buku masak
• lebih banyak contoh
• mensponsori proyek ini

sasaran

• Berikan pendekatan deklaratif untuk menciptakan dan mengelola node tampilan
• merangkum keadaan komponen dan menyusun komponen dengan mudah
• menjelaskan mutasi tampilan
• jadilah kecil dan cepat (alias tetap tajam)

konsep

Konsep utama di balik mogwai adalah

• tenggelam dan stream alih -alih panggilan balik

  Lihat acara seperti klik, mouseover, dll dikirim melalui aliran alih -alih meminta panggilan balik. Aliran dapat dipetakan, difilter dan dilipat.

• Tampilan widget bodoh

  Tampilan hanyalah sebuah struct yang bermutasi pohon UI setelah menerima pesan dari aliran. Tampilan dibangun dan bersarang menggunakan fungsi karat polos atau makro RSX.

• Widget Logic adalah satu atau lebih tugas async yang mengulangi pesan acara

  Widget menggunakan loop tugas asinkron yang menerima acara dari tampilan dan mengirim pembaruan ke tampilan sebagai tanggapan.

contoh

Berikut adalah contoh tombol yang menghitung berapa kali telah diklik:

 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>"
} ) ; 

perkenalan

Jika Anda tertarik untuk belajar lebih banyak - silakan baca pengantar dan dokumentasi.

Mengapa

• Tidak ada vdom yang berbeda membuat pembaruan tajam dan implementasinya minimal
• Logika async secara default
• Mutasi eksplisit
• ViewBuilder memungkinkan berjalan di beberapa platform (web, iOS, android, desktop, dll)

mogwai menggunakan aliran, wastafel, pembangun tampilan deklaratif dan logika async untuk mendefinisikan komponen dan bagaimana mereka berubah seiring waktu.

View Mutation bersifat eksplisit dan terjadi sebagai hasil dari tampilan yang menerima pesan, jadi tidak ada overhead kinerja dari vdom difing.

Jika Anda lebih suka gaya pemrograman fungsional dengan banyak peta dan lipatan - atau jika Anda ingin pergi ke Vroom! Maka mungkin mogwai tepat untuk Anda :)

Harap perlu diingat bahwa mogwai masih dalam Alpha dan API berubah secara aktif - PRS, masalah dan pertanyaan disambut. Pada rilis 0.6 kami berharap bahwa API akan relatif ke belakang kompatibel.

Dibuat untuk Rustaceans, oleh Rustacean

mogwai adalah perpustakaan Rust First. Tidak ada persyaratan bahwa Anda memiliki npm atau node . Mendapatkan proyek Anda dan berjalan tanpa menulis JavaScript apa pun cukup mudah.

Benchmarketing

mogwai Snappy! Berikut adalah beberapa metrik TODOMVC yang sangat tangan dan samar:

Oke - dimana saya mulai?

Pertama, Anda akan membutuhkan versi baru (ish) dari Rust Toolchain. Untuk itu Anda dapat mengunjungi https://rustup.rs/ dan ikuti instruksi instalasi.

Maka Anda akan membutuhkan wasm-pack.

Untuk memulai proyek Mogwai baru, kami akan menggunakan cargo-generate yang indah, yang dapat dipasang menggunakan cargo install cargo-generate .

Lalu jalankan

cargo generate --git https://github.com/schell/mogwai-template.git

dan berikan baris perintah nama proyek. Kemudian cd ke dalam proyek baru yang berkilau dan

wasm-pack build --target web

Kemudian, jika Anda belum memilikinya, cargo install basic-http-server atau menggunakan alternatif favorit Anda untuk melayani aplikasi Anda:

basic-http-server -a 127.0.0.1:8888

Selamat peretasan! ☕ ☕ ☕

buku masak

? Memasak dengan Mogwai adalah serangkaian solusi contoh untuk berbagai masalah UI. Ini bertujuan untuk menjadi dokumen referensi yang baik tetapi bukan tutorial langkah demi langkah.

Saluran grup ☎️

Nongkrong dan Bicara Tentang mogwai Di Saluran Dukungan:

• Tautan langsung ke aplikasi elemen
• Undangan https://matrix.to/#/!iabugogstxjnzlrcmw:matrix.org?via=matrix.org.

tolong lebih banyak contoh

Contoh dapat ditemukan di folder Contoh.

Untuk membangun contoh, gunakan:

wasm-pack build --target web examples/{the example}

Contoh eksternal tambahan meliputi:

• Mogwai-realworld A "Dunia Nyata" Implementasi Aplikasi (WIP)
• suite patokan
• Contoh Anda di sini;)

Sponsor

Harap pertimbangkan untuk mensponsori pengembangan perpustakaan ini!

• mensponsori saya di github