WebAssembly and React- 5 mins
WebAssembly is the next big thing. So they say. Who knows. All I know is that it’s fast and it can make my app goes faster, like native fast. So naturally I am interested.
I looked around for a quick guide to get WebAssembly up and running in node, express and react but couldn’t find one. So I decided to do it myself.
Run a C function from a .wasm file in a react component.
Step 1: Install emscripten
Emscripten compiles C/C++ code to web assembly. Given a C file, emscripten produces a .wasm and a .js file.
.wasm is a binary file. You can’t easily import .wasm files directly into js (yet!) so emscripten also produces a js file which acts as a proxy. You add a script reference to this file in your html so you can use wasm in your js app. They call this js file the “glue” code. Personally I prefer to call it proxy code.
Here are the steps to install emscripten:
- Download emscripten portable
- Unzip and cd into the dir and execute these:
- Add the emcc executable to your /etc/paths file. Mine is located at /your_download_dir/emsdk-portable/emscripten/1.37.16
Step 2: Write C code
Create a file called utils.c under your src folder.
Step 3: Compile your C code
-s Specify settings which gets passed down to the emscripten compiler. Here we specify we want to compile to wasm. The default is asm. This will produce utils.wasm.
-o Specify the filename for the glue code. This will produce utils.js.
-O3 The first character is the upper case letter ‘O’ not zero! Sets the optimisation level for your wasm and js files. You can check the various optimisation levels here.
Step 4: Add the glue code to your html
Step 5: Add an express route to serve wasm files
Express does not serve .wasm files by default so we have to add a custom route.
Step 6: Call wasm from React!
Finally! You can now use your C function from React by prefixing an underscore in front of the C function’s name. We included the glue code in our app html, so all your C methods are exposed globally. This is not the best way, but in the future, webpack will rescue us. There is wip right now sponsored by Mozilla to develop first class support for WebAssembly in webpack. This means we’ll be able to import C/C++ files directly in js files and call wasm functions directly!
Till that day arrives, a global script tag will have to do for now.
The next step is to help Sean Larkin and co to get webpack support WebAssembly!
The complete code is here as usual. Start learning C/C++. Enjoy!