C++ web app with WebAssembly, Vega, Web Worker and React
By Stefan Verhoeven, Faruk Diblen, Jurriaan H. Spaaks, Adam Belloum, and Christiaan Meijer.
In previous blogs in the series we learned
- using C++ in a web app with WebAssembly
- how to perform computations without blocking the user interface
- how to interact with your C++ web app using React forms
- how to visualize data from the algorithm
Those topics by themselves are useful, but how can all those topics be put together into a single web application. This blog will tell you how to do build the web application including everything but the kitchen sink.
We want to make an React application which will find the root of an equation using Newton-Raphson algorithm and plot each iteration of the algorithm. Let us go over the pieces for this application next.
WebAssembly module
The WebAssembly module contains the equation and Newton-Raphson algorithm. We will reuse the module made in the visualization blog post, so we will download newtonraphson.js and newtonraphson.wasm.
Web Worker
In the web worker blog we used a Web Worker thread to not block the user interface while busy with a computation. A Web Worker is not needed for the quick computation we are using, but let’s be a good citizen and not claim the main thread when we don’t need to.
The work code of the Web Worker blog needs to be enhanced with returning the iterations like
React
In the React blog post we wrote several React components to make a form let’s re-use most of it, but instead of calling the WebAssembly module directly we will use a Web Worker.
Visualization
In the visualization blog post we used Vega-Lite to make 2 plots. Let’s connect these 2 plots into a single visualization where zooming and panning in one plot will be reflected in other plot.
To generate the Vega-Lite specification we can write a function like so
To wrap the Vega-Lite visualization in React component we will use useRef
to get a DOM element as container and use useEffect
to call vegaEmbed when the iterations or container changes. The React component to render the visualization is
Pack it up
The React components and React render call can be packed up all together in a JavaScript file called app.js.
The web applications needs a HTML page to fetch all the React and Vega dependencies, define a HTML tag for rendering the React app to and finally include the application JavaScript file.
We’ll need a web server to display the HTML page in a web browser. For this, we’ll use the http.server module from Python 3 to host all files on port 8000, like so:
python3 -m http.server 8000
Visiting the page at http://localhost:8000/app.html should give us a plot like
You can try out different initial guesses to get different amount of iterations. For example having initial guess located in a local minimum like 2
will make the algorithm use many iterations to jump over the minimum.
Recap
In this series of blog posts we introduced a lot of different technologies to able to take an algorithm written in C++ and make a interactive web application that will run fully in a web browser.
All the source code shown is available at https://github.com/NLESC-JCER/run-cpp-on-web.
This blog was written by the Generalization Team of the Netherlands eScience Center. The team consists of Stefan Verhoeven, Faruk Diblen, Jurriaan H. Spaaks, Adam Belloum and Christiaan Meijer. Feel free to get in touch with the generalization team at generalization@esciencecenter.nl.
Hope you enjoyed this series of blogs and if you have suggestions or questions please post a comment below.
These blogere written as part of the “Passing XSAMS” project. To learn more about the project, check out its project page.