Reactive UI Components in Rust

Building Reactive User Interfaces with Rust and WebAssembly

Component lifecycle — Comprised of a “view” node, pointing to and action node titled “JavaScript” with an arrow titled “user event.” The action node points to a “calculate” node with an arrow titled “pass data to rust.” The “calculate” node points to a “render” node, with an arrow titled “feed new state to render.” The render node points back to the “view” node with an arrow titled “inject new render”
Component Lifecycle

High Level

Code

Setup

npm init rust-webpack && npm run build && npm run start

View

form.rs with initial form initializer and template generator
index.html with a div#root element added
form.js calling the form initializer
index.js updated to import form.js
User form — titled “User Form” with a “name” label and field and a submit button. The string in the name field is “Taylor”
User form — titled “User Form” with a “name” label and field and a submit button. The string in the name field is “Taylor”
User Form

Action

form.rs updated with event listener
User form with logged output — titled “User Form” with a “name” label and field and a submit button. The string in the name field is “Arya.” Below the form there is console log output that relates to previous submissions that is 1. “jon” 2. “sansa” and 3. “arya”
User form with logged output — titled “User Form” with a “name” label and field and a submit button. The string in the name field is “Arya.” Below the form there is console log output that relates to previous submissions that is 1. “jon” 2. “sansa” and 3. “arya”
User Form with logged output

Calculate

Final code for gen_template function
wasm-bindgen = {version = "0.2.45", features = ["serde-serialize"]}
Final code for init_form function
Final code for form.js file

Render

Final code for add_submit_handler function
User form with rendered output — titled “User Form” with a “name” label and field and a submit button. The string in the name field is “Arya.” Below the form there is rendered output that relates to previous submissions that is 1. “jon” 2. “sansa” and 3. “arya”
User form with rendered output — titled “User Form” with a “name” label and field and a submit button. The string in the name field is “Arya.” Below the form there is rendered output that relates to previous submissions that is 1. “jon” 2. “sansa” and 3. “arya”
Complete User Form

Long Term

Software Engineer — JavaScript, Rust, WebAssembly

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store