This weekend I looked into integrating WebAssembly in web components. This post is a write-up of what I learned.
Web Component Integration
This experiment is framework agnostic, but for the purposes of my demo I have used C++ compiled to WASM consumed by web components created using Angular Elements.
Using Angular Elements is a convenient way to create web components since you can leverage the full power of the Angular framework for things like template binding.
C++
For the C++ part I decided to use the emscripten compiler, which seems to be the standard for C++ WASM projects these days.
For the purposes of this demo I have created a snippet of C++ code that returns a list of friends. I am a bit rusty when it comes to C++ these days, so I would be grateful for any feedback you may have. The full source is included below:
friend.h
friend.cpp
friends.h
friends.cpp
show-friends.cpp
Between friend.cpp and friends.cpp I have implemented a hierarchical object model with simple support for serializing the model to a json string. In show-friends.cpp I am wiring up a C++ function that will be exposed as the public api that can be accessed by Javascript in the browser.
EM_ASM is a “glue” function provided by emscripted for the purpose of calling JavaScript code from C++. In this example I am running a JavaScript snippet to instantiate a web component and pass it a serialized json string as an attribute. Generally it’s a bit cumbersome to pass complex objects between C++ and Javascript since you have to write data directly into the shared WASM memory. Passing data as a json string is easy enough though.
JavaScript
The code for the Angular element can be found below. The key point here is to expose an attribute with a setter that deserializes the data json to a JavaScript object.
The output of the C++ compiler consists of a Javascript file accompanied by a .wasm file. The first step in any WebAssembly based application is to load these two files. You only have to load the JavaScript file since it will trigger the loading of the .wasm file. Once the .wasm module is loaded the final step is to wrap the C++ function as a regular JavaScript function. See example below:
Including the above code snippet will call into the C++ code and cause the web element to be added to the page and render a list of friends from the data created in the C++ code.
Demo
I have added the source code on Github if you want to give it a try.