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

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.

Pack everything but the kitchen sink. Image courtesy of WikiMedia Commons.

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.

UI and worker thread working together. Image from pxhere.

The work code of the Web Worker blog needs to be enhanced with returning the iterations like

File: worker.js

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.

File: app.html

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

(Click on image to get interactive version)

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.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Netherlands eScience Center

We’re an independent foundation with 80+ passionate people working together in the Netherlands’ national centre for academic research software.

Written by Netherlands eScience Center

Dutch national center for digital expertise. We help those in academic research develop open, sustainable, high quality software tools.

No responses yet

What are your thoughts?