Recommended Tech Stack Overview

The choice of technology stack is a critical decision at the outset of any project, as it can influence multiple factors including performance, development time, and scalability.

While traditional web developers often default to frameworks like React or Angular, game UI requires a different approach. Heavy runtimes, Virtual DOM diffing, and CSS-in-JS libraries can steal precious milliseconds from the game engine.

To achieve the perfect balance between modern developer experience and raw performance, our officially recommended tech stack is

SolidJS , Vite , SCSS (with BEM ), and TypeScript .

Why Not Vanilla JavaScript?

Choosing between using vanilla JavaScript (plain JavaScript) and a JavaScript framework is an important decision when starting your project. Vanilla JavaScript gives you complete control over the code, which can be an advantage for fine-tuning performance and behavior.

However, that same freedom can become a risk if your team is not deeply familiar with JavaScript internals and UI architecture. In practice, it is easy to introduce patterns that look simple but scale poorly and create serious performance bottlenecks. As your project grows, building complex features from scratch can also be time-consuming, potentially extending project timelines. Managing and maintaining a large codebase becomes more difficult without the organization and structure provided by a framework. Frameworks offer tools and patterns that streamline development, speed up feature delivery, and keep the codebase maintainable.

To get the organization of a framework without sacrificing the speed of vanilla JavaScript, we rely on SolidJS .

The Framework: SolidJS

Our research and testing have revealed that SolidJS currently stands out as the optimal choice for achieving both high performance and scalability .

If you are coming from traditional web development, SolidJS has a very similar syntax to React. However, under the hood, it operates entirely differently to maximize efficiency:

• No Virtual DOM: Unlike React, SolidJS does not use a virtual DOM. Instead, it compiles templates to real DOM operations, leading to better performance and more predictable behavior.
• Fine-Grained Reactivity: SolidJS is engineered for high performance. It employs fine-grained reactivity, updating only the necessary parts of the DOM, resulting in faster rendering and lower memory usage compared to frameworks like React.
• Vanilla-Like Speed: Because it skips the Virtual DOM overhead, SolidJS achieves a level of performance that is incredibly close to writing pure vanilla JavaScript.

The Bundler: Vite

A bundler is a tool or software application that is used to combine multiple source files into a single, optimized bundle. For Gameface, our build tool of choice is Vite .

Vite is a modern build tool and development server designed for web development. We chose it over older tools like Webpack for several key reasons:

• Native ESM: Vite natively supports ES modules without bundling during development, resulting in quicker build times.
• Instant Updates: Vite offers HMR by default, making it easy for developers to see changes in real-time during development.
• Plugin System: Vite provides a flexible plugin system, enabling customization and extensibility.

Styling: SCSS, BEM, and Modularity

In a game engine, complex (hierarchical) selectors are expensive to match. To maintain high frame rates, your CSS classes need to be as “flat” as possible.

We tackle this using a combination of SCSS and the BEM (Block Element Modifier) methodology:

• The BEM Methodology: The BEM methodology is recommended for writing HTML classes, as it promotes style isolation and helps reduce CSS conflicts. Additionally, it can help prevent performance issues that may arise from writing too many complex CSS selectors in Gameface.
• SCSS & Flat Selectors: To write clearer and more concise selectors, consider using a CSS preprocessor with the BEM methodology. SASS is a recommended option that has a syntax similar to traditional CSS. It also offers highly useful features like variables and functions, and has a large community with many resources.

Alternative Styling Approaches

In general, strict BEM can result in longer class names, which might affect code readability in your HTML. You can opt for a more relaxed version of BEM that allows for shorter class names and clean nesting.

For example, instead of writing .dropdown__option--active, you could write .dropdown-option--active or even .dropdown-option-active. You can leverage scoped SolidJS CSS Modules and SCSS’s nesting capabilities to keep your styles scoped and organized while still compiling down to engine-friendly flat selectors.

.dropdown {
    &-option {
        /* Compiles to .dropdown-option */
        &--active {
            /* Compiles to .dropdown-option--active */
            color: red;
        }
    }
}

We will deep-dive into the nuances of BEM, CSS Modules, and writing high-performance styles later in Layout, Assets & Styling.

The Safety Net: TypeScript

Finally, we highly recommend writing your UI logic in TypeScript .

TypeScript definitions and documentation provide strong typing and enhanced tooling for your JavaScript code within the Gameface environment. Because your UI will be communicating heavily with a C++ backend via data-binding, this ensures you catch data-shape errors in your IDE before your UI ever touches the game engine.