WebAssembly -Part I | An Introduction
What if web applications could perform as well as native applications..?
Intro
Ask anyone and they’ll say the three basic blocks of modern websites are HTML | CSS | Javascript.
And what’s one thing these blocks have in common? Answer: They’re official web standards and are expected to work natively on any web browser. Plus, no ugly plugins or installations required. And that’s great! (if you’re still out there… sorry Flash and Java Applet developers).
However, you might be surprised to know that since 2017 (depending on who you ask) Web Assembly is now also part of this elite set of official standards.
So whenever you think of the web, get rid of this picture:
And get used to this one:
And it’s not like Web Assembly is an experimental feature of the web. All major browsers (i’m not talking about you IE) have implemented the Web Assembly Standard, and as a developer you can use it now!
Need a little bit of proof? Check this demo from WebAssembly.org. Even though it runs on the web, little (if none) JavaScript was used to create it. Yeah you guessed it, Web Assembly was used.
Just in case you were wondering… NO. WEB ASSEMBLY IS NOT A REPLACEMENT FOR JAVASCRIPT! We’ll get to that later…
Ok, so what is WA?
WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C#/C++, enabling deployment on the web for client and server applications. WebAssembly defines an Abstract Syntax Tree (AST) which gets stored in a binary format. ( https://webassembly.org/)
Now that sounds like a definition right? Well, what is it actually?
First, let’s remember that JavaScript is a recognized standard/specification. I.e. there’s actual documentation of what each piece of JavaScript should do and how it should behave.
Second, let’s also remember that each browser uses a JavaScript engine (also referred to as a Virtual Machine) to interpret and run JavaScript code (based on the official specifications).
Ok, back to Web Assembly. In a nutshell, Web Assembly is a W3C standard. This standard defines a binary format. Files with this format have a .wasm extension. In turn, these files can contain all sorts of machine instructions (i.e. compiled code). E.g. You could have a Math.wasm file with all sorts of helper mathematical functions.
Now, because we’re also talking about a standard, any engine can run .wasm files as long as they implement that standard.
So here’s where the money is: Web Assembly is intended to run on web browsers’ JavaScript engines. All major browsers have added support. So you can easily call you’re wasm code from JavaScript and vice-versa.
How it works?
- Developers write code in a growing subset of languages (see the Language Support section below). E.g. C++
- Developers use a compiler with WA support, and compile the code into WA byte-code file(s).
- The browser’s Javascript Engine translates wasm into machine code and runs it.
Example
You can get the below example on Github by following this link.
See the below image. Notice how our work space contains an index.c |index.js | index.wasm file. What we’ve done in this example is:
- Create a couple of C functions.
- Then we compiled our C code to wasm and created the index.wasm file. Note: How to compile your code and create your .wasm files as you develop your projects is a topic for another day!. In this case, as it’s a great tool for getting started, we used Wasm Fiddle to compile our C code and download the wasm output file.
- Now, our web application’s JavaScript can fetch the wasm file and call our C functions (which are now in wasm binary format).
- Lastly, when the user clicks on the below buttons, JavaScript calls the C functions and uses the output to update the DOM. See the counter button below for instance.
Why WA?
Web Assembly is an excellent choice for your tech stack if creating high-performance web apps. It allows us to develop CPU-intensive calculations and executions on the front end.
Native-Speed: WebAssembly allows us to run code at near native speed which supports many other languages.
No Plugins: No browser plug-in needed since the browser supports WA out of the box.
Work with JavaScript: Built to communicate with JavaScript where the objects can be shared in both directions.
Use cases?
- Gaming
- AI / machine learning
- VR/AR support
- Speed video & audio streaming / Editing
- Image recognition & Scientific visualization and simulation etc.
- Any other CPU intensive work that JavaScript can’t handle as fast.
Does WA replace JavaScript?
No. Web Assembly does not replace JavaScript. It compliments JavaScript by working together.
Most likely you would want call wasm from JavaScript when you need to do something that’s too CPU intensive for a relatively slow language like JavaScript. See this example JavaScript snippet that drives home the point:
Language Support
The WA language support is ever evolving. The key to having language support is having a language compiler that is able to target Wasm. For instance, if there were no Wasm-supported compiler for Java, then Java is not a supported Web Assembly language.
Here’s some examples of compilers:
C/C++ EmScripten /WebAssembly for Node.js
a. EmScripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.
b. WebAssembly for Node.js : https://www.npmjs.com/package/webassembly
Rust — Rust to WebAssembly
WebAssembly is an officially supported target by Mozilla. https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm
C# — Blazor.Net
Bazor is an experimental .NET web framework using C# and HTML that runs in the browser.
https://blazor.net/
Several other languages are supported by different compilers.
For more details: https://github.com/appcypher/awesome-wasm-langs
Browser Support
[source: https://caniuse.com] 30MAR19
What’s next?
Do stay tuned to this feed. On part II of this Web Assembly series we plan on demonstrating how to set up a dev project and any necessary compiler in order to produce wasm files and bake them right into your application.
