Avalon2: Overview, Advantages, and Backend Rendering

Author Si Tu Zhengmei, a well‑known JavaScript expert and former Qunar front‑end architect, introduces Avalon2, a successor to Avalon1, which was widely used in Chinese enterprises for internal OA systems, e‑commerce, games, and government sites.

Avalon1 originated from an earlier jQuery‑based UI library called Onion and evolved into the oniui library used across more than 30 business lines at Qunar.

Avalon2 was created to address performance limitations of Avalon1 by adopting a virtual DOM with a diff algorithm, reducing DOM node access, and replacing heavy DOM objects with lightweight JavaScript objects.

The framework emphasizes componentization inspired by WebComponents, offering features such as custom tags, lifecycle hooks, and slot‑like behavior, while remaining non‑intrusive and compatible with libraries like jQuery, Zepto, Backbone, React, Vue, and Angular.

Key design goals include high performance, component‑based architecture, non‑intrusiveness, and broad browser compatibility, leveraging modern APIs to keep the codebase concise.

Avalon2 also supports backend rendering by running the same virtual‑DOM logic in Node.js, enabling shared templates and view models between client and server; an example implementation using Koa2 is provided.

The lightweight "Arthur" variant of Avalon2, under 1500 lines of code, targets environments with strict size constraints such as ads and performance monitoring.

Additional facilities include mmRequest for data fetching, mmAnimate for animations, mmRouter for routing, and mmDux (a Redux‑like state manager), all built with Webpack for easy bundling.

Currently, Avalon2 is gradually gaining community adoption and aims to expand beyond an MVVM framework toward data‑visualization applications.