DEV Community

Cover image for WASM is AWSM
vibalijoshi
vibalijoshi

Posted on

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

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.
  • 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;
    }
    
  • 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

Discussion (17)

Collapse
ashoutinthevoid profile image
Full Name • Edited on

It's a bit of a nitpick, but

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.

Unity uses C#, and it's already multiplatform. Right idea, but maybe not the right example. A more direct example would be the existing port of the Doom 3 engine(which is C++) to wasm.

There's also a lot of caveats being discussed. Among them, a growing tendency for organizations to disable wasm by default due to it's abuse by nefarious crypto mining implementations. Not a showstopper, but it can be a concern to resolve before making wasm an integral part of your application (potentially without fallback).

Wasm is definitely exciting (perhaps moreso outside the browser, for me), but there are some thorns to worry about on this rose bush.

Collapse
vibalijoshi profile image
vibalijoshi Author

Ahh right! Thanks for pointing it out.

Great view about the possible not so good things about wasm, keeps the whole sentiment balanced!

Collapse
ashoutinthevoid profile image
Full Name

My pleasure, I'm glad it wasn't received as too negative.

The more you and others like you produce these articles and spread awareness, the more people we'll have to help shepherd the future of wasm. There's so much great potential to be realized.

Thread Thread
vibalijoshi profile image
vibalijoshi Author

Agreed! 🤩

Collapse
pedro profile image
Pedro M. M. • Edited on

WASM is awesome, is multi-threading ready yet? I can't wait to be able to code some super efficient multi-threaded module in rust and just call it from js. Also, electron apps could benefit greatly from this.

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.

This is a very interesting discussion. Anyone that have tried to build a desktop application with both: native bindings and css/html/js knows how delightful the experience of designing something with CSS is vs native bindings. This is one of the main reasons why electron apps tend to be more visual appealing and explains their increasing growth in the market (besides them being multi-platform, ofc).

WASM is a step in the right direction and could greatly improve the developing (and user) experience of desktop apps

Collapse
ashoutinthevoid profile image
Full Name • Edited on

Maybe there's a specific point about multithreading im not giving enough weight, but Electron apps are already benefiting from using Rust.
Discord uses it in their client (noted here though sparse on details; not the focus of that article). Aside from wasm, you also have the option of compiling a native node module. Example. And there are other ways to call a separate binary to do work that isn't ideal for Js.

Personally I didn't find the neon bindings any harder than wasm-bindgen, and in my use cases thus far I haven't had a reason to prefer wasm. It's a cool option to have though!

Wholeheartedly agree on the ease of web style gui development compared to other options.

Collapse
rreverser profile image
Ingvar Stepanyan

Yes, multithreading has been stable for some time now. Recently I wrote a guide on configuring and using it from various environments: web.dev/webassembly-threads/

Collapse
vibalijoshi profile image
vibalijoshi Author

Yes agreed! WASM is really exciting and a lot more people can now contribute towards web!
Also give this a read: rustwasm.github.io/2018/10/24/mult...

Collapse
jannetrosel profile image
JannetRosel

Hey, it’s good to be back. Thanks for having me. I’m really excited about this topic today as well. Rituel Vaudou Pour Séparer Deux Personnes

Collapse
ben profile image
Ben Halpern

Great post

Collapse
vibalijoshi profile image
vibalijoshi Author

Thank you so much 🤩

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Can't wait for more tutorials that actually interact with DOM.

Collapse
spiritbro1 profile image
spiritbro1

this is so cool, i just know today that we can basically create wasm script using other language than rust thanks for the info

Collapse
vibalijoshi profile image
vibalijoshi Author

Yeah WASM is really cool!
Thanks for the appreciation 🚀

Collapse
tamusjroyce profile image
tamusjroyce

Deno runs wasm natively. C# can as well (nuget package). it isn’t just a front-end technology. I am curious if there will be a RISC-V open source processor that can run it via hardware.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
poker profile image
Poker9x

test