How Eva.js Empowers Front‑End Engineers to Build Interactive Games at Low Cost

Why Eva.js?

Alibaba spent two years developing the interactive game engine Eva.js and open‑sourced it to enable front‑end engineers to build interactive games with lower cost and effort. It is already used in Taobao, Tmall, Alipay, Youku, Kaola, Cainiao, Hema and many other business scenarios.

Background

Fast‑growing apps need to attract, retain, and activate users. Game‑like elements such as mission, social interaction, ownership, and achievement drive engagement, leading many apps (e.g., Taobao, Alipay, JD, Ele.me, Pinduoduo, China Merchants Bank) to adopt gamification.

Game Engine

The team previously experimented with Cocos, Egret, Laya and found they are large, all‑in‑one solutions that support Android, iOS, and Web, but they introduce unnecessary learning overhead for simple front‑end interactive games.

Rendering Engine

Eva.js adopts PixiJS as its rendering layer because PixiJS offers strong rendering capabilities, a small bundle size, and excellent performance. The engine’s core is built on PixiJS.

About Eva.js

Vision and Goals

Efficient development: provide basic interactive game components so front‑end engineers can achieve effects with just a few lines of code.

Performance: deliver a fast runtime and rendering pipeline.

Extensibility: use an ECS architecture (≈130 KB gzipped) with a plugin mechanism for extensions.

What We Did

Eva.js implements common animation, rendering, physics, and audio plugins, adds performance optimizations for loading and runtime, and supports accessibility for users with disabilities.

Technical Analysis

Loading Scheme

Parallel parsing and loading of different resources.

Parallel creation of objects and resource loading.

Parallel rendering and resource loading.

This approach ensures that heavy resources such as skeletal animations do not block the CPU, allowing smooth playback even on low‑performance devices.

Property Change Collection

Using ECS, component properties are stored contiguously in CPU cache, making change detection fast in native languages. In JavaScript, Eva.js introduces a component listener that caches additions, deletions, and property modifications, allowing systems to process changes each frame efficiently.

Accessibility

Because provides no semantic information, Eva.js adds an A11yLayer that implements an Accessibility Object Model (AOM) using DOM elements. This layer, combined with the engine’s property‑listening capability, enables screen‑reader support and alternative interaction designs for users with disabilities.

State Management

Eva.js includes a state‑management system called EvaX, similar to Redux/Vuex, allowing shared data across multiple game objects. Components can bind to EvaX data, react to changes, and trigger updates in other components, promoting decoupled architecture.

Summary

Eva.js currently powers more than nine apps and over thirty projects, reaching over 5 billion users internally, with more than 30 k NPM downloads. Future work will focus on further performance improvements, developer experience, and richer interactive capabilities, inviting the community to contribute and help shape the next generation of web‑based interactive games.

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