Back to Yew

JS with RS

website/versioned_docs/version-0.22/concepts/basic-web-technologies/js.mdx

0.18.01.4 KB
Original Source

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

Yew centrally operates on the idea of keeping everything that a reusable piece of UI may need in one place - rust files, while also keeping the underlying technology accessible where necessary.

As of today, WebAssembly is not feature-complete for DOM interactions. This means even in Yew we sometimes rely on calling JavaScript. What follows is an overview of the involved libraries.

wasm-bindgen

wasm-bindgen is a library and tool that bridges calls between JavaScript and Rust functions.

We highly recommend you take a look at their documentation and our quick guide.

web-sys

The web-sys crate provides bindings for Web APIs and allows us to write JavaScript code in a rustyfied and safe way.

Example:

<Tabs> <TabItem value="JS" label="JS">
js
let document = window.document
</TabItem> <TabItem value="RS" label="RS">
rust
use wasm_bindgen::UnwrapThrowExt;
use web_sys::window;

let document = window()
    .expect_throw("window is undefined")
    .document()
    .expect_throw("document is undefined");
</TabItem> </Tabs>

Once again we highly recommend you take a look at their documentation and our quick guide.