An overview to WASM

Hey there,

I'm glad to see you here.

In today's article, we will take a look into the concepts of web assembly And, I will walk you through the initial setup for configuring your working environment for web assembly development.

Before starting, Let me answer some of the questions.

What is Web Assembly?

WebAssembly is a new type of code that can be run in modern browsers, which brings new features and significant improvements to performance.

Well, it's not intended to write the whole assembly code by hand. It is designed to be an effective compilation target for source languages like C/C++, rust, etc.

Why Web Assembly?

Web assembly allows developers to run code written in several programming languages on the web, at near-native speeds while leveraging hardware capabilities that are common to most platforms.

A web platform has two parts:

A virtual machine (VM) that runs the Web app’s code. e.g. the JavaScript code that powers your apps.
A set of Web APIs that the Web app can call to control web browser/device functionality and make things happen. (DOM, CSSOM, WebGL, IndexedDB, Web Audio API, etc.).

Hmm, but why to even use web Assembly? All this stuff seems unnecessary. JavaScript works well when developing for the web.

Yeah. JavaScript is great, and 90% of the time, you don't even have to think about developing in web Assembly.

But when while developing a performance-intensive web application, JavaScript alone wouldn't be a good choice.

Performance intensive web app examples, 3D games, Virtual and Augmented Reality, computer vision, image/video editing, and serveral other domains that demand native performance.

Will it replace JavaScript?

Hell No!

It is built to complement and work alongside JavaScript, allowing web developers to take of both.

JavaScript is a high-level language, flexible and expressive enough to write code. It also has a huge ecosystem that provides powerful frameworks, libraries, etc.

WebAssembly is a low-level assembly-like language. And it has a compact binary format that runs with near-native performance.

With Web Assembly in the browser, the virtual machine that we talked about earlier will now load and run two types of code — JavaScript and WebAssembly.

Right now, you must be thinking, how do both languages work together?

Yeah JavaScript Web Assembly API wraps the web Assembly code into the JavaScript function that can be called normally.

And yeah, Web Assembly can also import and call the normal JavaScript function "synchronously".

Wanna know more? WebAssembly - JavaScript | MDN

Now that we are clear why, how, what is Web Assembly. Let's dig into

Key Concepts of Web Assembly

The JavaScript API provides developers with the ability to create modules, memories, tables, and instances.

By the way, what are these?

Modules

It represents a WebAssembly library that has been compiled by the browser into executable machine code. And that's pretty much it.

Nothing Special.

Memory

It is an ArrayBuffer that contains the linear array of bytes read and are written by the low-level memory instruction.

This is a kind of technical definition of memory. That's it. Nothing much to worry about.

If you're familiar with C++, imagine this as a Vector. Which is also known as a resizable array. That's it!

Table

It's a resizable array too, but it stores the references.

References of what??

JS Functions, etc. For safety and portability reasons.

Instance

It's a module that is paired with all the states, including Memory, table, and set of imported values.

These were some definitions or concepts in the sense which are required when dealing with WASM.

On the side-note, Since JavaScript has complete control over how Web Assembly code is downloaded. compiled and run.

JS Developers could even think of WebAssembly as just a JavaScript feature for efficiently generating high-performance functions.

Above we talked about the raw primitives that WebAssembly adds to the Web platform: a binary format for code and APIs for loading and running this binary code.

In my next article on WASM, I will walk you through using WASM in your application.

Excited to learn?

Feel free to sign up for my newsletter. I'm not regular currently for writing articles due to my pathetic timetable. But I will try to publish new Articles Every Week from now.

Cya, Happy Learning 😄