WebAssembly, a new alternative to Javascript?

As we all know that Javascript is a standout core option which developers use to make interactive webpages. But here comes a new thing called Web Assembly which would definitely blow your mind and will emerge as a option in near future.

What is Web Assembly?

WebAssembly (abbreviated as wasm) is a binary instruction format that allows you to run high-performance code in web browsers. WebAssembly is supported by all major web browsers, including Chrome, Firefox, Safari, and Edge. It is designed to compile language ahead of time that tells that users can expect faster load times.

Although WebAssembly is a low-level assembly language, it does contain a text format that is understandable by humans, making it possible to manually write, inspect, and debug code. It is specified that WebAssembly should run in a secure, sandboxed environment. It will enforce the same-origin and permissions policies of the browser, much like other web scripts.

How WebAssembly runs in web browser?

Compilation Stage: A dedicated compiler like Emscripten is used to compile High level languages like C, C++, Rust source code into WebAssembly code.

Loading Stage: The web app that wants to use WebAssembly has a <script> tag with the type attribute set to “module”. The src attribute in <script> tag points to the location of the .wasm file. The wasm file is downloaded when the browser comes across this script

Parsing Stage: The webAssembly engine of the browser parses the downloaded wasm file to verify its format and assure that it is correct. The wasm code is then translated into a low-level, cross-platform format known as “machine code.” Compared to parsing JavaScript, WebAssembly can be represented compactly and processed more quickly due to its binary format. High-performance execution is also made possible by the low-level machine code execution.

Execution Stage: Once the parsing and compilation process is done, the machine code is ready to be executed. Meanwhile, the WebAssembly JavaScript API is used for the interaction medium between Javascript engine and WebAssembly module. This API offers methods for launching the module’s exported functions, accessing its memory, and instantiating it.

Memory & Resource Sharing: WebAssembly has its own linear memory that can be shared and accessed by both WebAssembly and Javascript. Moreover, WebAssembly interacts with Javascript to make use of web APIs.

Try out WebAssembly Studio

WebAssembly Studio is an online IDE tool developed by Mozilla that can be used to compile C/C++ and Rust code into WebAssembly (WASM). WebAssembly Studio has been built combining WasmExplorer and WasmFiddle. The IDE currently supports C/C++ and Rust, but the architecture of the tool will be fully pluggable to support other languages such as Kotlin.

main.c

main.wasm

Overall, WebAssembly expands web browser functionality by allowing the execution of high-performance code, which was previously only possible in native applications. It makes it possible to develop sophisticated web apps, gaming, multimedia processing, and more, giving the web platform improved performance and efficiency.

There is something called ‘Emscripten Tool’

Almost any C/C++ source code can be converted by the Emscripten tool into a .wasm module, together with the necessary JavaScript “glue” code for loading and running the module and an HTML document to display the output of the code.

In simple terms, the procedure goes like this:

1. The C/C++ is initially fed by Emscripten into Clang and LLVM, an established open-source C/C++ compiler toolchain that is included with XCode on OS X, for instance.
2. The compiled output of Clang and LLVM is converted into a .wasm binary file by Emscripten.
3. Currently, WebAssembly can only call JavaScript and pass primitive data types in the form of integer and floating point. It is unable to directly access the DOM on its own. As a result, in order to use any Web API, WebAssembly must make a call to JavaScript, which then uses the Web API. Emscripten produces the necessary HTML and JavaScript glue code as a result.

Applications like Figma, Microsoft Blazor, CloudFlare uses WebAssembly, where they say WebAssembly is more compact and the browser is able to parse it easily when compared to Javascript which undergoes a lot of optimizations to be fast.

A small Hands-on

This is a demo to get Emscripten to generate everything for you to run your C/C++ code in WebAssembly

• Install Emscripten in your machine
• Create a folder on your local drive and create a file called demo.c in it and have a sample code like below.

#include <stdio.h>

int main() {
    printf("Hi from Emscripten...!\n");
    return 0;
}

• Now, using the terminal window you used to enter the Emscripten compiler environment, navigate to the same directory as your demo.c file, and run the following command:

emcc demo.c -o demo.html

The options were passed in with the command are as follows:

• -o demo.html — Declares that we want the wasm module and the JavaScript “glue” code to be generated by Emscripten in order to build and instantiate the wasm so that it can be used in the web environment, as well as an HTML page to execute our code in (and a filename to use).

At this point, in your source directory you should have:

• The binary wasm module code (demo.wasm)
• A JavaScript file containing glue code to translate between the native C functions, and JavaScript/wasm (demo.js)
• An HTML file to load, compile, and instantiate your wasm code, and display its output in the browser (demo.html)
• Now open, demo.html file in your browser that supports WebAssembly.

Javascript Vs WebAssembly

The VM has only ever been able to load JavaScript in the past. This has worked well for us because JavaScript is capable of handling the majority of issues that consumers face nowadays when using the Internet. However, when attempting to use JavaScript for more demanding use cases such as 3D games, Virtual and Augmented Reality, computer vision, image/video editing, and a variety of other domains that demand native speed, we have encountered performance issues.

WebAssembly is a different language from JavaScript, but it is not intended as a replacement. Instead, it is designed to complement and work alongside JavaScript, allowing web developers to take advantage of both languages’ strong points:

• JavaScript is a high-level language, flexible and expressive enough to write web applications. It has many advantages — it is dynamically typed, requires no compile step, and has a huge ecosystem that provides powerful frameworks, libraries, and other tools.
• WebAssembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages with low-level memory models such as C++ and Rust with a compilation target so that they can run on the web.

WebAssembly has the high level goal of supporting languages with garbage-collected memory models in the future.

The following are the key factors that could help us understand the differences between JS and WASM.

Execution Speed

Due to the fact that JS is an interpreted language, it could take some time before the browser completely comprehends what it is about to do.

The strongly typed code used by WASM has already been optimised before it reaches the browser, which speeds up execution significantly.

Loading Time

JS is suitable for smaller tasks.

WebAssembly is suitable for heavy computation applications. Additionally, it has smaller files, which leads to quicker loading times.

Memory Utilisation

JS garbage collection automatically handles memory utilisation.

In WASM, memory usage is fairly complicated. Developers are given linear memory allocations that they must manually control.

Garbage Collection

For memory management, JavaScript provides a robust garbage collection procedure and whereas WASM uses JS.

Portability

Developers can utilise JavaScript on a variety of platforms and for a wide range of use cases, whereas WASM is designed with portability in mind and so developers can use it on platforms other than browsers too.

Web API Access

With Javascript, you may access numerous platform APIs. But there is no direct API access for WASM. The only way to manipulate the DOM by WASM is through JS.

Multithreading

Javascript is a single-threaded language that uses web workers to provide simultaneous executions.

WASM does not currently allow multithreading. However, you can utilise alternative low-level languages that support multithreading.

Debugging

An interpreted language’s runtime debugging may seem quicker, but it can also let errors and vulnerabilities slide through the gaps.

WebAssembly as a compiled language, debugging occurs before compilation, meaning the code doesn’t compile if errors are found.

Conclusion

Despite the fact that WASM was developed to fix some of JavaScript’s fundamental flaws, WebAssembly won’t be replacing JavaScript any time soon. In addition, WASM still has a long way to go before it is considered seriously as a revolutionary option.

In contemporary web browsers, WebAssembly code is executed in a virtual machine alongside JavaScript. Developers can combine WebAssembly code with JavaScript to benefit from the advantages of both technologies. JavaScript may call WebAssembly modules, and JavaScript can send and receive data to and from WebAssembly functions, allowing for smooth compatibility.

It makes more sense to think that both languages cooperate to advance and promote browser-based applications. The preferred language for interactive mobile and web apps will still be JavaScript, while developers aiming for large-scale projects with predictable and speedy performance would prefer WASM. Thanks for your attention. Keep Coding! 😉