Webassembly
Webassembly is an interesting technology not widely used nowadays, but it looks promising The idea behind this technology is to allow he execution of binary code client-side in the browser. This is how it is described on webassmbly.org:
WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.
Web application are becoming more and more sophisticated and they requires speed and reliability to replace the traditional desktop applications. Webassembly allows to use code written in C, C++, Rust, and others, directly from web pages
How to load a webassembly in an html page
Webassembly are provided in the form .wasm files that can be loaded from javascript in the following ways:
New method
1WebAssembly.instantiateStreaming(fetch('mywebassembly.wasm'), importObject)
2.then(results => {
3 // Do something with the results!
4});
Old method
1fetch('mywebassembly.wasm').then(response =>
2 response.arrayBuffer()
3).then(bytes =>
4 WebAssembly.instantiate(bytes, importObject)
5).then(results => {
6 // Do something with the results!
7});
How to generate a .wasm file
To have an idea about how to build a. .wasm webassembly file it's possibile to use WasmExplorer. From this tool is possible to write C++ code and obtain the .wasm file directly to use from a web page.
We can create a very simple function called "multiply" in C++:
1extern "C" {
2 int Multiply(int a, int b) {
3 return a * b;
4 }
5}
Using WasmExplorer the result is:
At this point, just clicking on "Compile" and after on "Download" we will obtain a .wasm file to save locally on.
The simple html page below, shows how to load the .wasm file and how to map the "Multiply" function to a Multiply object in Javascript. At this point it's possible to use the "Multiply" function directly from the page via Javascript
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Simple template</title>
6 </head>
7 <body>
8 <script>
9 const importObject = {
10 module: {},
11 env: {
12 memory: new WebAssembly.Memory({ initial: 256 }),
13 }
14 };
15
16 WebAssembly.instantiateStreaming(
17 fetch('test.wasm'),
18 importObject
19 ).then(result => {
20 const Multiply = result.instance.exports.Multiply;
21 console.log(Multiply(4, 5));
22 console.log(Multiply(10, 10));
23 });
24 </script>
25 </body>
26</html>
Opening the page in web browser will prodice the following output in the inspector console:
Please note that it work if you open the page from a web server. I locally created an http server on port TCP/90 to serve pages an webassembly otherwise it doesn't work due to CORS violations.
All the Multiply operations have been performed by the code in the webassembly created above.
This example shows how to build and instantiate an object which exposes the functions defined in the webassembly. This is partiicularly usefull if you want to re-use functionalities you already develloped in other languages and you want to use them from the web.
This technology is the foundation for frameworks that aims to provide real-time interaction of a web frontend with a backend application. Communication can be performed using all the browser API (REST, websocket etc.).