How Eva.js Empowers Front‑End Engineers to Build Interactive Games with Minimal Code

Why Eva.js?

Fast‑growing apps need to attract, retain, and activate users; game‑like mechanics such as mission, social interaction, ownership, and achievement can boost these goals. Eva.js was created to let front‑end engineers implement such interactive games at lower cost.

Background

Alibaba’s front‑end interactive team previously used full‑featured engines like Cocos, Egret, and Laya, which are powerful but heavyweight. Most front‑end games require only simple interactions and animations, so a lighter solution that leverages HTML/CSS for UI and Canvas for performance was needed.

Game Engine Choice

The team explored PixiJS for its strong rendering capabilities, small bundle size, and high performance. Eva.js’s core rendering engine is built on PixiJS.

Vision and Goals

Eva.js aims to enable front‑end engineers to develop interactive games with minimal cost, focusing on three pillars:

Efficient development – basic interactive components that work with just a few lines of code.

Performance – optimized runtime and rendering.

Extensibility – an ECS core (≈130 KB gzipped) with a plugin system.

What We Built

Eva.js provides common animation, rendering, physics, and audio plugins, along with performance optimizations for loading and runtime. It also includes accessibility support.

Technical Highlights

Loading Strategy

Resources are parsed and loaded in parallel, allowing object creation, rendering, and resource loading to proceed simultaneously, which reduces latency on low‑end devices.

Parallel loading ensures that resource parsing does not block other operations, and pre‑parsing during pre‑load speeds up later rendering.

<code>resource.registerInstance(RESOURCE_TYPE.DRAGONBONE, ({data}) => {
  factory.parseDragonBonesData(data.ske);
  factory.parseTextureAtlasData(data.tex, Texture.from(data.image));
});</code>

Property Change Collection

Using an ECS design, component properties are stored sequentially in CPU cache, enabling fast detection of changes. In JavaScript, Eva.js implements a component listener that caches additions, deletions, and modifications each frame, allowing systems to react efficiently.

Accessibility

Because Canvas provides only bitmap output, Eva.js adds an A11yLayer that implements an Accessibility Object Model (AOM) using DOM elements, enabling screen readers and other assistive technologies to interact with game content.

State Management

Inspired by Redux/Vuex, Eva.js introduces EvaX, a shared state system where components can bind to common data. Changes propagate automatically, decoupling game objects and simplifying logic such as synchronized health displays.

Sample Code

<code>const spriteAnimation = new GameObject('name');
spriteAnimation.addComponent(new SpriteAnimation({
  resource: 'resourceName'
}));
game.scene.addChild(spriteAnimation);</code>

Performance Comparison

In Chrome DevTools with 6× slowdown, rendering ten different DragonBones animations ten times each took 1200 ms with PixiJS and 950 ms with Eva.js, demonstrating its efficiency.

Conclusion

Eva.js now powers over nine Alibaba apps and 30+ projects, reaching more than 500 million users. Future work will focus on performance, developer experience, and interactive capabilities, inviting community contributions to shape the next generation of web‑based interactive games.