Frontend backend communication?

[strasdat]

Question

What are the best alternatives to communicate from front-end rust/yew to back-end rust? Somewhere I read that some folks use GraphQL. But I'm wondering whether there is a more direct, more rusty approach...

Am I just unaware of corresponding technology, or do we have to invent something?

[teymour-aldridge]

Sascha Grunert has published a project building a web application with Yew which uses the Cap'n Proto protocol for data transfer which is really neat.

Yew also provides a Fetch service and WebSocket service which you could send GraphQL queries using (or use to connect to a RESTful API).

[jstarry]

Yeah, I think it's on you to pick your transport protocol (http or ws), request protocol (jsonrpc, graphql, etc), and encoding (json, binary, capn proto). Yew has wrappers around fetch and WebSocket which could be used to build a request protocol but they aren't needed. Ideally the rust / wasm ecosystem evolves such that graphql, jsonrpc, etc client libraries support wasm targets by building on web-sys or other abstractions over the browser APIs.

For example, for work we've been exploring the use of https://github.com/google/tarpc which is pretty close to being able to build to wasm and makes it easy to provide your own transport (in our case websockets).

So, you may have to fork an existing client to get it working with wasm, I would be surprised if you had to write a totally new graphql client, but I'm not familiar with those rust projects.

[teymour-aldridge]

I'm working on a GraphQL client (still very early on in the process, but it looks like it might show some promise), which is something like a Relay or Apollo GraphQL clone. You might be interested in it.

[kellpossible]

Tarpc looks excellent, can't remember if it has wasm support yet.
I'm currently using websockets + serde + serde_json for a work project. Might swap out serde_json for something else later if it becomes a bottleneck, but it does make testing/debugging easy.
For an rpc framework, jsonrpc is pretty simple and could be implemented yourself if none of the existing rust libraries fit your needs.

[phiresky]

Since I had the same question and I couldn't really find any good examples: Here's a minimal example of a full stack code that does communication with the jsonrpc library, without any non-rust code (not even any schema specifications):

common/src/lib.rs:

//! defines the isomorphic code (common to both client and server)
use jsonrpc_derive::rpc;
use jsonrpc_core::{BoxFuture, Result};

#[rpc]
pub trait Rpc {
    /// Adds two numbers and returns a result
    #[rpc(name = "add")]
    fn add(&self, a: u64, b: u64) -> Result<u64>;

    /// Performs asynchronous operation
    #[rpc(name = "callAsync")]
    fn call(&self, a: u64) -> BoxFuture<Result<String>>;
}

pub use gen_client::Client as ApiClient;

frontend/src/main.rs:

use jsonrpc_core_client::transports::wasmhttp;
use yew::prelude::*;

pub async fn connect() -> common::ApiClient {
    let (client, receiver_task) = wasmhttp::connect::<common::ApiClient>("http://localhost:3030/")
        .await
        .expect("shouldn't fail");
    wasm_bindgen_futures::spawn_local(receiver_task);
    client
}

#[function_component(App)]
fn test_app() -> Html {
    let sum = use_state(|| 0);
    {
        let sum = sum.clone();
        use_effect_with_deps(
            move |_| {
                let videos = sum.clone();
                wasm_bindgen_futures::spawn_local(async move {
                    let client = connect().await; // todo: connect only once
                    videos.set(client.add(1, 2).await.expect("todo: handle"));
                });
                || ()
            },
            (),
        );
    }
    html! {
        <div>{"hello. result of 1 + 2 = "}{*sum}</div>
    }
}

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    log::info!("Hello, world!");
    yew::start_app::<App>();
}

backend/src/main.rs

use std::future;

use jsonrpc_core::{Result, BoxFuture};
use jsonrpc_http_server::ServerBuilder;
use common::Rpc;

struct RpcImpl;

// Server implementation
impl Rpc for RpcImpl {
    fn add(&self, a: u64, b: u64) -> Result<u64> {
        Ok(a + b)
    }

    fn call(&self, _: u64) -> BoxFuture<Result<String>> {
        Box::pin(future::ready(Ok("OK".to_owned())))
    }
}

fn main() {
	let mut io = jsonrpc_core::IoHandler::new();
	io.extend_with(RpcImpl.to_delegate());
	let server = ServerBuilder::new(io)
		.threads(3)
		.start_http(&"127.0.0.1:3030".parse().unwrap())
		.unwrap();

	server.wait();
}

then:

trunk serve frontend/index.html  # to run the client
cargo run --bin backend # to run the server

The only missing part is the http-wasm transport for jsonrpc, implemented here: paritytech/jsonrpc#668

[ranile]

Since I had the same question and I couldn't really find any good examples

The tutorial on yew.rs has a section about data fetching

[phiresky]

Yes, I based my example on that, but that doesn't say anything about typed communication with backends, just how to query a (untyped) rest api.

There's no information about how to communicate with a backend also written in Rust without losing type information or having to write boilerplate for every RPC method (on both sides).

[ranile]

I'm not familiar with RPC so I can't say much about that. With REST APIs, you can use any framework you want and structure your code as needed (such as how you did with 3 crates: frontend, backend, common). I don't see how any of this is Yew specific.

[phiresky]

Yes, it's not really yew specific at all, but there's not really any information anywhere about how to do this that I could find that's not yew related either ;).

I know yew is frontend-only, so the above is probably out of scope for the yew documentation. But there's not really any (finished) full-stack frameworks for Rust either - so my example is for if you want to have only Rust on the backend and on the frontend, with the most popular frontend library (yew) and a reasonably popular method for creating APIs (jsonrpc).

I'm not familiar with RPC

For my purpose here, there's no difference between an API and rpc calls. I just want the convenience of not having to deal with any "low-level" things like http methods, http response codes, error messages, serialization / deserialization.

[ranile]

I think this will be a good addition to the Yew community projects

[mustafasegf]

it would be nice to have something like https://trpc.io/

[lantos1618]

Has anyone done a implementation of
yew + rpc or grpc or capn proto?