The current web technologies focus on a functionality-rich approach. Take JavaScript, for example. Using JavaScript, you can manipulate DOM, draw beautiful graphs and even run a game on the browser. However, executing JavaScript code in the browser is comparatively slow for executing performance-oriented tasks. In this article, we’ll take a closer look at WebAssembly. Let’s get started.
What is WebAssembly?
WebAssembly is a new low-level language that runs on modern web browsers. It offers a compact binary format capable of performing at near-native performance. WebAssembly’s design choices match the performance of programming languages such as Rust, C++, and C, which offer native performance as they can communicate directly to hardware. WebAssembly converts source code written in C, C++, and Rust to low-level language, acting as an effective compilation target for these programming languages. It opens up the path for web apps to run near-native speeds on the web. To understand the complete picture, we need to start with JavaScript. JavaScript is the language of the web. It is ubiquitously present in all modern web applications. However, JavaScript is slow as it is a dynamically-typed language. During runtime, type checks take place, and the code is converted to machine code dynamically by the V8 interpreter. Only after that, the machine code is executed. The inclusion of WebAssembly in V8 opens the door to developing and running high-performance apps on the web. It enables developers to write a specific part of their codebase in C, C++, or Rust. However, that doesn’t mean you must write all your app code in WebAssembly. All you need to do is write your web app to call WebAssembly APIs and functions via JavaScript. JavaScript frameworks can utilize WebAssembly to boost developers’ performance while offering excellent out-of-box functionality. A great example of using WebAssembly is running FFmpeg, a powerful video processing tool, on a browser. Earlier, you could not run FFmpeg using Emscripten, a compiler toolchain, to WebAssembly. However, in recent times, it is now entirely possible to run FFmpeg in a browser with the ffmpeg.wasm. This JavaScript/WebAssembly port lets you slice, dice, and covert videos directly inside browsers.
WebAssembly Features
WebAssembly’s features are simple and straightforward. It is fast, portable, and efficient. By default, WebAssembly takes advantage of the underlying hardware to offer native-like execution speeds. It is also secure, considering it runs in a sandbox environment, just like JavaScript runs on a browser. Even though WebAssembly is a low-level assembly language, it still offers a debuggable interface with a human-readable text format. So, if you want to debug the WASM code, you can open up the code in the text editor and debug just like any other programming language. Lastly, the browser doesn’t wait for the whole WebAssembly code to download for compilation to start. For example, the browser will begin compiling the WASM code as soon as it receives it. So, for a 500 KB WebAssembly payload, the browser will start compiling starting from the very first byte it receives.
Will WebAssembly replace JavaScript?
WebAssembly works well within the web ecosystem. So, if you opt to use WebAssembly, you don’t have to replace anything. WebAssembly works with JavaScript to enable you to write performance-based web apps. When working on your web app, you can call the WASM function within your JavaScript code. You would only want to use WebAssembly for CPU-intensive tasks in a real-world scenario. Moreover, WebAssembly cannot access or manipulate Document Object Model(DOM) objects. And that’s why you still need JavaScript to develop web apps.
WebAssembly Limitations
WebAssembly does come with some limitations. These limitations include the following:
WASM cannot do UI or front-end manipulation as it cannot interact with DOM. To overcome this, you need to use JavaScript. WASM doesn’t offer any memory management tool. This means it doesn’t provide a garbage collector. WebAssembly does have some security concerns, especially for web browsers. Currently, there are no tools to validate the WASM code. So, if someone inserts malicious code, there is no way to check it. Even though WASM offers a human-readable text format for programmers, it still can be hard to analyze and debug.
WASM Roadmap and Community-Support
WebAssembly is new and still growing. Four major browsers, including Edge, Chrome, Firefox, and WebKit, currently support it. So, if you’re creating for the web, it is still not “yet” an ideal pick, as not all browsers support WASM. WASM follows web standards. The W3C WebAssembly Working Group and Community Group are working with major browser vendors to make WASM more mainstream. To know more, check out their Roadmap page.
Final Words
WebAssembly gives developers the necessary tool to create high-performance web apps. It offers specialized execution of code for faster output. However, it is still in its infant stage. WASM still needs time to get community-wide support. As of now, only four major browsers support WASM. Next, you may look at Web Assembly Part 2: Goals, Key Concepts, and Use Cases.
