Compile C++ into WebAssembly

The support for WebAssembly (abbreviated Wasm) is a critical part of the VGG engine. Due to performance and cross-platform support considerations, the VGG engine is written in C++. It could be compiled into WebAssembly, so that we are able to run it in browsers. More importantly, it also supports user-generated Wasm files to be plugged into the designs.

By definition,

WebAssembly is an executable binary format for a stack-based virtual machine.

There have been plenty of previous work, including blog posts, papers, books, etc, that help us understand the WebAssembly format. However, few of them focus on the compiling process of C++ to WebAssembly.

In this post, we share the process of using Emscripten, a de-facto compiler toolchain for WebAssembly, to compile C++ code into WebAssembly. Hope you enjoy it!

ECS Architecture for GUI applications

ECS, short for Entity-Component-System, is an architectural design pattern originally found in video game programming. It is a powerful technique that eases programming headaches as well as boosts the performance of a game containing a huge amount of interactive objects.

That’s why the VGG engine takes ECS as the fundamental architecture because VGG targets high performance in the very beginning. However, VGG is more about making interactive applications, particularly GUI applications. Would the ECS architecture still be suitable for such a task? Let’s dive a little deeper.

Introducing VGG and Design-as-Code

VGG is yet another engine and framework for making interactive apps, which emphasizes the concept of Design-as-Code at its core. And it may hopefully unite the worlds of design and code at last.

Meanwhile, the whole world is about using Web technologies, platform-specific frameworks, or cross-platform frameworks, to make apps, the most famous and innovative among them being Flutter, which takes advantage of underlying parts of browser engine to achieve the goal of “Write Once, Run Anywhere”1.

So why do we need another engine or framework? That’s what we need to explain about Design-as-Code, but let’s look at other choices first.