Boost Form Performance: Inside Formily’s High‑Performance, Protocol‑Driven Form Framework

Formily is a data‑plus‑protocol driven form solution built on reactive programming, offering high‑performance, cross‑framework, and cross‑terminal capabilities for complex backend scenarios.

Core Features

High performance: guarantees O(1) time complexity even with unlimited fields and high‑frequency input.

Framework agnostic: fully compatible with React, Reactive, and Vue.

Complete ecosystem: bridges to Ant Design, Element, and Alibaba Fusion component libraries.

Protocol driven: enables backend JSON to dynamically drive form rendering.

Comprehensive: supports a wide range of complex form page requirements.

Design Principles

Single responsibility.

Elegant naming: simple, intuitive, consistent standards.

Core Architecture

The architecture consists of four layers from bottom to top:

Kernel & Protocol layer – domain model system independent of UI and a JSON‑Schema‑based form protocol.

UI Bridge layer – glue between Formily core and UI frameworks such as React or Vue.

Component Extension layer – bridges UI component libraries.

Application layer – enables building source‑code, low‑code, or no‑code solutions.

High‑Performance Strategies

Four solutions were compared:

Solution 1 – ReactFinalForm/Antd4.0: uses pub/sub for field state, O(1) input, but dirty‑check cost high and external linkage not O(1).

Solution 2 – UForm/Formily 1.x: abstracts active update model, achieves O(1) for both input and linkage, but has higher learning cost.

Solution 3 – ReactHookForm: bypasses React controlled updates, O(1) input, O(n) linkage, suffers from full tree re‑render on data linkage.

Solution 4 – Formily 2.0: built on Reactive, provides O(1) for both input and linkage, eliminates heavy dirty‑check, supports both active and passive models, though learning curve remains steep.

Demonstrations show 2000 fields with O(1) input remaining completely smooth.

Protocol‑Driven Approach

Three schemes were explored:

Pure UI‑Tree protocol: JSON‑like JSX describing component hierarchy; simple but cannot express state models.

Standard JSON Schema: drives UI from data, encapsulates many state logics, yet struggles with container wrapping.

Formily 2.0 extended JSON Schema: adds Void type for layout containers and x‑ properties for UI controls, fully expresses UI without a second protocol and keeps learning cost low.

Extension Component Strategies

Various extension patterns:

Basic extension: defines standard props like value/onChange for quick component integration.

White‑box advanced: uses React Context to locate internal state models, fully isolates engine from component props.

Black‑box advanced: employs connect and mapProps wrappers, reducing need for component re‑packaging but adds conceptual complexity.

Advanced scenario‑based: RecursionField enables dynamic subtree rendering, allowing massive template components (e.g., ArrayTable, ArrayCard) to boost productivity.

Usage Data

Formily is widely adopted across Alibaba and non‑Alibaba business units, as illustrated in the following chart.

Future Plans & Limitations

Further performance optimizations.

Expand extension ecosystem.

Support React 18.

Explore one‑click CRUD generation.

Current drawbacks include lack of IE support, relatively large bundle size (~80 KB after compression), and a steep learning curve, with plans to improve documentation and video tutorials.

Conclusion

With its high‑performance core, multi‑framework adaptability, single schema for multiple platforms, and extensive ecosystem, Formily delivers a powerful foundation for building enterprise‑grade forms, low‑code, and no‑code solutions.