WEB ASSEMBLY

Definition

WebAssembly was first announced in 2015, and the first demonstration was executing Unity's Angry Bots in Firefox, Google Chrome, and Microsoft Edge.[3]

Web Assembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.[1]

WebAssembly (sometimes abbreviated Wasm) is an open standard that defines a portable binary-code format for executable programs, and a corresponding textual assembly language, as well as interfaces for facilitating interactions between such programs and their host environment.[3]

The Emscripten SDK can compile any LLVM-supported language's (such as C, C++ or Rust, among others) source code into a binary file which runs in the same sandbox as JavaScript code.[3]

In shorts, we can run any supporting language code into browser environment.

WebAssembly delivers significant performance gains because modern browser engines can parse and execute its binary format an order of magnitude faster than JavaScript. So you can take C/C++ code, translate it into wasm using a compiler tool like Emscripten, and load the generated wasm module into a JavaScript app, where it will be safely and efficiently executed by the browser.[2]

Code is compiled to a standard byte code format (.wasm files) that the browser can run together with JavaScript code.[8]

What does it replace or change?

1. The wasm format removes the need for browser plug-ins to support online gaming.
2. It works alongside JavaScript, replacing asm.js as the compilation target for C/C++ applications.
3.  It allows programmers to put large C/C++ applications on the web without rewriting them.

Toolkits

What is Pyodide?

Pyodide brings the Python 3.8 runtime to the browser via WebAssembly, along with the Python scientific stack including NumPy, Pandas, Matplotlib, SciPy, and scikit-learn. The packages directory lists over 75 packages which are currently available. In addition, it's possible to install pure Python wheels from PyPi.[4]

Pyodide is an experimental project from Mozilla to create a full Python data science stack that runs entirely in the browser [5].

Prior art

Projects like Brython and Skulpt are rewrites of the standard Python interpreter to JavaScript, therefore, they can run strings of Python code directly in the browser. Unfortunately, since they are entirely new implementations of Python, and in JavaScript to boot, they aren’t compatible with Python extensions written in C, such as NumPy and Pandas. Therefore, there’s no data science tooling.[5]

For more information read reference [5].

What is Blazor WebAssembly?

Blazor is an open source and cross-platform web UI framework for building single-page apps using .NET and C# instead of JavaScript [6].

Blazor WebAssembly is now the second supported way to host your Blazor components: client-side in the browser using a WebAssembly-based .NET runtime. Blazor WebAssembly includes a proper .NET runtime implemented in WebAssembly, a standardized bytecode for the web. This .NET runtime is downloaded with your Blazor WebAssembly app and enables running normal .NET code directly in the browser. No plugins or code transpilation are required. Blazor WebAssembly works with all modern web browsers, both desktop and mobile.[6]

Your C# code can easily call JavaScript APIs and libraries. You can continue to use the large ecosystem of JavaScript libraries that exist for client-side UI while writing your logic in C# [7].

When using server-side code execution, Blazor takes care of seamlessly executing any JavaScript code on the client [7].

Delphi-style VCL on WebAssembly

               For Delphi peeps, that means you can use Delphi RTL library (and Elements and Island RTL) in web applications.

Just Look at the code at right side, your pascal code could run inside browser through Delphi VCL based Web Assembly. For Information read blog Reference [8].

Web Assembly for Java Developers

JWebAssembly

JWebAssembly is a Java bytecode to WebAssembly compiler. It uses Java class files as input. That it can compile any language that compile to Java bytecode like Clojure, Groovy, JRuby, Jython, Kotlin and Scala. As output, it generates the binary format (.wasm file) or the text format (.wat file). The target is to run Java natively in the browser with WebAssembly [10].

TeaVM

               TeaVM is an ahead-of-time compiler for Java bytecode that emits JavaScript and WebAssembly that runs in a browser. Moreover, the source code is not required to be Java, so TeaVM successfully compiles Kotlin and Scala [10].

Strong Parts [11]

·        TeaVM supports threads. JavaScript does not provide APIs to create threads (WebWorkers are not threads, since they don’t allow to share state between workers). TeaVM is capable of transforming methods to continuation-passing style

·        TeaVM is very fast, you don’t need to wait for minutes until your application gets recompiled.

Flavour framework [11]

               TeaVM has a subproject, called Flavour. Flavour is a framework for writing single-paged web applications. It provides an HTML template engine with data binding, which is very similar to popular JavaScript frameworks like Angular, React, Vue.js

               Flavour is not a server-side framework. You are supposed to write your back-end code using “normal” JDK like OpenJDK, Oracle JDK using your favourite framework like Spring, Java EE, Vert.x, etc. Flavour is a client-side framework that you can use together with your back-end code.

Emscripten and WebAssembly [5]

There are many ways of describing what emscripten is, but most importantly for our purposes, it provides two things:

·        A compiler from C/C++ to WebAssembly

·        A compatibility layer that makes the browser feel like a native computing environment

WebAssembly is a new language that runs in modern web-browsers, as a complement to JavaScript. It’s a low-level assembly-like language that runs with near-native performance intended as a compilation target for low-level languages like C and C++.

Sneak Peek at WebAssembly Studio

WebAssembly.Studio is an online IDE (integrated development environment) that helps you learn and teach others about WebAssembly. Don’t think about it is as framework, just open the link  https://webassembly.studio. It is full fledged studio made using same web assembly technology which provide access of Native Applications over browser.

Features

C/C++/Rust Support

WebAssembly Studio has basic (very primitive) support for C, C++ and Rust out of the box. At the moment, compilation services run mostly server-side but we’re hoping to do more of this work on the client.

Editable Compiler Artifacts

WebAssembly binary modules (.wasm) as well as text files (.wat) are fully editable in WebAssembly Studio.

Interactive Embeddings

Interactive embeddings of WebAssembly Studio projects are now possible thanks to embed.ly, a system for embedding interactive content in a wide variety of web platforms, including medium.com. You can simply paste the link to a Forked project into your medium.com post

Applications

Inside the browser

• Better execution for languages and toolkits that are currently cross-compiled to the Web (C/C++, GWT, …).
• Image / video editing.
• Games:
• Casual games that need to start quickly.
• AAA games that have heavy assets.
• Game portals (mixed-party/origin content).
• Peer-to-peer applications (games, collaborative editing, decentralized and centralized).
• Music applications (streaming, caching).
• Image recognition.
• Live video augmentation (e.g. putting hats on people’s heads).
• VR and augmented reality (very low latency).
• CAD applications.
• Scientific visualization and simulation.
• Interactive educational software, and news articles.
• Platform simulation / emulation (ARC, DOSBox, QEMU, MAME, …).
• Language interpreters and virtual machines.
• POSIX user-space environment, allowing porting of existing POSIX applications.
• Developer tooling (editors, compilers, debuggers, …).
• Remote desktop.
• VPN.
• Encryption.
• Local web server.
• Common NPAPI users, within the web’s security model and APIs.
• Fat client for enterprise applications (e.g. databases).

Outside the browser

• Game distribution service (portable and secure).
• Server-side compute of untrusted code.
• Server-side application.
• Hybrid native apps on mobile devices.
• Symmetric computations across multiple nodes

References

[1]   https://webassembly.org/

[2]   https://research.mozilla.org/webassembly/

[3]   https://en.wikipedia.org/wiki/WebAssembly

[4]   https://github.com/iodide-project/pyodide

[5]   https://hacks.mozilla.org/2019/04/pyodide-bringing-the-scientific-python-stack-to-the-browser/

[6]   https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/

[7]   https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor

[8]   https://blogs.remobjects.com/2018/03/22/delphi-visual-library-on-webassembly-platform/#:~:text=Delphi-style%20VCL%20on%20WebAssembly%20Platform%20As%20many%20of,the%20browser%20can%20run%20together%20with%20JavaScript%20code.

[9]   https://blog.dmitryalexandrov.net/webassembly-for-java-developers/

[10] https://github.com/i-net-software/JWebAssembly

[11] https://teavm.org/

[12] https://teavm.org/docs/intro/overview.html

[13] https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/