Is there A way to execute/reference Native code in the browser using React Js?

Question

We have a code base written in C++ and a code base written in C#.net that works as expected, however I am tasked to execute/reference this code in a react application at runtime, I read about WebAssembly and Edge js, got an idea about the matter but I am lacking the details and the time. So Could any one share some insights and knowledge about this please. Ultimately the native code needs to be executed in client side...

Answer 1

React and C++

I have been successfully using WASM in conjunction with React for running C++ code on the client in production. In my case, the C++ codebase is used for computationally expensive message parsing. To give you some context, the flow is as follows:

1. I have some raw binary data in a JS typed array that needs parsing.
2. I pass the binary data to WASM using emscripten. Note that this adds some overhead as detailed here
3. I use my C++ codebase compiled with emscripten to parse the raw data.
4. I create a JS object using emscripten's embind and return it to my JS code.

Please note that my C++ code does not need access to any file system, sockets, network, etc. and is single-threaded.

Some things I really appreciate using emscripten and WASM:

1. emscripten is well documented and provides user-friendly error messages.
2. With the right tools you can debug WASM conveniently alongside your JS codebase.
3. emscripten's build pipeline allows for really fast iterations. I managed to wire up emscripten with React in way that basically gives me hot reloading for my C++ code.

I've seen several POC's out there that integrate emscripten with React, for example:

• https://github.com/9oelM/emscripten-cplusplus-webpack-example
• https://github.com/viroulep/emscripten-webpack-cra

Let me know what WASM features your codebase requires and I'll see if I can point out more fitting examples.