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

```rust struct Model { }

enum Msg { DoIt, }

fn update(_: &mut Context, model: &mut Model, msg: Msg) { match msg { Msg::DoIt => { // Update your model on events } } }

fn view(model: &Model) -> Html { html! { // Render your model here } } ```

VirtualDOM

Yew framework uses own virtual-dom representation.

JSX-like templates with html! macro

Put pure Rust code into HTML tags.

rust 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.

rust 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

```rust extern crate chrono; use chrono::prelude::*;

fn view(model: &Model) -> Html { html! {

{ Local::now() }

} } ```

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.

```rust use yew::services::timeout::TimeoutService;

fn update(context: &mut Context, model: &mut Model, 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

```rust

[derive(Serialize, Deserialize)]

struct Client { firstname: String, lastname: String, }

struct Model { clients: Vec, }

fn update(context: &mut Context, model: &mut Model, msg: Msg) { match msg { Msg::Store => { // Stores it, but in JSON format/layout context.storevalue(Scope::Local, KEY, Json(&model.clients)); } Msg::Restore => { // Tries to read and destructure it as JSON formatted data if let Json(Ok(clients)) = context.restorevalue(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], [gameoflife], [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