How Formily Unifies Form Schemas, Rendering, and Components for High‑Performance Frontend Development

Formily (pronounced “family”) is a unified form solution that integrates a standard schema protocol, rendering engine, component library, and surrounding ecosystem.

Background

Recent front‑end evolution can be summarized as stages: F2V (function‑driven view, e.g., jQuery), D2V (data‑driven view, e.g., React, Angular, Vue), C2V (component‑driven view, e.g., Ant Design), T2V (template‑driven view, e.g., Ant Design Pro), S2V (scene‑driven view), M2V (model‑driven view), and AI2V (AI‑driven view). The current focus is the S2V stage, where scene‑driven forms are critical for middle‑ and back‑office development.

Goals

Provide a unified, high‑availability, high‑performance, and extensible form solution to avoid duplicate development.

Establish a standard form schema protocol to improve development efficiency and support future automation and intelligence.

Offer a rendering engine that seamlessly integrates ecosystem components and custom components.

Continuously improve surrounding tooling to lower the entry barrier for form development.

Overall Architecture

The solution is built on UForm (now renamed Formily) and consists of four layers:

Protocol Layer : Defines a form description protocol with more than ten specifications.

Tool Layer : Provides a visual schema editor ( @formily/react-schema-editor) for rapid schema generation, configuration, and preview.

Rendering Engine : Implements the protocol‑driven rendering ( @formily/react-schema-renderer) and supports seamless integration of React form components.

Form Component Layer : Handles form state, communication, and side‑effects via @formily/core.

Applicable Scenarios

Dynamic forms where fields are not fixed.

Forms with a large number of fields requiring strict rendering performance.

Situations where existing form components are unsatisfactory and a better solution is needed.

Construction Scheme

The form schema is based on the official JSON Schema combined with a UI schema. Four extensions describe UI aspects:

x-props : Field property definitions (equivalent to FormItem props).

x-rules : Validation rules (required, regex, custom functions, error messages).

x-component : Component type, e.g., Input, Select, or custom components.

x-component-props : Props passed to the component.

Example of a minimal schema:

{
  "type": "object",
  "title": "Form Title",
  "properties": {
    "name": {
      "type": "string",
      "title": "姓名",
      "default": "淘小宝",
      "x-props": {"extra": "不得超过6个字符", "labelCol": {"span": 6}, "wrapperCol": {"span": 18}},
      "x-component": "Input",
      "x-component-props": {"disabled": true, "placeholder": "请输入姓名"},
      "x-rules": [{"required": true}]
    }
  }
}

Nested & Array Definitions

Formily supports nested structures and arrays through JSON Schema extensions and provides custom components for rendering them.

Linkage Protocol

Field inter‑dependency is expressed with template expressions wrapped in {{}}. The expression can access root.value, root.schema, and root.context. Example (active trigger):

{
  "name": {
    "type": "string",
    "x-component": "Input",
    "x-component-props": {
      "onChange": "{{root.context.fields.setFieldState('age', '')}}"
    }
  },
  "age": {
    "type": "string",
    "x-component": "NumberPicker"
  }
}

Passive listening (value of bar depends on foo) can be written as:

{
  "bar": {
    "type": "string",
    "x-component": "Input",
    "x-component-props": {
      "value": "{{root.value.foo < 0 ? 'negative' : 'positive'}}",
      "disabled": "{{root.value.foo < 0}}"
    }
  }
}

Layout Protocol (draft)

Layout is expressed via extensions such as x-skip, x-hide, and x-visible. Example of a two‑column layout:

The resulting value after applying x-skip is {"name":"淘小宝", "age":18}, not the raw layout object.

Tool Layer

The schema generation tool ( @formily/react-schema-renderer) offers four core capabilities:

json2Schema : Quickly generate a base schema from raw data.

Visual Configuration : Built‑in Ant Design and Fusion component property panels with auto‑completion.

Source Editing & Live Preview : Edit schema code and see real‑time form rendering.

Third‑Party Integration : Distributed as an NPM package for easy adoption.

Rendering Layer

The rendering engine ( @formily/react-schema-renderer) parses the standard schema and renders the form. It provides three main components:

SchemaForm : Core form component handling schema parsing, component registration, initial values, events, effects, and actions.

SchemaField : Represents an individual form field, mapping directly to a field description in the schema.

SchemaMarkup : Implements layout protocols.

Form Component Layer

Formily achieves high performance through distributed field state management in @formily/core. Each field maintains its own FieldState, allowing targeted updates via setFieldState instead of mutating a global form state. This design, illustrated by the following diagrams, explains why Formily outperforms traditional global‑state form solutions.

Summary & Future Plans

All three lower layers (protocol, tool, component) are essentially complete. The rendering layer still requires refinement, and the team is actively coordinating development. Upcoming work includes full‑chain integration testing, documentation, open‑source release, internal pilot deployments, and broader promotion of Formily within Alibaba and the community.

Official site: https://formilyjs.org/ GitHub: https://github.com/alibaba/formily

For questions or suggestions, open an issue on GitHub or contact the author via WeChat (Andy_Hit).