DEV Community

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 post
Collapse
 
dijky profile image
Lukas S. • • Edited

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);
Collapse
 
wordythebyrd profile image
Andrew Byrd 🐦 •

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

Collapse
 
aseem2625 profile image
Aseem Gupta •

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.

Collapse
 
adrianmcli profile image
Adrian Li •

You need to add the following to .babelrc

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

And also:

npm install @babel/plugin-syntax-dynamic-import
Collapse
 
askthepunkuzz profile image
Punkuzz •

What is the advantage of web assembly?