WASM is AWSM
Tags: webdev, javascript, programming, tutorial
Published: 2021-10-05 17:10:10

> We live in times where you learn JS to write server side code and desktop apps (electron), and you also learn C++ / Rust to create browser apps.


Does this sound strange? well this is kindaaa true 😦


With advent of JavaScript runtime environments like Node.js it is possible to write server side code with JS and not learn other languages like PHP,  C++, Java and JSP, Python,  Ruby on Rails. Hence a single person can just master JavaScript and write both frontend and backend code without any hassle.  

Even though JavaScript is no doubt the most known language, not everyone is a master in it. Let's say you make a game using unity and C++ and you want to make it available for the web (as in the browser) but for that you would require to learn JavaScript. This would restrict a lot of possible amazing talented people who want to contribute to the web but cannot. **Here is where the the gangsta WebAssembly arrives.** 


## WASM

WASM or WebAssembly allows programmers to write application for the web other than the beloved JavaScript. You can write code in languages such as C, C++, Rust, Python, Go and even COBOL! FYI WebAssembly is a low-level assembly-like language.
As mentioned the case of a game developer above; The WASM format removes the need for browser plug-ins to support online gaming and makes it possible to support graphics-heavy games. 

You can use it for:
- Better execution for languages and toolkits that are currently cross-compiled to the Web (C/C++, GWT, …)
- Image / video editing
- Games: Casual games that need to start quickly, AAA games that have heavy assets, Game portals (mixed-party/origin content).
- Peer-to-peer applications (games, collaborative editing, decentralized and centralized).
and many more, check out [here](https://webassembly.org/docs/use-cases/)

As the MDN Docs say:

> WebAssembly is a new type of code that can be run in **modern web
> browsers** — it is a **low-level assembly-like language** with a compact
> **binary format** that runs with **near-native performance** and provides
> languages such as **C/C++, C# and Rust** with a compilation target so that
> they can run on the web. It is also designed to run alongside
> JavaScript, **allowing both to work together.**

### Browser support 
 Firefox and Chrome browsers currently support the wasm format on Linux, MacOS, Windows and Android. The latest versions of Edge and Safari now include WebAssembly support as well.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8fmjs4r2ov60u4nzd9x.png)

 
### Low level assembly-like language
This is how WASM works under the hood in very simple words:
- High level languages like C, C++ and Rust are compiled into binary format, that is, .wasm and text format .wat.
- The source code written in C, C++ and Rust is compiled to .wasm using a compiler.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg92pmmug97ve6325u7j.png)
 

### Compatibility with JS
Remember ⚠⚠
It is not an alternative to JavaScript. It works alongside JavaScript, replacing **asm.js** (WASM's old competitor) as the compilation target for C/C++ applications.
Bonus read: [Why WebAssembly is Faster Than asm.js](https://hacks.mozilla.org/2017/03/why-webassembly-is-faster-than-asm-js/)


### Let's give it a try!
Here is the list of languages that web assembly supports:
https://github.com/appcypher/awesome-wasm-langs#contents

 1. ***Without any setup*** : To just get a feel about how the whole webAssembly concept looks like you can check out [WebAssembly Studio](https://webassembly.studio/) : an online IDE tool developed by Mozilla that can be used to compile C/C++ and Rust code into WebAssembly (WASM).
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m7ts52lihuvk6mysu0z.png)
 

 2. ***Setup required:*** If you are a C/C++ lover you can use [Emscripten](http://kripken.github.io/emscripten-site/) : a complete compiler toolchain to WebAssembly. 

- C/C++ code can be compiled to .wasm using Emscripten SDK. Later, the .wasm code can be used with the help of javascript in your html file to display the output.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzc8vkcdfp4am0bjrro8.png)
 

- If you prefer Rust then try: [rustc](https://www.hellorust.com/setup/wasm-target/)

####  Compiling C/C++ to WebAssembly

 1. As explained above we would need to set up Emscripten Environment for C/C++.
 2. Setup the Emscripten SDK following [these instructions](https://emscripten.org/docs/getting_started/downloads.html).
 3. We use emscripten to generate everything we need to run our code, as WebAssembly, in the browser.

- In new directory make a .c file and name it  `demo.c` . Copy paste this code to this program file. 
    
    ```c
    #include<emscripten/emscripten.h>
    #include <stdio.h>
    
    int main() {
        printf("Hello World\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:
    
    ```terminal
    emcc demo.c -s WASM=1 -o demo.html
    ```
    

    

The options we’ve passed in with the command are as follows:

-   `-s WASM=1`  — Specifies that we want wasm output. If we don’t specify this, Emscripten will just output  [asm.js](http://asmjs.org/), as it does by default.
-   `-o demo.html`  — Specifies that we want Emscripten to generate an HTML page to run our code in (and a filename to use), as well as the wasm module and the JavaScript "glue" code to compile and instantiate the wasm so it can be used in the web environment.

At this point in your source directory you should have:

-   The binary wasm module code `demo.wasm` : A WebAssembly file generally ends with `.wasm` and it contains the **binary instructions** as well as **data** (_memory_) generated during compilation.
-   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`

### How to run this?
Open the resulting `demo.html` in your browser. Make sure that it is updated to avoid any compatibility issues. 

### The output
If you successfully followed this then you would get this output in your browser’s JavaScript console. [Here is how you can find your console](https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/) 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgltzrwtky3i8hcj8tqs.png)
_("Hello World" would be displayed)_

Congratulations! You did it 🎊

### Bonus
You can also learn web assembly and write native code directly. But it is quite tough hence people do not prefer that. 

Interested to know more? Read the undisputed [MDN docs on WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)