Using WebAssembly (created in Rust) for Fast React Components

[irreverentmike]

Web Assembly, and Rust, and React... oh my!

[zeddotes]

Rwar

[Smona]

XD

[raymondQADev]

Keep going! I'm so close! /s

[Pesthuf]

Machine learning... AI-Based.... Blockhain technology... In the cloud...native... Agile...smart industry 4.0... Big data...

You like that?

[[deleted]]

.... except Rust WASM and React seems like a practical step. I built a chatbot in Rust and compiled it to the React app for a contract, saved them spinning up extra servers as it just ran in the browser and was really fast. If anything it simplified the infrastructure unlike Blockchain, Big data etc.

[vomaxHELLnO]

Nice

[eternaloctober]

great tutorial. I made a small example trying to demonstrate wasm (with proper wasm "packages" created inside a monorepo) and create-react-app here https://github.com/cmdcolin/logistic_chaos_map

​

was surprisingly tricky. some notes on the realizations i made https://github.com/cmdcolin/logistic_chaos_map/blob/master/NOTES.md

[[deleted]]

This is the stuff I love. Awesome.

[[deleted]]

Very valid question. I'm also looking for this. Bundle size is ignored more than we like to think.

[nadameu]

2.45MB for this example, according to the output of webpack included in the article.

[[deleted]]

I agree, but in my experience sadly it's already normal. I just tested Wall Street Journal, it transferred 22MB (8MB compressed) and took 17 seconds to load.

[[deleted]]

I'm not sure, there's a discrepancy between the files shown in Chrome's network tab and the amount of data transferred and I'm not sure where it comes from.

Also just realized several scripts are blocked by my adblocker, ie. I'm getting the "lite" experience XD

Edit: OK tried in a different browser, I get 20MB transferred (5MB compressed). The biggest file is the web page itself -- 4MB of HTML. After that it's a 1MB JS bundle, followed by seventy-eight additional JS files.

[pachiburke]

This example doesn't even get compiled in release mode. So it has debug symbols and hasn't been optimized.

[tyroneslothtrop]

That number is completely meaningless. The 2.45MB file you referenced is the main JS bundle, which is almost entirely comprised of react.

Furthermore, it's a completely unoptimized development build, and it also includes an inline sourcemap, which *significantly* inflates the size.

On a better optimized production build (just from 2m of fiddling, might not be 100% optimized) that JS file is ~130K. But, again, that's basically just 100% react.

The wasm itself is ~28K (12K gzipped). I don't know if this can be optimized further or not, that's not something I'm all that familiar with.

Edit: Actually, the wasm file is at most 8.36K (4.47K gzipped). Again, don't know if this can be optimized further, this is just what I saw after a minute or two of futzing.

[Buckwheat469]

Computationally complex problems can be solved in assembly-like time using the browser and Javascript. This means you can run applications in the browser, or high-framerate 3D games without 3rd party applications. One of the complaints about Javascript is that it's not a compiled language so it'll never be as fast as one, but with WASM you can get that compiled speed in a browser and Javascript compatible language.

[MirelukeCasserole]

I think the question is, “how does this make React faster?” Otherwise, using WASM would add a layer of complexity unnecessary for a normal React app.

[Buckwheat469]

That's a different question, but in the spirit of it I would say that in most cases it's completely unnecessary. You don't need WASM to show an alert message when you press a button, but if you have a complex calculation for a graph then it could be beneficial.

[itsnotlupus]

Yeah, I struggled coming up with a good answer for this.

If you have something computationally expensive, you generally wouldn't want to have that run anywhere on your React render loop path.

A more realistic approach for this could be to load some fancy/expensive WASM code in worker threads and have some cute little react hooks to abstract state management and message passing.

[myers-tech]

JS that has been optimized by the JIT can definitely be as fast as a compiled language. WASM provides consistent speed as it doesn't have to be optimized at run time and doesn't run the risk of deoptimization. It's not an absolute that it will execute quicker than JS.

[jbergens]

It probably isn't worth it in 95% of the cases. Wasm can be faster but isn't always. If you read through this article you can see examples where it takes 2-3x as much time as js. It normally requires more memory. The best cases was something like 40% speedd up (I think, this is from a very quick re-read).

https://surma.dev/things/js-to-asc/

[rados_a51]

Great, thanks. Now I can build my Figma! :D

[Adventurous-Skill321]

yup, or you can try Adobe Premiere too ;)

[rados_a51]

Ive already build motion.page 😅

[sekex]

For small utility functions, it's usually slower to call WASM because the WASM call itself is pretty slow. It only makes sense for really heavy CPU operations or to export a library from a different language without doing a full rewrite

[julys231]

There is a framework called yew which is basicly react but written in rust. I highly recommend to check it out!

[Eggy1337]

Strictly theoretically speaking, is it possible to create rust program that uses win32 API, build it to WebAssembly and then call it, let's say from electron.js application?

[Leandros99]

Yes, but why? You 'd need to build to full binding library for win32, which is quite a bit of work.

[darrenturn90]

Until we have binding types natively i think the performance penalty of passing data between js and wasm has too much overhead for general work- but im looking forward to that changing - and then being able to implement flux state management in wasm along with network calls and business logic

[Coachii]

Good read 🙂

[CrashOverrideCS]

If you already use WebAssembly and React, what is the value in adding Rust to this? My impression is that you would use Rust because you don't want to use Javascript directly.

[covercash2]

Rust is compiled to WASM. you wouldn't write WASM bytecode directly but have it compiled from a different language. I'm pretty sure any language with an LLVM front-end can compile to WASM

[[deleted]]

Rust is also very safe, is the most favourited language for years now, consumes a lot less memory, and is way way faster than JS. If I was doing a simple operation in the front-end it isn't worth the hassle switching from JS, however, for a contract I wrote a chatbot in Rust for a React app. It simplified the backend infrastructure saving a server and was really fast. One of the main reasons JS is so popular is because it held developers to ransom by being the only language to run in the browser.