Skip to content
loading...

Using WebAssembly with React

bright inventions on November 22, 2018

WebAssembly (WASM) is a binary format for the executable code in the browsers. In this article, we will create a simple web application using React... [Read Full]
markdown guide
 

I recommend declaring C++ functions you use in WebAssembly as extern "C" (unless you use C++ symbol naming features such as overloading, classes, or namespaces).

This way, the compiler won't mangle the name into a garbled mess:

extern "C" float mandelIter(float x, float y, int maxIter) { ...

Use as

wasm.mandelIter(x, y, maxIter);
 

Any performance benefit using WebAssembly here rather than the JS implementation?

 

I have 2 canvas(one JS and one WASM) side by side. On calculating time differences using performance.now() for both, WASM turns out to be taking more time than JS fn. Not sure why.

 

You need to add the following to .babelrc

"plugins": ["@babel/plugin-syntax-dynamic-import"]

And also:

npm install @babel/plugin-syntax-dynamic-import
 
code of conduct - report abuse