Yew

Yew is a modern Rust framework inspired by Elm and ReactJS.

Cutting Edge technologies

Rust to WASM compilation

This framework designed to be compiled into modern browsers' runtimes: wasm, asm.js, emscripten.

Clean MVC approach inspired by Elm

structModel{}enumMsg{DoIt,}fnupdate(_:&mutContext<Msg>,model:&mutModel,msg:Msg){match msg {Msg::DoIt => {// Update your model on events}}}fnview(model:&Model) -> Html<Msg>{html!{// Render your model here
<button onclick=|_| Msg::DoIt,>{"Click me!"}</button>
}}

VirtualDOM

Yew framework uses own virtual-dom representation.

JSX-like templates with html! macro

Put pure Rust code into HTML tags.

html!{
<section class="todoapp",>
<header class="header",>
<h1>{"todos"}</h1>
{ view_input(&model)}
</header>
<section class="main",>
<input class="toggle-all",type="checkbox",
checked=model.is_all_completed(),
onclick=|_| Msg::ToggleAll, />
{ view_entries(&model)}
</section>
</section>
}

Rust/JS/C-style comments in templates

Use single-line or multi-line Rust comments inside html-templates.

html!{
<section>
/* Write some ideas * in multiline comments */
<p>{"and tags could be placed between comments!"}</p>
// <li>{ "or single-line comments" }</li>
</section>
}

Pure Rust expressions inside

externcrate chrono;use chrono::prelude::*;fnview(model:&Model) -> Html<Msg>{html!{
<p>{Local::now()}</p>
}}

Services

Pluggable services that allow you to call external APIs like: JavaScript alerts, timeout, storage, fetches and websockets. It's a handy alternative to subscriptions.

Implemented:

• IntervalService
• TimeoutService
• StorageService
• AlertService
• FetchService
• WebSocketService

Important! Services feature is experimental and will be improved soon: allow services composition, better to develop third-party services in crates.

use yew::services::timeout::TimeoutService;fnupdate(context:&mutContext<Msg>,model:&mutModel,msg:Msg){match msg {Msg::Fire => {
context.timeout(Duration::from_secs(5), || Msg::Timeout);}Msg::Timeout => {println!("Timeout!");}}}

Easy-to-use data conversion and destructuring

You could simply choose and use a format of data to store/send and resore/receive it.

Supported: JSON

In development: BSON, TOML, YAML, XML

#[derive(Serialize,Deserialize)]structClient{first_name:String,last_name:String,}structModel{clients:Vec<Client>,}fn update(context:&mutContext<Msg>,model:&mutModel,msg:Msg){match msg {Msg::Store => {// Stores it, but in JSON format/layout
context.store_value(Scope::Local,KEY,Json(&model.clients));}Msg::Restore => {// Tries to read and destructure it as JSON formatted dataifletJson(Ok(clients)) = context.restore_value(Scope::Local,KEY){
model.clients = clients;}}}

Running the examples

Clone or download this repository.

There are four examples to check how it works: counter, timer, todomvc, game_of_life, crm and dashboard.

To run them you need to have cargo-web installed as well as a suitable target for the Rust compiler to generate web output. By default cargo-web uses asmjs-unknown-emscripten. Install cargo-web and the asmjs emscripten target as follows:

$ cargo install cargo-web
$ rustup target add asmjs-unknown-emscripten

To start an example enter its directory start it with cargo-web:

$ cargo web start

To run an optimised build instead of a debug build use:

$ cargo web start --release