0

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...

dallel oussema
  • 1
  • Welcome to Stack Overflow. Please read [the help pages](http://stackoverflow.com/help), take the SO [tour], read [ask] as well as [this question checklist](https://codeblog.jonskeet.uk/2012/11/24/stack-overflow-question-checklist/). Lastly please learn how to create a [mcve] of your own attempt and show it to us, together with a description of the problems you have with it. – Some programmer dude Feb 11 '20 at 12:23
  • Use Emscripten. – Bumsik Kim Feb 11 '20 at 12:38
  • @BumsikKim thanks , but didn't know how to install it and use it in a React Js application/environment ... any help would be infinetly appreciated :D – dallel oussema Feb 12 '20 at 14:49
  • This emscripten converts a C++ file into JS using webassembly: https://emscripten.org/docs/getting_started/Tutorial.html . Things such as native file system access can be facilitated using JS. As far as converting the JS into React, I believe there are a few tools online somewhere. – Jerry Ajay Feb 14 '20 at 17:52

1 Answers1

0

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:

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

6d7a
  • 31
  • 1
  • 3