Today we’re going to create a starter website using Yew for Rust. This should take you about 20-30 minutes depending on the speed of your Internet connection and computer. At the outset you will have a website so bleeding edge you didn’t even feel the cut. Kind of like how Node developers didn’t see Deno coming…
To get started install or upgrade Rust. If you don’t have Rust installed, you can install it from the stable channel using the following command:
% rustup toolchain install stable
You should see output like:
Expand to view sample output
info: syncing channel updates for 'stable-x86_64-unknown-linux-gnu'
463.3 KiB / 463.3 KiB (100 %) 154.4 KiB/s in 5s ETA: 0s
info: latest update on 2020-05-07, rust version 1.43.1 (8d69840ab 2020-05-04)
info: downloading component 'cargo'
4.9 MiB / 4.9 MiB (100 %) 524.8 KiB/s in 19s ETA: 0s
info: downloading component 'clippy'
1.9 MiB / 1.9 MiB (100 %) 687.5 KiB/s in 3s ETA: 0s
info: downloading component 'rust-docs'
12.1 MiB / 12.1 MiB (100 %) 1.1 MiB/s in 15s ETA: 0s
info: downloading component 'rust-std'
17.5 MiB / 17.5 MiB (100 %) 711.3 KiB/s in 42s ETA: 0s
info: downloading component 'rustc'
60.0 MiB / 60.0 MiB (100 %) 783.2 KiB/s in 2m 17s ETA: 0s
info: downloading component 'rustfmt'
3.3 MiB / 3.3 MiB (100 %) 763.7 KiB/s in 5s ETA: 0s
info: installing component 'cargo'
4.9 MiB / 4.9 MiB (100 %) 3.0 MiB/s in 1s ETA: 0s
info: installing component 'clippy'
info: installing component 'rust-docs'
12.1 MiB / 12.1 MiB (100 %) 702.4 KiB/s in 11s ETA: 0s
info: installing component 'rust-std'
17.5 MiB / 17.5 MiB (100 %) 3.8 MiB/s in 4s ETA: 0s
info: installing component 'rustc'
60.0 MiB / 60.0 MiB (100 %) 3.0 MiB/s in 20s ETA: 0s
info: installing component 'rustfmt'
3.3 MiB / 3.3 MiB (100 %) 3.0 MiB/s in 1s ETA: 0s
stable-x86_64-unknown-linux-gnu installed - rustc 1.43.1 (8d69840ab 2020-05-04)
info: default toolchain set to 'stable-x86_64-unknown-linux-gnu'
Notice your default toolchain will also be set. This is necesary to run the
Wasm Build Tools required by Yew. If the command failed, install rustup first.
Next install wasm-pack as we’ll be using it for this tutorial:
% cargo install wasm-pack # Suggested for most users
% yay -S wasm-pack # Arch Linux users with Yay AUR helper
With crate installed use Yew’s Parcel template to create a new app:
% npm init yew-parcel yapp
You should see output like:
npx: installed 1 in 5.559s
Yew and parcel ready. Mucha locura Tzzzzz :)
Installed dependencies ✅
npm init yew-parcel yapp 67.59s user 29.95s system 61% cpu 2:38.46 total
Easy right? If you don’t see similar output, install or upgrade NPM CLI and try again. If you do, go ahead and run your new Yew-based Web application:
% cd yapp && npm i && npm start # Brrrr, buzz, woooshh
The above will download Node dependencies, build the Wasm and run an HTTP server. When it’s finished point a browser at http://localhost:1234 to view the result:
If you’re a Web developer, you’ve seen hundreds of similar pages while looking at new projects in search of the elusive Holy Grail. So what makes this one any different? First take a look at the Network panel in Dev Tools:
Notice the fetch request for the Wasm file. With caching disabled it requires 2.7 MB. On subsequent requests the file will be pulled from cache:
That’s significantly better. Now click the first document in the pane below the waterfall and you’ll see a familiar single-page app development paradigm:
Because there’s no body nothing will be rendered in the browser until the Wasm is finished loading, which reads in using the async/await syntax introduced in ES2015. What’s different is that the entire app is loaded as an
ES6 Module. As soon as the module resolves the app runs in the browser and takes over the DOM. And that’s just the tip of the iceburg.
Yew Parcel Template gives you:
- An streamlined way to start new apps
- Multi-threading with WebAssembly
- JSX-style templating syntax mixed with Rust
- TypeScript and Sass with hot-module reloading
- Built in router and development HTTP server
- Direct access to the Cargo package manager
- Parcel as an alternative to Webpack
And here’s a look at the project structure:
Bear in mind Yew is just one of several front-end frameworks for Rust. And Yew Parcel Template just one of several starters for Yew. Though this one feels the most promising out of the bunch. And now that you’ve got your hands on it why not spend a little more time kicking the tires? I know I will.
Very cool stuff. Thanks for template, Francisco!