This is the 28th day of my participation in the August Gwen Challenge.

WebAssembly (Wasm for short) is a binary instruction format for stack-based virtual machines. Wasm is designed as a portable compilation target for programming languages, enabling client and server applications to be deployed on the Web, and it could end privacy and security on the Internet as it is known.

WebAssembly is a new way of coding that can run in modern Web browsers – it is a low-level assembler like language with a compact binary format that runs close to native performance and provides a compilation target for languages such as C/C ++ so that they can run on the Web. It is also designed to coexist with JavaScript, allowing the two to work together. – the MDN Web Docs

WebAssembly before

Every new technology is born to solve some existing problem, WebAssembly is born to solve the network problem.

Front-end applications are getting heavier and more complex these days, not only because of complex logic and large amounts of code, but also because of flaws in the language itself. Brendan Eich created the widely used interpreted programming language JavaScript, making its history partly a history of plugging holes.

There are two main problems with JavaScript.

performance

Like other interpreted programming languages, JavaScript is slow. At least until 2008, it was slow.

Like other interpreted programming languages, JavaScript is slow. At least until 2008, it was very slow. As more and more Web applications adopt JavaScript, the performance war between browsers begins. JIT (Just-in-time Compiler) was introduced to solve JavaScript performance problems. Google’s V8 and Microsoft’s ChakraCore both come with JIts (even multi-stage JIts).

Because it is designed to be a dynamic language, several types of optimizations are available to other programming languages, but not even the fastest and most modern JavaScript runtimes, for example, optimizing compilation strategies ahead of time (AOT).

Robustness and maintainability

With dynamic programming languages like JavaScript, projects can be built quickly, but when they get big, they get messy.

Static typing makes it easier to deal with complex systems, it helps catch type mismatches faster at compile time and makes it easier to optimize.

For example, in dynamically typed programming languages, you might do strange things if you type carelessly, such as trying to add the number 1 to the string “2” and get the string “12”. But this type of error should be caught at development time. In short, dynamic types have a “write before debug” style, while static types involve a “think before write” style.

There are several ways to add static typing to JavaScript:

  • TypeScript: Builds on JavaScript with static type definitions.
  • Reason and PureScript: Translators compile other statically typed languages such as OCaml/Haskell into JavaScript.
  • Asm-js (deprecated) : Defines a strict subset of JavaScript that can be used as a low-level, efficient target language for compilers — specifically allowing compilers to do pre-optimized (AOT) compilation. A statically typed language such as C can be compiled into ASm.js using a source-to-source compiler such as Emscripten.

WebAssembly profile

While asM.js is an improvement over original JavaScript in terms of performance, it is still JavaScript at heart. In some cases, the generated files become too large and create a bottleneck for code that needs to be transferred frequently.

Since the ASM.js code is primarily used as a compilation target and won’t be edited manually, it was necessary to invent a binary format, which is basically where WebAssembly came from:

WebAssembly (Wasm for short) is a binary instruction format for stack-based virtual machines. Wasm is a portable compilation target designed for programming languages that enables client and server applications to be deployed on the Web. – WebAssembly website

WebAssembly was first released in 2015, with the first demo running “Angry Robots” in Unity. More Games deployed on WebAssembly can be played on WebAssembly Games. Another classic demo is Mozilla’s Zen Garden (Epic).

On December 5, 2019, WebAssembly became the official “fourth language of the Web” after HTML, CSS, and JavaScript.

WebAssembly is a different language from JavaScript, but it is not intended to replace JavaScript. Instead, it is designed to complement and work in tandem with JavaScript, allowing Web developers to take full advantage of both languages.

Existing code embedded in larger JavaScript/HTML applications can be reused through WebAssembly, which can be anything from simple helper libraries to computation-oriented task offloading.

What can WebAssembly do?

WebAssembly provides excellent performance, which means web sites can run almost as fast as normal software outside of a browser. It allows browsers to run software and games that were previously unavailable due to performance issues, and it will enable complex WebVR experiences.

One of the WebAssembly applications to find very interesting is Microsoft’s Blazor. What Microsoft has done is basically port their entire.NET platform to WebAssembly and add a UI library on top of it.

WebAssembly try

In WebAssembly, there are two common file formats that can be converted to each other. :

  • Wat: a text format based on S-expressions and an intermediate form designed to be exposed in text editors, browser development tools, etc.

  • .wASM: A binary format that can be read and run by a WebAssembly virtual machine.

If you are just trying WebAssembly, you can use the WasmExplorer to enter some C/C++ code. You can convert C/C++/Rust or other source code to.wat format and then compile the.wat format into.wasm.

Most Web browsers already support WebAssembly, so try opening your browser’s console and typing: WebAssembly.compile.

For starters, the best tutorials are official documentation, compiled into WASM format in your most familiar programming language.

Wasmtime is a stand-alone runtime for WebAssembly. Wasmer is not only a runtime, but also supports the use of ultra-lightweight containers.

The future of WebAssembly

WebAssembly has many more features under development or in the proposal stage that, while not yet complete, will affect client-side Web development, desktop applications, server-side functionality, legacy modernization, games, serverless, and more.