Changing Webscapes – WebAssembly

Ever had a dialogue box pop up and ask you whether you were sure about leaving a webpage? Or had a like button light up after you click on it? If you were born a decade or two ago you would have instead been greeted by non-interactive web pages with static images, text and hyperlinks to other clunky pages. But today, you have JavaScript to thank for the beautiful and engaging web pages we have.

JavaScript allows developers to make dynamic web pages which can interact with users. In the past, projects developed using languages like C or engines like Unreal or Unity were run on web browsers by compiling these projects to JavaScript or more specifically asm.js, a subset of JavaScript. This means that the compiler converted the source code of the project into JavaScript code. However, we now have a new competitor on the block. Web Assembly (also known as wasm or WA) is a new format for the executable code in web browsers that is gaining popularity. Backed and developed by the World Wide Web Consortium (W3C) which has engineers from giants like Mozilla, Google, Microsoft and Apple as its members, it may change the web as we know it.

1_g09zv9WuuH00KfVisRPAOg.png

 

What is WebAssembly?

WebAssembly is a format for binary instructions that can be executed in a stack-based virtual machine in the web browser. It is what the developers call an “assembly-like text format”. Assembly languages or machine codes are formats for a set of instructions that can be understood by the machine. Unlike high-level languages like C or C++ which can be read and comprehended by humans, WebAssembly is designed to be a compilation target for such high-level languages. This means that a developer may develop his project which he wants to deploy on the web using a language best suited for the project and then convert the source code into executable code in the WebAssembly format which can then be run in a web browser. Other than opening doors for web development in a plethora of languages, it is envisioned that it will complement JavaScript.

 

wacomp.JPG
Demonstration of compilation to WebAssembly

 

What will it be used for?

WebAssembly was first demonstrated using Angry Bots, a game developed using the Unity engine. However, Unity much like Unreal already supported compilation to asm.js which allowed execution on browsers. Why do we need a format for executable code which is less legible to humans?

The answer is that being an assembly level language it is faster and more efficient in terms of performance. High-level languages have to go through a number of interpreters, libraries and other software which make the code understandable to the machine. WebAssembly is much more native or closer to machine code than asm.js while being way more legible than a traditional assembly level language. In a textual format, it is legible enough to be debugged and optimised. It allows the developer to access the building blocks of the system.

JavaScript is known to be a powerful language and is ever-expanding due to its community-driven library of modules and libraries. Why would a developer consider using another language while developing a project meant to be deployed on JavaScript’s home-ground?

JavaScript is capable of building any application you can think of. Nonetheless, there are certain scenarios where JavaScript falls short. These can be overcome by writing complex JavaScript code. But rather than increasing the complexity we can let WebAssembly fill the void. Applications which handle a lot of data such as music and video production software like Ableton Pro or Adobe Premiere Pro are difficult to deploy on the web using just JavaScript. Not impossible, but difficult. Even though WebAssembly has mostly been tested with games developed on Unreal and Unity, it may make deploying a wide range of applications on the web a whole lot easier.

 

WebAsmBots_960
 Angry Bots, one of the first web apps developed with WASM.

 

Will it replace JavaScript?

One of the primary objectives of WebAssembly was to complement JavaScript and it does. WebAssembly modules can be easily ported into JavaScript code using the WebAssembly JavaScript API which was built for this purpose. Even though games developed using top-notch engines run smoothly after being compiled to JavaScript or more specifically asm.js, it isn’t capable of handling certain features like shared memory threads efficiently. Thus, WebAssembly provides an alternate compilation target which can be ported into JavaScript applications as and when needed. WebAssembly is specifically designed for this purpose and works efficiently in scenarios where JavaScript fails to shine. WebAssembly will also allow modules for JavaScript to be written in languages like C++ or Rust and in other languages, developers are comfortable with.  If anything, WebAssembly complements and makes JavaScript much more powerful, by being easily portable to it and excelling where it falls short.

Where do we go now?

WebAssembly is gradually gaining support across different browsers. Mozilla has announced that it will support WA in all major browsers. It is enabled by default in Chrome and Edge 16. Even though the primary objective was to support development using C and C++, web development using languages like Rust is also gaining steam. There are talks of WebAssembly supporting more data handling features in the future which will allow languages like Java and C# to be compiled to WA. Not only does WebAssembly increase support for old-school languages, it also presents the prospect of new languages which compile to WebAssembly. Developers can make their own languages to suit their specific needs.

 

DOmjWkpXUAASjob.jpg
Mozilla TechSpeakers speak about WebAssembly in JS Kongress 2017

The only way for WebAssembly to go is upwards, as the possibilities are endless.  The next time you play a game on your browser at an unprecedented framerate or realise how convenient editing videos on your browser is, you know what you have to thank.

Written by Soumik Majumder for IECSE,

Edited by Janice Coutinho for MTTN.

Resources

https://en.wikipedia.org/wiki/WebAssembly

https://webassembly.org/

https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6

https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API

https://hackernoon.com/webassembly-the-journey-a069d6ea18a

https://hackernoon.com/webassembly-the-journey-what-is-wasm-caf9871108aa

Leave a Reply

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑