State Management With WebAssembly & Rust

Object Oriented State Management With WebAssembly and Rust

Rusty gear on yellowing grass with an ocean backdrop.
Photo by Erik Mclean on Unsplash

Jumping In

High Level

State Management Diagram
  1. The View — our HTML document that a user would interact with
  2. The Link — our JavaScript code that bridges the gap between our View and our State layer
  3. The State — our Rust code that worries about application state and provides an interface for our JavaScript to read and write from

Initial Setup

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

The Code

Rust

Rust — Counter State

HTML

HTML — Document

JavaScript

JavaScript — Glue between Counter State and Document
wasm_bindgen Generated JavaScript Bindings
npm i && npm run build && npm run start
Number 42 with “+” and “-” buttons
Number 42 with “+” and “-” buttons

Conclusion

--

--

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