richardanaya/wasm-service

HTMX, WebAssembly, Rust, ServiceWorkers

wasm-service

This is a simple proof of concept that shows how you could use HTMX and Rust for frontend development. The basic idea in HTMX is that a webserver is being called on interactions with DOM elements, and returning back snippets of HTML that will replace certain DOM elements. Instead of http requests going to a regular web server, this project shows how service workers can intercept calls to a server and return back responses driven from WebAssembly instead.

See the demo here: https://richardanaya.github.io/wasm-service/

You can also find a framework inspired by this PoC here: https://github.com/edezhic/prest

Developing wasm-service

Install & build

Install the WASM target via rustup in order to compile to wasm binaries:

rustup target add wasm32-unknown-unknown

Compile the lib crate into wasm_service.wasm:

cargo build --target wasm32-unknown-unknown --release

Copy the .wasm file to app.wasm in current dir:

cp target/wasm32-unknown-unknown/release/wasm_service.wasm app.wasm

Serve repo root dir on localhost http

Use any method to serve the files from the root dir (in particular index.js, sw.js, and app.wasm). Note you need to serve on localhost or via https for service workers to be enabled. Here's how you can do it with caddy in bash:

caddy run --adapter caddyfile --config - <<< $'http://127.0.0.1:8000 \n log \n root / . \n file_server browse'

Rebuild and run automatically with cargo watch

Install:

cargo install cargo-watch

Build and copy on change:

cargo watch -i app.wasm -x 'build --target wasm32-unknown-unknown --release' -s 'cp target/wasm32-unknown-unknown/release/wasm_service.wasm app.wasm'

Resources for developing with service workers

• Service Worker API @ MDN
• Workers overview @ web.dev
• about:debugging in firefox
• Open serviceworker console about:devtools-toolbox?id=<service-worker-id>&type=worker

wasm-service's Issues

Question: wasm-bindgen

Hi, rust/wasm newbie here.

In lib.rs, I find the following:

 pub extern "C" fn allocate_request(size: usize) -> *mut u8 {

Could you have used wasm-bindgen ? If yes, is there a reason why you did not ?

error[E0635]: unknown feature `proc_macro_span_shrink`

   nightly-x86_64-pc-windows-msvc updated - rustc 1.78.0-nightly (256b6fb19 2024-02-06) (from rustc 1.77.0-nightly (635124704 2024-01-27))

c:\w\rust\wasm-service>make
cargo build --release --target wasm32-unknown-unknown
   Compiling proc-macro2 v1.0.47
   Compiling quote v1.0.21
   Compiling unicode-ident v1.0.5
   Compiling syn v1.0.103
   Compiling serde_derive v1.0.145
   Compiling serde v1.0.145
   Compiling itoa v1.0.4
   Compiling rustversion v1.0.9
   Compiling bytes v1.2.1
   Compiling ryu v1.0.11
   Compiling serde_json v1.0.86
   Compiling fnv v1.0.7
   Compiling heck v0.4.0
   Compiling percent-encoding v2.2.0
   Compiling once_cell v1.16.0
   Compiling matchit v0.6.0
   Compiling form_urlencoded v1.1.0
   Compiling http v0.2.8
error[E0635]: unknown feature `proc_macro_span_shrink`
  --> C:\Users\dhorner\.cargo\registry\src\index.crates.io-6f17d22bba15001f\proc-macro2-1.0.47\src\lib.rs:92:30
   |
92 |     feature(proc_macro_span, proc_macro_span_shrink)
   |                              ^^^^^^^^^^^^^^^^^^^^^^

For more information about this error, try `rustc --explain E0635`.
error: could not compile `proc-macro2` (lib) due to 1 previous error
warning: build failed, waiting for other jobs to finish...
make: *** [Makefile:2: run] Error 101

let me know if you have any ideas. thanks!

Strange refresh behavior

Thanks for the very cool proof of concept!

I am running into one strange behavior on https://richardanaya.github.io/wasm-service/

If I hold shift+refresh on this page then the service worker stops intercepting the network calls and I start getting a bunch of HTTP 405 (Method Not Allowed) errors.

To get it working again, I just have to hit refresh (without the shift key pressed).

Tested in a couple different Chromium-based browsers.

Please let me know if there's any other information I can provide!

mkcert

in order to run under https you can use mkcert with caddy.

https://github.com/FiloSottile/mkcert

mkcert will create a trusted cert and then caddy will use it. Its ONLY for local dev.

mkcert -install
mkcert localhost 
mkcert test.example.com

works great !.

Refresh on first load to enable functionality.

This is really cool, I'm not super familiar with Rust (I've played with it a little in the past). But I've been developing my personal apps that I make for myself for a while, I use my own HTMF lib instead of HTMX as I don't need the full power of HTMX and HTMF is built out of the box to use progressive enhancement. So, it wouldn't be that difficult to make this code work on the back end and front end and be progressively enhanced.

But here's how to implement an auto updater for service workers (the first time I load on a new machine I automatically refresh the page):

https://github.com/jon49/Soccer/blob/172e6e6043583c862d96d6e5ff9613cb7021d155/Soccer/FrontEnd/src/web/js/main.v9.ts#L7
https://github.com/jon49/Soccer/blob/172e6e6043583c862d96d6e5ff9613cb7021d155/Soccer/FrontEnd/src/web/sw.ts#L33

https://github.com/jon49/htmf
https://github.com/jon49/Soccer

I definitely like the idea of running with Rust as node.js is painfully slow on the back end and I would prefer C# but I don't want to download 1 MB just for a tiny website (I think all the JS I have for my soccer website is around 50k).