sauron
0.40.0
Sauron adalah kerangka kerja web yang serba guna dan perpustakaan untuk membangun aplikasi web sisi klien dan/atau server dengan fokus kuat pada ergonomi, kesederhanaan, dan keanggunan. Ini memungkinkan Anda untuk menulis jumlah kode yang paling sedikit, dan lebih fokus pada logika bisnis daripada detail dalam kerangka kerja.
Sauron terinspirasi oleh Elm-Lang dan mengikuti arsitektur ELM.
Dalam aplikasi Sauron, hanya ada model, tampilan dan pembaruan. Model ini adalah status aplikasi Anda. Tampilan menjelaskan cara menyajikan model kepada pengguna. Fungsi pembaruan menjelaskan cara memperbarui model, ini menggunakan pesan yang berisi data yang diperlukan untuk memperbarui model.
Di src/lib.rs Anda
use sauron :: {
html :: text , html :: units :: px , jss , node , wasm_bindgen , Application , Cmd , Node , Program ,
} ;
enum Msg {
Increment ,
Decrement ,
Reset ,
}
struct App {
count : i32 ,
}
impl App {
fn new ( ) -> Self {
App { count : 0 }
}
}
impl Application for App {
type MSG = Msg ;
fn view ( & self ) -> Node < Msg > {
node ! {
<main>
<input type = "button"
value= "+"
on_click=|_| {
Msg :: Increment
}
/>
<button class= "count" on_click=|_| { Msg :: Reset } > { text ( self . count ) } </button>
<input type = "button"
value= "-"
on_click=|_| {
Msg :: Decrement
}
/>
</main>
}
}
fn update ( & mut self , msg : Msg ) -> Cmd < Msg > {
match msg {
Msg :: Increment => self . count += 1 ,
Msg :: Decrement => self . count -= 1 ,
Msg :: Reset => self . count = 0 ,
}
Cmd :: none ( )
}
fn stylesheet ( ) -> Vec < String > {
vec ! [ jss! {
"body" : {
font_family : "verdana, arial, monospace" ,
} ,
"main" : {
width : px ( 30 ) ,
height : px ( 100 ) ,
margin : "auto" ,
text_align : "center" ,
} ,
"input, .count" : {
font_size : px ( 40 ) ,
padding : px ( 30 ) ,
margin : px ( 30 ) ,
}
} ]
}
}
# [ wasm_bindgen ( start ) ]
pub fn start ( ) {
Program :: mount_to_body ( App :: new ( ) ) ;
} index.html
<!doctype html >
< html >
< head >
< meta content =" text/html;charset=utf-8 " http-equiv =" Content-Type " />
< title > Counter </ title >
< script type = module >
import init from './pkg/counter.js' ;
await init ( ) . catch ( console . error ) ;
</ script >
</ head >
< body >
</ body >
</ html > Di Cargo.toml , tentukan tipe peti menjadi cdylib
[ package ]
name = " counter "
version = " 0.1.0 "
edition = " 2021 "
[ lib ]
crate-type = [ " cdylib " ]
[ dependencies ]
sauron = " 0.61.0 " cargo install wasm-pack
cargo install basic-http-serverBangun menggunakan
wasm-pack build --target web --releaseSajikan menggunakan
basic-http-server -a 0.0.0.0:4000Kemudian arahkan ke http: // localhost: 4000
Pergilah ke getting-started.md untuk tutorial lengkap.
Untuk detail lebih lanjut tentang perintah untuk membangun dan melayani, lihat contoh -contoh tentang repo ini, masing -masing memiliki skrip tentang cara membangun dan menjalankannya.
Lisensi: MIT
