Please check the build logs for more information.
See Builds for ideas on how to fix a failed build, or Metadata for how to configure docs.rs builds.
If you believe this is docs.rs' fault, open an issue.
Yew
Yew is a modern Rust framework inspired by Elm and ReactJS.
Cutting Edge technologies
Rust to WASM compilation
This framework is designed to be compiled into modern browsers' runtimes: wasm, asm.js, emscripten.
To prepare the developments environment use installation instruction here: wasm-and-rust
Clean MVC approach inspired by Elm and Redux
Yew implements strict application state management based on message passing and updates:
src/main.rs
extern crate yew;
use *;
type Context = ;
Predictable mutability and lifetimes (thanks Rust) make it possible to reuse a single instance of the model without needing to create a fresh one every update. It helps reduce memory allocations.
JSX-like templates with html!
macro
Feel free to put pure Rust code into HTML tags with all the compiler's and borrow checker benefits.
html!
Components
Yew supports components! You can create a new one by implementing a Component
trait
and including it directly into the html!
template:
html!
Scopes
Components lives in Angular-like scopes with parent-to-child (properties) and child-to-parent (events) interaction.
Properties also are pure Rust types with strict checking during compilation.
html!
Fragments
Yew supports fragments: elements without a parent which could be attached somewhere later.
html!
Virtual DOM, independent loops, fine updates
Yew framework uses its own virtual-dom representation. It updates the browser's DOM
with tiny patches when properties of elements had changed. Every component lives
in its own independent loop, interacts with the environment (Scope
) by messages passing
and supports fine control of rendering.
The ShouldRender
return value informs the loop when the component should be re-rendered:
It's more effective than comparing the model after every update, because not every model change leads to a view update. It lets us skip model comparison checks entirely. You can control updates very accurately.
Rust/JS/C-style comments in templates
Use single-line or multi-line Rust comments inside html-templates.
html!
Third-party crates and pure Rust expressions inside
You can use external crates and put values from them into the template:
extern crate chrono;
use *;
Some crates don't support the true wasm target (
wasm32-unknown-unknown
) yet.
Services
Yew has implemented pluggable services that allow you to call external APIs, such as: JavaScript alerts, timeout, storage, fetches and websockets. It's a handy alternative to subscriptions.
Implemented:
IntervalService
TimeoutService
StorageService
DialogService
FetchService
WebSocketService
use ConsoleService;
use TimeoutService;
Can't find an essential service? Want to use library from npm
?
You can reuse JavaScript
libraries with stdweb
capabilities and create
your own service implementation. Here's an example below of how to wrap the
ccxt library:
;
Easy-to-use data conversion and destructuring
Yew allows for serialization (store/send and restore/recieve) formats.
Implemented: JSON
In development: BSON
, TOML
, YAML
, XML
use Json;
Development setup
Clone or download this repository.
Add necessary targets to your compiler:
$ rustup target add wasm32-unknown-emscripten
We used
wasm32-unknown-emscripten
target here, because not every crate could be compiled to the purewasm32-unknown-unknown
target. But the crates still improving and you can do it soon.
To build this project you need to have cargo-web installed:
$ cargo install cargo-web
Add
--force
option to ensure the latest version.
Build
$ cargo web build
Running Tests
$ ./ci/run_tests.sh
Running the examples
There are many examples that show how the framework works: counter, crm, custom_components, dashboard, fragments, game_of_life, mount_point, npm_and_rest, timer, todomvc, two_apps.
To start an example enter its directory and start it with cargo-web:
$ cargo web start
To run an optimised build instead of a debug build use:
$ cargo web start --release
Note: By default cargo-web
will use Emscripten to generate asm.js. You can also
compile to WebAssembly if you add either --target=wasm32-unknown-emscripten
or
--target=wasm32-unknown-unknown
, where the first one will use Emscripten and
the second one will use Rust's native WebAssembly backend (Rust nightly only!).