WebAssembly (wasm) – A turning point for web

WebAssembly (Wasm) is a low-level assembly-like language that defines a binary format and corresponding text for a stack-based virtual machine.

WebAssembly is an emerging standard as the biggest advancement to the Web Platform which includes people from the W3C Community group like Apple, Google, Microsoft, Mozilla etc. Firefox, Chrome, latest versions of Edge and Safari browsers support the wasm format on Windows, MacOS, Linux and Android, Firefox being the first one.

Features

  1. An improvement to JavaScript and Browser: Import performance critical part like a standard JavaScript module in Wasm which is much smaller than original JavaScript text, hence smaller payloads leading to faster delivery.
  2. A new language: It defines an AST (Abstract Syntax Tree), a binary format which can be authorized and debugged in a readable text format.
  3. A Compile Target: Provide binary support across the entire web platform to all the languages.
  4. Efficient: Binary format allows it to be small in size and hence reduced loading time.
  5. Fast: It executes at native speed with the help of common hardware capabilities provided with platforms.
  6. Safe: It provides sandboxed execution environment inside existing JavaScript VM making the code memory-safe. It also enforces the same-origin and permissions when embedded in the web browser.
  7. Open and debuggable: The textual format allows to debug, test, experiment, optimize, learn, teach, and write programs by hand.
  8. Part of the open web platform: It doesn’t support any version and is backward compatible.

Use of WebAssembly

It can be used for high-performance web-apps and many existing productivity apps like-

  • Games
  • Computer-aided design
  • Video and image editing
  • Scientific Visualization
  • Email
  • Social networks
  • Word processing
  • Compression
  • Face detection
  • VR and augmented reality

Why WebAssembly?

  • Javascript or its subset  asm.js doesn’t have objects, garbage collection,  just in time compiler pauses, SIMD, threads, shared memory and other primitives. Even to run asm.js, two parsers are required one for full JavaScript language and other for a dedicated parser for the subset which is another maintenance task.
  • It runs the code on the web at a native speed written in multiple languages.
  • It runs alongside JavaScript and enables to share functionality between the two by loading WebAssembly modules using WebAssembly Javascript APIs. WebAssembly’s performance and power can be clubbed with JavaScript’s expressiveness and flexibility in the same app.
  • With a compressed and efficient AST, it provides cost-effective parsing.
  • Loading large data can take 20 – 30 seconds in ASM.js which is too long but with a compressed AST encoding, it takes a couple of seconds.
  • It eliminates the need for browser plug-ins to support graphics-heavy and online games.
  • C/C++ applications can be kept on the web without rewriting.
  • It allows importing compute-intensive applications and scientific simulation to the web platform.
  • It also supports non-web applications such as the mobile apps, Internet of Things and JVM.

How does WebAssembly work?

Translate the code modules into Wasm using any compiler tool then load it into a JavaScript app, where it will be executed by the browser.

Creating a WebAssembly module instance with JavaScript 

When the page is loaded, the JS file is downloaded and the wasm file is fetched containing WebAssembly binary code.  This binary file will be extracted into the buffer and the engine will start compiling the code. While compiling, main thread should not be blocked because it handles the DOM, layout, and JavaScript. That’s why WebAssembly.instantiate returns a promise which will give an instance. But the returned promise is just like an instruction book, to create an instance a second parameter “imports” object will also be required. Each import can be one of the kind namely, values, function closures, memory, and tables.

Values: Basically global variables with one of the available types – integers and floats.

Function closures: Function closures are the imports which allow to pass JavaScript functions along with instance to interact with the DOM and are then called by WebAssembly.

Memory: The memory object makes it possible to achieve manual memory management.

Tables: This import is related to security by using function pointers. Function pointers are the variables that point to a memory address of the function. The functions are JavaScript objects in web pages and hence they reside in memory addresses outside of WebAssembly’s memory. So to point these, we need to put this address in our memory.

The instance is successfully instantiated with the compiled code and imports. It can now be used to call methods.

WebAssembly: An object namespace for all WebAssembly related functionality.

WebAssembly.Module(): A WebAssembly.Module object contains compiled code of WebAssembly which is stateless and can be efficiently shared.

WebAssembly.Instance(): A WebAssembly.Instance object contains Exported WebAssembly functions which allow Javascript to call WebAssembly code. Unlike WebAssembly.Module, it  is stateful and executable

WebAssembly.instantiateStreaming(): The WebAssembly.instantiateStreaming() function compiles and instantiates the WebAssembly code. returning.

WebAssembly.Memory(): A WebAssembly.Memory object is a resizable ArrayBuffer. It holds the raw bytes of memory accessed by an Instance.

WebAssembly.Table(): A WebAssembly.Table object is a resizable typed array of values that are accessed by an instance like function references.

WebAssembly.CompileError(): Creates a new WebAssembly CompileError object.

WebAssembly.LinkError(): Creates a new WebAssembly LinkError object.

WebAssembly.RuntimeError(): Creates a new WebAssembly RuntimeError object.

Conclusion

The web is constantly evolving, and with the introduction of WebAssembly now developer can build apps that run on browsers at native speed. Existing code in C, C++ etc can now run on the browser without being re-written. This could be the turning point for web. So, are you ready to embrace it?

Mapu

I am a technology freak with passion for UI technology.

Leave a Reply