An Overview of WebAssembly

Asmaa Abobakr
DSC Alexandria
2 min readJan 1, 2021

--

photo by logrocket

Abstract

In Web development, we could write the program and needed functions in a js file. The execution of code using this method is slow compared to other languages.

In this article, we will discuss a way that you can build really fast and high-performance code and have it run inside your web application.

What is WebAssembly?

Before explaining WebAssembly, we need to remember What is Assembly? and How to work with it?

Assembly language is a low-level programming language designed for a specific type of processor.

photo by GeeksforGeeks

There are two ways to produce Assembly code: the first way is that you can write it from scratch, and the second way is by compiling source code from a high-level programming language (C, C++, etc…). And using Assembler you can convert the assembly code to machine code(ones and zeros).

WebAssembly (Wasm)

WebAssembly is a new type of code that can be run in modern browsers like chrome, firefox, and safari, and provides new features.

Wasm isn’t a javascript replacement, it is designed to run alongside JavaScript. It has the ability to run native speed inside browsers because it provides languages like C/C++.

photo by XENONSTACK

The modern web browser’s virtual machine is expected to run both JavaScript and Wasm together.

WebAssembly takes less time than parsing JavaScript because it’s closer to code and there’s no need for re-optimizing.

Features of WebAssembly

  • Threads: an advantage of shared memory
  • Debugging: basic debugging already exists, and works on source maps and memory inspection
  • Garbage collection: we need to be able to efficiently allocate and manipulate managed objects directly from Wasm.

Applications

  • WebSight (WebAssembly and Computer Vision)

Real-time face detection demo using OpenCV

Ex: Wasm version…> 16:18 frames per second

JavaScript version …> 2:3 frames per second

  • Optimizing image sizes.

--

--