Patreon Blog Main Start

Modern Web Application Architecture

The snake has swallowed the elephant
Image: Antoine de Saint-Exupéry, drawings for The Little Prince

C++, WebAssembly, Web Worker, JavaScript & WebGL

When modern web development is viewed through the lens of C++, WebAssembly, and JavaScript, the potential to boost JavaScript becomes clear. Executing heavy-lifting tasks through this combination allows for significant performance gains. While JavaScript remains essential for shaping the application context, the power of C++ and WASM flows through the rest of the system. This creates an impression reminiscent of a "Snake that has swallowed an Elephant." These technologies form a layered system where each level is optimized for results. When functioning correctly, the complexity of the "elephant" inside is hidden beneath the polished "hat" of the user interface.

Rather than diving into specific implementation details, a broader view of the current version is more effective. The following diagram illustrates the modern web application architecture:

Modern Web Application Architecture
Image: current application architecture

Several application layers can be distinguished within this stack:

C++ and Open CASCADE: The 3D modeling layer at the bottom of the stack.

Emscripten: The compilation stage (C++ to WASM) and its specific configurations.

Web Worker layer: Running in a separate background thread, where the WASM binaries are integrated and modeling tasks are performed in parallel.

Application logic: The main thread orchestration layer. It is responsible for DOM manipulation, event handling, async logic, and Web Worker initialization. In short, everything that brings the application to life.

WebGL 3D engine: The layer responsible for implementing custom rendering logic.

GLSL shaders: Small, C-style programs executed directly on the GPU to render graphics.

Utilities: A wide spectrum of functions that handle specific tasks, such as swapping the Y and Z axes, recomputing normals, etc.

The exploration of these layers will continue in future posts.