Enhance React application performance to run on embedded devices.

[shyamshyre]

Dear All,

We intend to run a React Application on an embedded device. In today's scenario, it consumes 30% of CPU, off times it spikes up to 40%. When we try to add more functionalities, it spikes up beyond the default expectation. Started exploring WASM, found this to be an interesting space, felt like this would be a great fit to solve my problem.

During further exploration found Fermyon and Spin a fantastic framework that reduce's developer's tussle and not to worry about deployment nitigrites.

I have a question can Fermyon Family tool's help to compile React JS application to WASM module. So that i can execute and gain application performance and achieve optimal resource consumption?

[radu-matei]

Hey, @shyamshyre, thanks for reaching out! I have a few questions about your use case and about how you are currently running your application:

• are you building your React application as a client side app? More specifically, are you using any server-side rendering)?
• how are you currently starting the application?

@coderoflagos built a template for a client-side rendered ReactJS application that can run in Spin — https://github.com/coderoflagos/spin-reactjs

You can follow the instructions below to try it out:

❯ spin templates install --git https://github.com/coderoflagos/spin-reactjs
❯ spin new
Pick a template to start your application with: spin-reactjs (Build your front-end application using reactjs and Spin)
Enter a name for your new application: myreactapp
Project description:
HTTP base: /
HTTP path: /...

❯ cd myreactapp && ls
 384 3 seconds  .gitignore
1.3M 3 seconds  package-lock.json
1.0k 3 seconds  package.json
   - 3 seconds  public
3.4k 3 seconds  README.md
 550 3 seconds  spin.toml
   - 3 seconds  src

❯ npm install && spin build

❯ spin up
Logging component stdio to ".spin/logs/"

Serving http://127.0.0.1:3000
Available Routes:
  hello: http://127.0.0.1:3000 (wildcard)

[shyamshyre]

Hi @radu-matei thanks for your response.I see the template that you shared refers to client-side rendering. As is said my main intent is to have it run on embedded device , in that case is it a wise option to move ahead with client-side rendering ? How about installing edge runtime and making React Application enabled with server rendering doesn't this approach enable effeciency as this leverage the runtime ?

I'm struggling to figure out a way to run React application in an optimised format on embedded device and to further i've another question can i compile React/Next js application as WASM so that it delivers optimal performance ?

This is something lingering in my mind, can we have React/Next js application (server-side rendering) enabled on Rust Application to deliver optimal performance ?

My end goal is to ensure rich application like React run on low compute device like embedded in an optimal way. Please help me here an guide me on the next steps whether Spin/WASM can help me in this experiment.

[shyamshyre]

During exploration identified another product from fermyon family Spin-Js SDK which is capable of generating WASM file for JS and TS file's. Exploring that path to see if it may bring in additional optimization by compiling the NextJS Js server-side application compiled to WASM file and running it on edge run time. I'll share my observations here. Let me know whether this approach makes sense or any other better way to go in the comments.

[shyamshyre]

@radu-matei any help is appreciate