Web Assembly
Aug 30 2018 06:24pm | | Share

Web Assembly: Introduction

By Pavlo Leheta

JS has been the only choice for developers to write logic on the web up until now. It evolved dramatically - various frameworks based on it were added: Angular, React, React Native, Vue, Flutter, you name it. Such frameworks add a complexity which affects performance. Even though JavaScript is one of the fastest dynamic languages available, the problem is that it cannot compete with the native code of C/C++ and it is not a good assembly language. WebAssembly can help address these problems.

 

What is WebAssembly?

Also referred to as WA or WASM, it is a new low-level binary format for the web. WebAssembly is compiled from other languages and offers maximized performance, portability and flexibility. It is being actively improved and developed at the World Wide Web Consortium known as W3C with engineers from Microsoft, Google, Mozilla and Apple. WA is now supported in all 4 major browsers: Chrome, Edge, Firefox and Safari. Compared to JavaScript, WebAssembly was designed as a compiler target from the very beginning. It is meant to be safer than JS -- it runs inside a sandbox. WA is not here to replace JavaScript, but to complement it and to do the type of work it can do better than JS.

 

Why is WebAssembly Faster?

This is how JS execution looks today. First, the browser parses your source code, compiles and optimizes it and then re-optimizes it and finally executes. All this adds a lot of time before it even becomes interactive. On the other hand, WebAssembly does not have to be optimized when it comes to a browser. It runs in the same environment as JavaScript, but its performance is better. WebAssembly and JavaScript work alongside each other and can freely communicate. So, basically, you can have native C/C++ code compiled to a WASM module which then can be run in a JS ecosystem at a close to native speed. JS helps to run WASM modules. It’s kind of a mix where native speed can be taken as a benefit.

 

Other great advantages of WebAssembly

Portability and flexibility. Not only can JavaScript be compiled to WASM, but also languages like C and C++ which already have an enormous number of libraries and open source apps available. For instance, C++ can be used as a common language across a variety of mobile and web platforms. Currently WebAssembly supports C, C++ and Rust. WASM doesn’t support garbage collection yet, but they are working on it. Kotlin and .NET are experimenting with support in a project called Blazor.

 

One great example of portability is the well-known application AutoCAD from AutoDesk.  It has a huge codebase and libraries written in C++ that can be ported over to the web by utilizing WASM. It is faster than if it was developed in JavaScript alone. AutoCAD is currently used in a browser and it looks awesome!

 

So how to use WebAssembly?

The main toolchain used for WASM is called Emscripten. It compiles a source file into a WASM format and also simulates an entire filesystem for utilization of ported applications. Emscripten includes a C standard library.

 

Let’s take a look at how WebAssembly can be represented and let's also examine a simple example utilizing Emscripten. WASM has a binary and text representation formats. It will define a standardized text format which encodes WASM module into an equivalent to binary formatting way. This is an example C++ function that calculates factorials:

Web Assembly Example

(example from Danny Markov)

Usually developers write modules in C language and compile to .wasm files. These files need so-called “JS glue code” to be loaded and recognized by a browser.

 

For instance, we might have a function in C called "my_Func" that has some useful functionality like processing jpeg conversion, which is a resource intensive process that can be done much faster in native code than in JS. The following command will run the Emscripten compiler.

emcc -s WASM=1 -s EXPORTED_FUNCTIONS=”[‘my_Func’]” -o mygluecode.js mycode.c

 

To break it down:

Web Assembly Table

 

For example:


// import the glue code

<script src=”mygluecode.js”></script>

 

// this is where an interaction between WASM and JS takes place

<script>

     var wasm_loaded = false;

 

     // use WASM’s Module object which is a part of glue code and represents a WASM module

     // tells if WASM module has been loaded

Module.onRuntimeInitialized = function() { wasm_loaded = true; }

    

     // call this function to take advantage of WASM functionality

function callMyFunc(param1, param2) {

     if(!wasm_loaded) {

     return undefined;

}

return Module.my_Func(param1, param2);

}

    

</script>

 

The “Module” object is an interface to WebAssembly. The JavaScript glue code (included in the script tag as “mygluecode.js” file) contains various helper functions to load, unload and work with WASM modules. It is used to interact between the JS and WASM boundaries. In this example, we have a function named callMyFunc which we can use inside our JavaScript to delegate heavy lifting operations and get a return result. Check out another example on how to speed up an Angular application by utilizing WebAssembly.

 

What about the future?

The WebAssembly team plans to implement the following:

  • SIMD – Single Instruction Multiple Data
  • Threads for concurrency – porting multithreaded apps to the web
  • Debugging – source maps, memory inspection
  • Garbage collection - will allow other popular high-level languages to be supported

 

To sum it up  

WebAssembly is a new word in the modern web. This is a secure, flexible, portable low-level language designed to be a compiler target and is an excellent complement to JavaScript. It will help speed up the web in areas where resource intensive processing is required. WA is definitely here to stay and will become increasingly more important in the bright future of the web.

 

References  

https://tutorialzine.com/2017/06/getting-started-with-web-assembly

https://github.com/WebAssembly/design/blob/smaster/TextFormat.md

https://youtu.be/ysFJHpS-O08

https://youtu.be/BnYq7JapeDA

https://webassembly.org/

https://auth0.com/blog/7-things-you-should-know-about-web-assembly/

https://malcoded.com/posts/web-assembly-angular