Using Web Assembly in a React App

This article explains how to use a WebAssembly project with your React app.

A rust-wasm app to convert json to bson

Web Assembly can be used easily when the frontend React project has access to webpack.config.js. But if the project is a create-react-app you need to take a longer route to support web assembly packages.

Audience

This is an introductory tutorial to using WebAssembly and hence a basic knowledge of create-react-app, Rust, React, Javascript and Webpack is sufficient. You will mostly be using pre build templates to instantiate the projects.

Why Web Assembly?

Web Assembly or a wasm module is especially suitable for compute intensive tasks which Javascript is not really good at. A wasm module can be run both on the client side as well as on the server side. Below are the best reasons to use web assembly:

• Speed: Javascript was not built for the web but not for computation tasks. Web assembly lets us run compute intensive tasks in near native speeds.
• Portability: Can be run on any device architecture after compilation.
• Flexibility: Web developers can now choose from a lot of languages other than javascript.

Some real world examples

• markdown-wasm: NPM package…