WASM is AWSM

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 lik…


This content originally appeared on DEV Community and was authored by vibalijoshi

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 Cobalt! 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.

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

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

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

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 : an online IDE tool developed by Mozilla that can be used to compile C/C++ and Rust code into WebAssembly (WASM).
    image

  2. Setup required: If you are a C/C++ lover you can use Emscripten : 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

  • If you prefer Rust then try: rustc

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.

  3. We use emscripten to generate everything we need to run our code, as WebAssembly, in the browser.

    1. In new directory make a .c file and name it demo.c . Copy paste this code to this program file. 
    #include<emscripten/emscripten.h>
#include <stdio.h>

int main() {
    printf("Hello World\n");
    return 0;
}
    1. 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 -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, 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

image
("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


This content originally appeared on DEV Community and was authored by vibalijoshi


Print Share Comment Cite Upload Translate Updates
APA

vibalijoshi | Sciencx (2021-10-05T17:10:10+00:00) WASM is AWSM. Retrieved from https://www.scien.cx/2021/10/05/wasm-is-awsm/

MLA
" » WASM is AWSM." vibalijoshi | Sciencx - Tuesday October 5, 2021, https://www.scien.cx/2021/10/05/wasm-is-awsm/
HARVARD
vibalijoshi | Sciencx Tuesday October 5, 2021 » WASM is AWSM., viewed ,<https://www.scien.cx/2021/10/05/wasm-is-awsm/>
VANCOUVER
vibalijoshi | Sciencx - » WASM is AWSM. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/05/wasm-is-awsm/
CHICAGO
" » WASM is AWSM." vibalijoshi | Sciencx - Accessed . https://www.scien.cx/2021/10/05/wasm-is-awsm/
IEEE
" » WASM is AWSM." vibalijoshi | Sciencx [Online]. Available: https://www.scien.cx/2021/10/05/wasm-is-awsm/. [Accessed: ]
rf:citation
» WASM is AWSM | vibalijoshi | Sciencx | https://www.scien.cx/2021/10/05/wasm-is-awsm/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts