Wasm instructions are in very concise binary formats that can be loadedover the internet and executed by the Wasm virtual machine.
In this article we’ll discuss when webassembly shines and how to compilea C programme into Webassembly and run it on almost any browser.
Furthermore there is a profiler in action keeping statistics of executedcode which contributes to relatively higher memory consumption.
Attempts to fix JS performance issues
In addition to execution engine enhancements, following actions aretaken to overcome the performance issues in JS.
· Optimisers (e.g. prepack, jso)
· Following rules & conventions
History of browser runtimes
Due to these issues and lack of flexibility different vendors tried to addressthose issues in their own way by providing different browser runtimes. Butnothing was accepted by W3C as a web standard.
· Java Applets
· Google NaCl
How WebAssembly solves these issues
Now web assembly is an open standard. So it will be maintained carefullyand continue for quite a while. On other hand, Wasm doesn’t require users toinstall additional runtimes on the browser. It will be available on webbrowsers by default. So the security and other critical updates are directlypushed by the browser vendor.
When it comes to performance, Wasm has a number of advantages.
· Small in size
· It is already compiled & optimisedby a compiler. As a result the Wasm artifact is quite concise so it can bequickly loaded by the client programme. This will ultimately improve the loadtime.
· Less overhead
· It doesn’t require a garbage collector.The language supports managing memory manually.
· Fast execution
· Wasm code does not require optimisationsas it is already optimised by the compiler. So optimise/deoptimise the code inthe runtime is not a requirement anymore. Which means there is no need for aprofiler as well.
· Low memory footprint
· With the absence of the profiler andother runtime optimisation mechanisms, execution of a Wasm code requiresrelatively low amount of memory.
Use Cases for Wasm
There are no silver bullets. Each technology has its own sweet spot. Thepower of WebAssembly can be utilised well in below scenarios.
· 3D & 2D Games
· Audio/Video streaming
· Fast audio/video codecs
· Image recognition
· Crypto functions
· Reusing existing C/C++ libraries on theweb
· Port existing apps as browser basedapplications (i.e. Autocad Web)
WebAssembly is a virtual CPU which supports machine instructions closerto assembly instructions. But Wasm instructions are hardware/softwareindependent (portable) & safe (sandboxed).
With the current Wasm version there is no direct access to the web APIssuch as DOM or Ajax. It should achieve this via JS. In the future WebAssemblymight be given direct access to the web APIs.
All the major browsers support WebAssembly. Couple of Android browsersand Old Internet Explorer that has reached the end of life, don’t support Wasm.Since it is a W3C standard we can expect Wasm to be supported everywhere on theweb
Development with WebAssembly
As I mentioned before we don’t programme directly in Wasm. Rather,developers choose a language where WebAssembly is supported as a compile targeti.e. C/C++, Rust, Golang (experimental) and a WebAssembly toolchain i.e. Emscripten, LLVM, binaryen, wabt.
A basic WebAssembly development workflow is depicted below.
To demonstrate this I will write a function to calculate Fibonacci valuefor a given number and return.
Setting up the Toolchain
Below are the instructions to set up the Emscripten WebAssemblytoolchain on Linux. For other platforms please refer to this.
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh --build=Release #[or add this to ~/bashrc]
Write a simple programme in C
For the sakeof simplicity I am writing this programme in C.
Note: In thecompilation process emscripten compiler ignores the unused methods. Since thefib() method is not used by any other function at the compile time, we need to“annotate” this function with EMSCRIPTEN_KEEPALIVE so the compilerdoesn’t ignore the function.
Compiling a C programme as a WebAssembly target
emcc hello.c -o hello.html -sEXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'
If the programme compiles successfully, Itshould generate the WebAssembly programme as “hello.wasm”
WebAssembly Interoperability with JS
A functionwrapper can be created for the fib function with the statement below.
var fibProxy = Module.cwrap("fib", "number", ["number"]);
Now we can use the fibProxy object to invokefib() function that we have already compiled to Wasm.
Let’s complete the programme...
We are going to create a wrapper for the fib()function and use it in below web page.
Now we have a complete programme. Let's run ourdemo web site.
Execute the following command in the projectdirectory to create a small web server to serve our web page.
emrun --no_browser --port 8080
Now visit https://localhost:8080/demo.html
The best example is https://web.autocad.com/, the web version of AutoCad. They have lots of modeling and involve lotsof calculations. So far they have had a desktop application. But with the riseof WebAssembly they could easily port their desktop application to the web.
Frameworks for WebAssembly
Blazor is a framework whichsupports WebAssembly on either browser or the server and is developed byMicrosoft. With Blazor developers can write both frontend and backend in C#.
They have achieved this by porting the mono runtime to WebAssembly.
Vugu is a golang based experimentalframework.
TeaVM allows Java developers to writefrontend applications in Java and compile into Wasm.
Asm-Dom allows writingsingle page applications in C++ and it provides access to virtual dom.
Here is a list of languages and frameworks whichsupport WebAssembly.
Future of WebAssembly
Currently the WebAssembly community is workingon introducing a fantastic set of features, such as,
· Exception handling
· Garbage collectionand
· ECMAScript moduleintegration.
For the updated set of features visit https://webassembly.org/docs/future-features/ .
What do you think about WebAssembly? Share youropinion as a comment.