Rust+WebAssembly의 프런트 엔드 프레임워크인 Yew이라는 녀석이 궁금했다. 요전날 공식 리포지토리의 todomvc example을 움직이려고 하면 아직도 여러가지 개발도상하게 셋업으로 빠져서 4시간 정도 낭비했으므로, 그것을 정리해 15분 정도로 맛볼 수 있는 상태로 한 메모.


Yew의 어원은 여기 https://ko.wikipedia.org/wiki/이치이

rustup을 넣는다.

htps : // / s p. rs/ ← 이 페이지에 적힌 순서로 인스톨 한다. 설치 중에 뭔가를 묻는다면 Proceed with installation (default) 인 것을 선택하십시오. 또한 설치 중에 나오는 절차에 따라 환경 변수의 경로를 설정합니다. homebrew라든지라도 들어가는 것 같지만, 개인적으로 사용한 적이 없는 것과 아마 해설의 분기가 늘어나므로 이번은 사용하지 않는다.

rustup는 rust 공식이 만들고 있는 rbenv라든지 nodenv 같은 녀석으로, 지금의 곳 디팩트 스탠다드.

cargo web 설치

웹 개발용의 여러가지를 자동으로 해 주는 툴. 개발이 활발하고 불안정한 생각이 들기 때문에 버전을 고정하고 있다.

cargo install --version 0.6.14 cargo-web

Yew 리포지토리를 복제하고 확인 된 버전의 todomvc example으로 이동

개발이 아직 활발하기 때문에 동작 확인된 버전을 체크아웃한다.

git clone https://github.com/DenisKolodin/yew.git
cd yew
git checkout f077a9a0323dbda2335375ae97954366733396a5 -b master20180715
cd examples/todomvc

컴파일러 설치

WASM 출력은 아직 안정판 컴파일러에서는 사용할 수 없기 때문에 개발판 컴파일러를 넣는다. 개발판 컴파일러는 가끔 망가지므로 버전으로 동작 확인한 날짜를 지정한다.

emscripten을 사용하면 안정판 컴파일러에서도 움직이지만, emscripten 자체의 설치가 번거롭고 컴파일 시간을 맛보기에는 꽤 힘들기 때문에 이번에는 패스

rustup install nightly-2018-07-14

todomvc example 이동

아래의 명령을 실행하여 성공하면 개발 서버가 일어나 브라우저가 열립니다. 브라우저의 자동 리로드도 유효하게 된다.

cargo +nightly-2018-07-14 web start --open --auto-reload --target=wasm32-unknown-unknown

덧붙여서 --target=wasm32-unknown-unknown 를 붙이지 않으면 emscripten을 사용한 빌드가 된다. 또, Web.toml 라고 하는 설정 파일을 쓰면 긴 옵션은 생략할 수 있게 되는 생각이 든다.

소스를 만지다

src 디렉토리 내에 소스가 있으므로 놀아 보자. jsx적인 기법이 있었고 엉망이었습니다.



webpack이라든지와 제휴하거나 wasm을 minify 하는지의 여부는 미조사입니다.