Introduction to WebAssembly (WASM)
Create your first WebAssembly powered website
WebAssembly was first announced in 2015, and the first demonstration was executing Unity’s Angry Bots in Firefox, Google Chrome, and Microsoft Edge. Then just after 4 years of being announced, it became an official web standard and the fourth language for the web after HTML, CSS and, JavaScript. As of today, 94% of installed browsers support WebAssembly. It enables near-native execution speed in a web browser, making it possible to port desktop applications (like AutoCAD) and even video games (e.g. Doom 3) to the web.
It seems as if just about everyone is getting into the WebAssembly hype. Let’s discuss that in this article❕
What is wrong with JavaScript?
What is WebAssembly?
Is it just a new programming language like C, C++?
How does WebAssembly work?
Is WASM the future of web applications?
We will be answering all these questions and getting you started with Web Assembly. It has the potential to change websites from what we know them today to something much more!
So, fasten your seatbelts, and let’s get started!⚡
What is wrong with JavaScript?
JavaScript was designed by Brenden Eich in 1995 for the Netscape browser. It gave the way to add some interactions to static web pages of those days.
JavaScript is an interpreted language and is also dynamically typed. A language is dynamically-typed if the type of a variable is checked during run-time. So what is the problem with a dynamically typed language? If we declare a variable in C++, which is a statically typed language.
int x = 5 ;Then, the compiler knows the type and memory location of x. All of this in one single instruction. But for the same assignment in JavaScript, the engine has to check whether it is an integer or float, or any other valid data type every time program is executed. So every instruction in JavaScript has to go through several type checks and conversions which slows it down.
Following is, where JavaScript spends its time while running code.🤓
Following is where WebAssembly spends its time.
The whole compilation process is simplified in WebAssembly making it fast when compared with JavaScript.
JavaScript was not developed for CPU intensive and high-performance applications.
What is WebAssembly?
Browsers could only run JavaScript, but what if we could have a virtual microprocessor that can convert any high-level language into machine code that can be run on all major browsers. That is exactly what web assembly does.
Following is an example of an adder function written in C++ which is converted to WASM.
Schematic of VirtualProcessor that converts C++ code to browser understandable Binary.
Is it just a new programming language like C, C++?
NO, it is not a programming language🙂. In a nutshell, it is a technology that converts code written in one programming language to browser understandable machine code.
“WASM (WebAssembly’s abbreviation) was designed as a compilation target for other languages, allowing server-side code (such as C or C++ code) to be compiled into it and executed inside the browser.”
How does WebAssembly work?
To understand web assembly, we first need to understand what general assembly is.
What are assembly language and assembler?
- Every processor has an architecture like x86 or ARM. Also, processors can only understand machine code.
- Writing machine code is tedious, so we have assembly language for that architecture/Processor.
- The assembler converts instructions in assembly language to machine code that can be understood by the processor.
Following is how apps are written in C work on your computer.
In WebAssembly, similar to the general assembly, code written in a high-level language like C++ is converted to browser understandable machine code.
Getting Started with WebAssembly
WebAssembly is simply a file with a WASM extension. We can treat it as a module that can be imported into your JavaScript Program.
Interaction of files in the project directory —
Remember, WASM cannot interact with DOM directly. So we need to use both JavaScript and WASM.
From the above discussion we’ve understood that we can run languages like C, C++ in browsers with near-native performance. To achieve that, we need to follow the following steps.🖖
1. Write the application in your preferred language.
Let’s write a small C++ function that finds nth Fibonacci.
2. Create a WASM module.
Now, we need to convert our C++ file into precompiled WASM module that can be understood by the browser.
There are various ways of converting high-level language code into WASM. But for this tutorial, we will be using Web Assembly Explorer.
Step 1: Copy-paste C++ code and click on compile.
Step 2: Click on assemble.
Step 3: Download the wasm File.
Copy Paste the downloaded file into your project directory as “math. wasm”.
3. Distribute the module — ideally, using a CDN for low latency. But for this illustration, we will be running the WASM file locally.
Create script.js and keep it empty for now.
Your project directory should look as follows.
4. Load the WASM module.
We will be creating the functionloadWebAssembly() that converts a given file into an array buffer. Then that binary array buffer can be converted into a WebAssembly module. The need to create an array buffer has to do with web assembly memory. The instance of this module can be read by the browser.
Your script.js should look as follows.
5. Create an instance of the module.
Now to the tricky part, we need to refer to the functions created in C++ in the JS file. But we cannot directly refer to those functions. We need to use the names that are generated in the WASM file. These names are written in the WAT column in Web Assembly Explorer.
Use the function name underlined in the following image.
These names will be different for your WAT file.
In
script.js, Part 1 is about loading the WASM file.Part 2 has some simple javascript functions that are created to compare the performance of Javascript and WebAssembly.🤓
6. Call the instance’s functions.
Now load your website on localhost and finish it up!
Note: You cannot run index.html directly as it won’t load WASM module use something like Live Server extension on Visual Studio Code or Xampp to pull up the project directory on localhost.
Now go to console, here we can call the following two functions.
fibj( )→ It is written in simple Javascript.fibc( )→ It is written in C++ and then converted to WebAssembly.
Following is a comparison, between function(fibj()) written purely in JavaScript and function(fibc()) imported from WebAssembly.
The execution time of fibj( ) and fibc( ) are measured using functions:
perfoj()→ Gives us time taken byfibj()perfoc()→ Gives us time taken byfibc()
As we saw in the above GIF, the time taken by fibj() (written in JavaScript) is higher than fibc() (written using WebAssembly).
Is WebAssembly the future of web applications?
With web assembly, we can develop high-performance web applications which will run with near-native performance. We can perform tasks like video processing, 3D rendering, multimedia games, cryptographic computations, and AR/VR live applications.
So basically, any application that requires a lot of coding and performance tweaking is the perfect use case for WebAssembly.
You can try everything by yourself! 🧑🔧
Access project here: https://github.com/Chandrashekhar-D/Introduction-to-WASM/
References —
[1]: Official Website. What is WebAssembly?https://webassembly.org/
[2]: Mozilla. Loading and running WebAssembly. https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running
[3]: Lin Clark: A Cartoon Intro to WebAssembly.https://youtu.be/HktWin_LPf4
[4]: Guy Royse: An Introduction to WebAssembly https://youtu.be/3sU557ZKjUs
[5]: Priyesh Patel: How does JavaScript really work?https://blog.bitsrc.io/how-does-javascript-really-work-part-1-7681dd54a36d
