DEV Community

Cover image for Let's Build a Rust Frontend with Yew - Part 1

Let's Build a Rust Frontend with Yew - Part 1

Ben Lovy on November 19, 2018

Wumpus Season In this post series we'll walk through recreating the classic Hunt the Wumpus game in Yew. The original was played at the...
Collapse
 
brotherbill profile image
Brother Bill Steinberg • Edited

Failed hitting the big button.
Replaced dependencies as displayed below.

conflicting implementations of traityew::Renderable` for type

The fix is to replace in Cargo.toml
[dependencies.yew]
git = "https://github.com/DenisKolodin/yew"

with
[dependencies.yew]
yew = "0.9.2"

Collapse
 
deciduously profile image
Ben Lovy

Yikes, sorry I missed this! Thanks for the fix, I definitely had some issues with Cargo versioning while writing this post. Glad the stable version number works, editing the post.

Collapse
 
palik profile image
Алексей Пастухов

These days yew doesn't recommend stdweb.

We recommend using web-sys due to its support from the Rust / Wasm Working Group.

I slightly modified your code to be able to build it with wasm-pack

Collapse
 
lysofdev profile image
Esteban Hernández

Great post! Do you know how WASM performance compares to JS frameworks like React?

Collapse
 
deciduously profile image
Ben Lovy • Edited

In benchmarks, it looks really good. This benchmark isn't perfect, though - it's a contrived example and the competitors are using outdated versions. There's some good discussion in this issue - including a benchmark where yew is among the slowest measured. It turns out in that first graph Yew was skipping outright some of the calculations that were clogging up the other numbers - both a point for Yew's optimizations and against the integrity of the benchmark.

The real-world story is complicated, in short. It's not a guaranteed speedup, but in a lot of cases will likely be faster than a line-for-line translation from React. The JS <-> WASM bridge is a work in progress - it's already made leaps and bounds since I started playing with Yew, but any time you cross the FFI boundary there is going to be overhead to contend with and the performance of any given app is somewhat unpredictable - there are a lot of variables.

For now, the best approach for maximum performance would be to stick to traditional frontend tools and isolate computationally heavy operations. You can abstract these hot code paths out to their own WASM modules, and organize so that there isn't a ton of data being passed back and forth. You are also able to interact with WASMs linear memory directly, pointer-style, which can avoid the need for serialization/deserialization - just place active data right on the "tape" and use it from either side. I took this approach in the dots demo - in ffi.rs you can see I'm returning raw pointers to memory locations, which I just access via arrays from index.js.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
jonhill24 profile image
Jon Hillesheim • Edited

Everything worked until I inserted the rollup.config.js file into my app & tried to run it with yarn prod

Collapse
 
deciduously profile image
Ben Lovy • Edited

Ah, thanks for catching this! A dependency went out of date. I'm pushing fixed versions to the repo, for now you can use these deps, it worked for me now:

"devDependencies": {
  "@babel/core": "^7.4.5",
  "@babel/preset-env": "^7.4.5",
  "autoprefixer": "^9.6.0",
  "node-sass": "^4.12.0",
  "nodemon": "^1.19.1",
  "npm-run-all": "^4.1.5",
  "postcss": "^7.0.17",
  "postcss-cli": "^6.1.2",
  "rollup": "^1.15.6",
  "rollup-plugin-babel": "^4.3.2",
  "rollup-plugin-postcss": "^2.0.3",
  "rollup-plugin-uglify": "^6.0.2",
  "rollup-plugin-wasm": "^3.0.0",
  "serve": "^11.0.2"
}

I'll update the post too.

Unless your problem wasnt

Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
$ cp target/deploy/hunt.css release/ && cp target/deploy/hunt.wasm release/ && cp target/deploy/index.html release/ && cp target/deploy/favicon.ico release/
cp: cannot stat 'target/deploy/hunt.css': No such file or directory
error Command failed with exit code 1.

Was it something else?