On December 5, 2019, WebAssembly officially joined the Web standards family of HTML, CSS, and JavaScript. Many things will benefit from this new standard, and its performance in browsers is unprecedented. Earlier, developer Mehdi Zed posted a brief introduction to this little change in the works and translated it to give you some inspiration.

The background of WebAssembly

In 1995, Brendan Eich created JavaScript in less than 10 days. At the time, JavaScript wasn’t designed for speed. It’s basically for form validation, and it’s very slow. As time goes by, it is getting better day by day.

In 2008, Google came out with its own new browser, Chrome. Chrome has an internal JavaScript engine called V8, and V8’s revolutionary advance is just-in-time (JIT) compilation of JavaScript. This shift from interpreted code to JIT compilation dramatically improves JavaScript performance, making the entire browser faster. This speed will spawn technologies like Node.js or Electron and propel JavaScript to explosive growth.

In 2015, WebAssembly was first released and provided a small demo of a game running under Unity. The game runs directly in the browser.

In 2019, the W3C made WebAssembly the new Web standard. Just like the V8 engine, WebAssembly is about to revolutionize performance. It was already on the Web track, far ahead of the gun.

What is WebAssembly?

WebAssembly, or WASM for short, is a way to take non-javascript code and make it run in a browser. This code can be C, C++, Rust, etc. They compile into your browser and run at near-native speed on your CPU. This code is in the form of binary files that you can use directly in JavaScript as modules.

WebAssembly is not a substitute for Javascript; instead, the two technologies complement each other. Through the JavaScript API, you can load WebAssembly modules into your pages. That said, you can use WebAssembly to take full advantage of the performance of compiled code while maintaining the flexibility of JavaScript.

The name WebAssembly is a bit misleading, and it does apply to the Web, but its usage scenarios go far beyond that. In addition, WebAssembly is not a programming language; it is an intermediate format, called bytecode, that can be used as a compilation target for other languages.

How does it work?

Step 1: You generate source code in C, C++, or some other language that should solve a problem or complete a process that is too complex for JavaScript in a browser.

Step 2: Compile your source code into WebAssembly using Emscripten. When this step is complete, you will have a WASM file.

Step 3: You will use the WASM file on a web page, and you will be able to load it in the future just like any other ES6 module.

Here is a simple code example to illustrate this process:

First, you need a small piece of C++ code to compile. Here is a function that adds two digits:

int add(int firstNumber, int secondNumber) {
  return firstNumber + secondNumber;
}
Copy the code

Then switch to the Linux distribution of your choice. The first step is to download and install Emscripten:

# Install dependencies (yes, you can use newer versions of Python)Sudo apt-get install python2.7 gitGet Emscripten from a Git clone
git clone https://github.com/emscripten-core/emsdk.git
Download, install, and activate the SDK
cd emsdk
./emsdk install latest
./emsdk activate latestl
source ./emsdk_env.sh
Verify that the installation works
emcc --version
Compile this c++ file into a webassembly template
emcc helloWebassembly.cpp -s WASM=1 -o helloWebassembly.html
Launch the HTML and observe the results
emrun helloWebassembly.html
Copy the code

As the code shows, this is how geeks work with WASM files. There is an even easier way, which you can check out on the site.

Next, place your C++ code on the left. You will then get the name of the export function (_Z3addii) in the WAT section. Just click download and get the WASM file. It’s very simple.

Now you can make WebAssembly run directly in the browser. WebAssembly objects will automatically hang in the Window in supported browsers. Very simple.

<html>
  <head>
    <title>WASM test</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>

  <body>
    <script>
      const getRandomNumber = () = > Math.floor(Math.random() * 10000);

      window.WebAssembly && WebAssembly.instantiateStreaming(
        fetch("http://localhost/add.wasm")
      )
        .then(obj= > obj.instance.exports._Z3addii)
        .then(add= > {
          document.getElementById("addTarget").textContent = add(
            getRandomNumber(),
            getRandomNumber()
          );
        });
    </script>
    <h1>Resultat du c + +</h1>
    <p id="addTarget"></p>
  </body>
</html>
Copy the code

Of course, the above example is just a simple demo, such as complex usage scenarios: games developed in Unity can be exported as wASM files, which can be used directly on the web, see here.