percy Download - ดาวน์โหลดซอร์สโค้ด percy

เพอร์ซี่

สร้างแอพเบราว์เซอร์ส่วนหน้าด้วย Rust + WebAssembly รองรับการแสดงผลด้านเซิร์ฟเวอร์

หนังสือเพอร์ซี่

readme นี้ให้การแนะนำเบา ๆ แก่เพอร์ซี่ ตรวจสอบหนังสือเพอร์ซี่เพื่อเดินผ่านเต็ม

สนิมที่มั่นคง

Percy รวบรวมการเกิดสนิมที่มั่นคงด้วยข้อแม้เดียว:

ในการเกิดสนิมทุกคืนคุณสามารถสร้างโหนดข้อความได้โดยไม่ต้องมีคำพูด

 // Nightly Rust does not require quotes around text nodes.
html ! { <div> My text nodes here </div> } ;

ในการเกิดสนิมที่มั่นคงจำเป็นต้องมีเครื่องหมายใบเสนอราคา

 // Stable Rust requires quotes around text nodes.
html ! { <div> { "My text nodes here " } </div> } ;

ความแตกต่างนี้จะหายไปเมื่อสถานที่ขยายมีความเสถียรใน Rust Compiler - ปัญหาการติดตามสนิม

เริ่มต้น

วิธีที่ดีที่สุดในการเร่งความเร็วคือการตรวจสอบหนังสือเพอร์ซี่ แต่นี่เป็นตัวอย่างพื้นฐานที่ทำให้เท้าของคุณเปียกด้วย

Quickstart - ทำให้เท้าเปียก

เพอร์ซี่ช่วยให้คุณสร้างแอปพลิเคชันที่มีการเรนเดอร์ด้านเซิร์ฟเวอร์เฉพาะการเรนเดอร์ด้านไคลเอ็นต์หรือทั้งเซิร์ฟเวอร์และการเรนเดอร์ฝั่งไคลเอ็นต์

นี่คือตัวอย่างการทำงานที่รวดเร็วและง่ายดายของการแสดงผลด้านลูกค้าที่คุณสามารถลองได้ทันที:

ก่อนอื่นสร้างโครงการใหม่โดยใช้

cargo new client-side-web-app --lib
cd client-side-web-app

เพิ่มไฟล์ต่อไปนี้ในโครงการของคุณ

touch build.sh
touch index.html
touch app.css

นี่คือโครงสร้างไดเรกทอรี:

 .
├── Cargo.toml
├── build.sh
├── index.html
├── app.css
└── src
    └── lib.rs

ตอนนี้แก้ไขแต่ละไฟล์ด้วยเนื้อหาต่อไปนี้:

 # contents of build.sh

#! /bin/bash

cd " $( dirname " $0 " ) "

mkdir -p public

cargo build --target wasm32-unknown-unknown
wasm-bindgen target/wasm32-unknown-unknown/debug/client_side_web_app.wasm --no-typescript --target web --out-dir ./public --debug
cp index.html public/
cp app.css public/

 // contents of src/lib.rs

use wasm_bindgen :: prelude :: * ;
use web_sys ;

use percy_dom :: prelude :: * ;

# [ wasm_bindgen ]
struct App {
  pdom : PercyDom
}

# [ wasm_bindgen ]
impl App {
    # [ wasm_bindgen ( constructor ) ]
    pub fn new ( ) -> App {
        let start_view = html ! { <div> Hello </div> } ;

        let window = web_sys :: window ( ) . unwrap ( ) ;
        let document = window . document ( ) . unwrap ( ) ;
        let body = document . body ( ) . unwrap ( ) ;

        let mut pdom = PercyDom :: new_append_to_mount ( start_view , & body ) ;

        let greetings = "Hello, World!" ;

        let end_view = html ! {
           // Use regular Rust comments within your html
           <div class= [ "big" , "blue" ] >
              /* Interpolate values using braces */
              <strong> { greetings } </strong>

              <button
                class= "giant-button"
                onclick=|_event| {
                   web_sys :: console :: log_1 ( & "Button Clicked!" . into ( ) ) ;
                }
              >
                // No need to wrap text in quotation marks (:
                Click me and check your console
              </button>
           </div>
        } ;

        pdom . update ( end_view ) ;

        App { pdom }
    }
}

 # contents of Cargo.toml

[ package ]
name = " client-side-web-app "
version = " 0.1.0 "
authors = [ " Friends of Percy " ]
edition = " 2018 "

[ lib ]
crate-type = [ " cdylib " ] # Don't forget this!

[ dependencies ]
wasm-bindgen = " 0.2 "
js-sys = " 0.3 "
percy-dom = " 0.9 "

[ dependencies . web-sys ]
version = " 0.3 "
features = [
    " Document " ,
    " MouseEvent " ,
    " Window " ,
    " console "
]

 <!-- contents of index.html -->
<!DOCTYPE html >
< html lang =" en " >
    < head >
        < meta charset =" UTF-8 " >
        < meta name =" viewport " content =" width=device-width, initial-scale=1 " >
        < link rel =" stylesheet " type =" text/css " href =" app.css " />
        < title > Client Side Demo </ title >
    </ head >
    < body style =' margin: 0; padding: 0; width: 100%; height: 100%; ' >
        < script type =" module " >
            import init , { App } from '/client_side_web_app.js'
        
            async function run ( )  {
                await init ( '/client_side_web_app_bg.wasm' )
                new App ( )
            }
        
            run ( )
        </ script >
    </ body >
</ html >

 /* contents of app.css */
. big {
  font-size : 30 px ;
}
. blue {
  color : blue;
}
. giant-button {
  font-size : 24 px ;
  font-weight : bold;
}

ตอนนี้วิ่ง

 # Used to compile your Rust code to WebAssembly
cargo install wasm-bindgen-cli

# Or any other static file server that supports the application/wasm mime type
cargo install https

chmod +x ./build.sh
./build.sh

# Visit localhost:8080 in your browser
http ./public --port 8080

และคุณควรเห็นสิ่งต่อไปนี้:

ตัวอย่างฝั่งไคลเอ็นต์