Yew는 ~Rust+wasm에서 시작한 웹 개발에서 React를 이긴다?

개시하다

나는 처음으로 투고한 일반과 고등학생이다.
Yew가 좋으니까 일본인 이용자가 늘었으면 좋겠어요.

이른바 Yew

https://github.com/yewstack/yew
Yew는 WebAssiembly를 사용하여 다중 스레드 웹 서비스 데스크를 제작할 수 있는 Rust 프레임워크입니다.

npm자산과 Rust/C자산의 상호 운용성

효율적인 가상 DOM 구현

JSX가 쓴 HTML 매크로

장점으로 삼다.

이른바 WebAssembly

WebAssembly는 브라우저에서 컴파일할 수 있는 저수준 언어입니다.JavaScript보다 빠르게 계산할 수 있습니다.
그리고 DOM의 호출은 매우 느리다(JS를 한 번 경유하기 위해), 네앞으로 더 빨라질 것 같아요..

왜 Rust?

Rust는 뛰어난 컴파일러와 시스템으로 더욱 안전한 코드 소유권을 쓸 수 있다.
Stack Overflow 조사에 따르면 5년 연속 가장 인기 있는 언어다.
WebAssiembly는 현재 GC가 없기 때문에 Rust처럼 GC가 없는 언어 파일의 크기가 작아집니다.

Yew 소개

온통 거짓말!웅대하다

Yew에는 JSX 같은 매크로가 있습니다.

struct Model {
    link: ComponentLink<Self>,
    value: i64,
}

//--------------------------実際はここにまだにあります----------------------

fn view(&self) -> Html {
    html! {
        <div>
            <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
            <p>{ self.value }</p>
        </div>
    }
}

web_sys

web_sys는 Rust에서 DOM을 만지는 데 사용되는 래치입니다.
기본적으로 Yew에서 DOM을 직접 만지지는 않지만 canvas 등을 사용할 때 유용하다.

use wasm_bindgen::prelude::*;
// エントリーポイント
#[wasm_bindgen(start)]
pub fn run() -> Result<(), JsValue> {
    let window = web_sys::window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");
    let body = document.body().expect("document should have a body");

    // 要素の作成
    let val = document.create_element("p")?;
    val.set_text_content("Hello from Rust!");

    body.append_child(&val)?;

    Ok(())
}

이 코드만 Hello from Rust입니다!탭

JavaScript~npm 자산으로 상속~

Rust의 크레인 wasmbindgen을 사용하여 JavaScript 사용 가능

function greet(text) {
	console.log(text);
}

#[wasm_bindgen(module = "/index.js")]
extern "C" {
	fn greet(text: String);
}

이렇게 하면 Rust에서greet 함수를 사용할 수 있다.
개인적으로 웹 세계에서 JS의 자산이 매우 크다고 생각합니다. 간단하지만 이런 기능이 있다면 너무 감사합니다.

Yew의 라이프 사이클

낮은 구성 요소에도 적용되기 때문에 데이터를 교환할 때 CallBack으로 건네드리겠습니다.

Vector 사용

Yew에서는 Vector에 놓인 물건을 균형기로 표시할 수 있습니다

fn view(&self) -> Html {
    let vegetable = vec!["Tomato".into(), "Strawberry".into(), "Onion".into()];
    html! {
        for vegetable.iter().map(|text|
        html! {
            {text.clone()}
            <br/>
        }
        );
    }
}

Tomato
Strawberry
Onion
대화 상자.
이 공식 강좌는 매우 이해하기 쉽다
https://yew.rs/docs/ja/getting-started/project-setup

기준

https://github.com/DenisKolodin/todomvc-perf-comparison/
이쪽 기준이 있어.속도 면에서는 그렇지만 당분간은 제목 회수다.하지만 리액트 자산을 사용할 수 없는 분들도 안심하세요.

기중기.

Reacty_yew

Yew에서 React의 구성 요소를 사용할 수 있는 크레인입니다.
써봤는데 쓸 수 있는 상태가 아니에요.저자는 이 프로젝트의 미래에 대한 기대가 크다고 적었기 때문에 적었다.
부디 정비하고 발전시켜 주십시오.

yew_form

yew_styles

JavaScript의 Yew 스타일 프레임에 의존하지 않습니다.
카드, 아이콘, 테이블, 볼륨 셀 등의 기본 구성 요소가 있습니다.

yew-bulma

Bulma CSS를 사용하는 Yew용 크레인입니다.

yewdux

Redux의 Yew 버전입니다.
공유 상태를 만들거나 local Storage를 사용하여 영구화할 수 있습니다.

yew-material

Yew 버전 소재 웹 구성 요소입니다.
사용 시 몇 가지 비결이 필요하다.

Trunk

위의 공식 페이지

wasm-pack build --target web --out-name wasm --out-dir ./static

컴파일링 및 서브 필요
Rust Trunk 도구를 사용하는 경우

trunk serve

면 완성되고 SCSS 등도 지원되기 때문에 개발에 용이합니다.
https://github.com/thedodd/trunk

최후

또 Yew에는 SSR fetchAPI 라우터 등도 있어 앞으로 기회가 된다면 쓰고 싶다.
Yew를 꼭 사용하십시오.
만약 오자 정정, 문제 등이 있으면 반드시 대답해 주십시오.