96

Percy – A Rust and WebAssembly isomorphic virtual dom implementation

 6 years ago
source link: https://www.tuicool.com/articles/hit/AZ7NnaQ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client 
A modular toolkit for building isomorphic web apps with Rust + WebAssembly

The tools:

  • virtual-dom-rs

  • inline-stylesheets <- WIP

Initial Background / Motivation

I started using Rust in January 2018 and quickly got to the stage of "I REALLY want to use this for everything, even if it isn't the best tool for the job."

I need to make a website for a game that I'm working on, but the Rust ecosystem for frontend web apps with server side rendering is still very immature.

So I started working on a standalone virtual-dom implementation that could render to an HTML string on the server side and to a DOM element in the browser.

But then I realized that I wanted something similar to sheetify .. And probably a couple other base web dev primitives too..

So I decided to make a cargo workspace with the tools that I needed to build isomorphic web apps in Rust. And here we are!

Getting Started

For an example of an isomorphic web app in Rust check out the isomorphic example

For more on the html! macro see html macro 

#[macro_use]
extern crate virtual_dom_rs;

fn main () {
  let count = Rc::new(Cell::new(0));

  let count_clone = Rc::clone(count);

  let html = html! {
    <div id="hello-world",>
      <button
        !onclick=|| { count_clone.set(count_clone.get() + 1); },
      >
        Click Me!
      </button>
      { "This becomes a text node" }
    </div>
  };

  println!("{}", html.to_string());
}

Running the example isomorphic web app locally

git clone https://github.com/chinedufn/percy
cd percy
./examples/isomorphic/start.sh

Now visit http://127.0.0.1:7878 !

Contributing

Please open issues / PRs explaining your intended use case and let's see if we should or shouldn't make percy support it!

Also feel free to open issues and PRs with any questions / thoughts that you have!

To test

TODO... make this a script so that we can run the JSDOM tests also

cargo test --all

See Also

License

MIT


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK