DOCSEARCHbyAlgolia
Submit Docs

Formily

repository·formily_next·Indexed 9 days ago

https://github.com/alibaba/formily

A high-performance form management framework that uses distributed state management to prevent unnecessary re-renders in complex applications. It leverages JSON Schema for backend- and frontend-driven rendering and provides adapters for React, Vue 2, and Vue 3, as well as integrations with Ant Design, Element UI, and Next.js.

Tokens
489.1K
Snippets
1.1K
Records
1.5K
Agent score
93%

What's inside Formily

  1. Overview of Formily validation methods

    formily_next

    Formily provides several ways to ensure data accuracy and improve user experience through validation:

    • Built-in Rule Validation: Using predefined validation rules.
    • Built-in Format Validation: Using predefined format checks (e.g., email, pattern).
    • Custom Rule Validation: Implementing your own logic for complex validation requirements.

    For detailed API specifications regarding rule validation, refer to the FieldValidator documentation.

  2. Overview of @formily/antd component system

    formily_next

    @formily/antd is a professional component library for form scenarios built on top of Ant Design. It is designed exclusively for Formily 2.x and features a rich set of components categorized into layout, input, scene, and reading state components.

    Key Capabilities

    • Theme Customization: Follows the Ant Design style system for easier customization.
    • Secondary Packaging: All components are designed to be repackaged for business-specific customization.
    • Reading Mode: Provides a dedicated PreviewText component for flexible reading mode encapsulation.
    • Layout Control: Uses FormLayout, FormItem, and FormGrid for advanced layout management (replacing the legacy FormMegaLayout).
    • Schema Mode Support: Complex scene components like ArrayCards, ArrayTable, and FormStep are optimized for Schema mode to enable high-level UI abstraction.

  3. Overview of Formily features and architecture

    formily_next

    Formily is a high-performance form solution designed to solve the rendering performance issues common in React controlled forms, especially in complex data-linking scenarios.

    Key features include:

    • High Performance: Uses distributed state management for form fields to reduce React rendering pressure and prevent page lag.
    • Form Builder: Supports rapid form construction via a visual builder.
    • JSON Schema Integration: Deeply integrates with the JSON Schema protocol to enable backend-driven form rendering.
    • Flexible Development: Supports both JSX-based tag writing and JSON Schema data-driven approaches.
    • Complex Logic Management: Provides independent management of side-effect logic, covering complex field linking and validation.
    • Layout Support: Supports various complex form layout schemes.
    • Component Ecosystem: Compatible with Ant Design and Fusion Next component systems.

  4. Overview of Formily

    formily_next

    Formily is a high-performance form solution designed to solve rendering performance issues in complex React forms. It achieves this by distributing state management so that each form field is managed independently, preventing the need to re-render the entire form tree during updates. This is particularly beneficial for forms with heavy data linkage (inter-field dependencies).

    Key capabilities include:

    • High Performance: Independent field management avoids whole-tree re-renders.
    • JSON Schema Integration: Supports both Backend-driven (JSchema for Backend) and Frontend-driven (JSchema for Frontend) paradigms, with the ability to convert between them.
    • Low-Code Development: Integrates with Form Builder for rapid form development.
    • Component Compatibility: Works out of the box with Alibaba Fusion and Ant Design components.
    • Complex Layouts: Provides tools to override and manage complicated form layout requirements.

  5. Overview of @formily/element component types

    formily_next

    @formily/element is a professional component library built on top of Element UI, specifically optimized for form scenarios. It provides several categories of components:

    • Layout Components: FormLayout, FormItem, FormGrid, FormButtonGroup, Space, Submit, Reset.
    • Input Controls: Input, Password, Select, DatePicker, TimePicker, InputNumber, Transfer, Cascader, Radio, Checkbox, Upload, Switch.
    • Scenario Components: ArrayCards, ArrayItems, ArrayTable, ArrayTabs, FormCollapse, FormStep, FormTab, FormDialog, FormDrawer, Editable.
    • Read-only Components: PreviewText (designed for creating flexible read-only views).

    Key features include theme customization following Element UI styles, full support for secondary encapsulation, complete TypeScript definitions for enhanced IDE intelligence, and simplified APIs for complex scenarios like multi-step forms (FormStep) or tabs (FormTab).

  6. Overview of @formily/antd component ecosystem

    formily_next

    @formily/antd is a professional-grade component library built on top of Ant Design specifically for Formily 2.x form scenarios. It provides a rich set of components categorized into several types:

    • Layout Components: FormLayout, FormItem, FormGrid, FormButtonGroup, Space, Submit, Reset.
    • Input Controls: Input, Password, Select, TreeSelect, DatePicker, TimePicker, NumberPicker, Transfer, Cascader, Radio, Checkbox, Upload, Switch.
    • Scenario Components: ArrayCards, ArrayItems, ArrayTable, ArrayTabs, FormCollapse, FormStep, FormTab, FormDialog, FormDrawer, Editable.
    • Read-only Components: PreviewText.

    Key features include full theme customization following Ant Design's style system, support for secondary encapsulation (allowing users to wrap components for business customization), and complete TypeScript definitions for enhanced IDE intelligence.

  7. Introduction to Formily

    formily_next

    Formily is Alibaba's unified front-end form solution designed for high performance and extensibility. It provides a professional approach to form development with features including:

    • Ease of Use: Rich out-of-the-box use cases.
    • Efficiency: High-performance execution and simplified writing patterns.
    • Extensibility: A pure core architecture that allows for deep customization and professional-grade flexibility.

  8. What is @formily/reactive?

    formily_next

    @formily/reactive is a reactive state management solution oriented towards Domain-Driven Design (DDD). Key features include:

    • Ultra-high performance: Uses dependency tracking for efficient updates and on-demand rendering.
    • Cross-platform & Cross-framework: The core logic is UI-agnostic and framework-agnostic.
    • TypeScript support: Provides intelligent type hinting for a better developer experience.

  11. Overview of Formily Vue features

    formily_next

    Formily is a unified frontend form solution from Alibaba designed for high performance and low integration cost. Key features include:

    • Ultra-high performance: Uses dependency tracking for efficient updates and on-demand rendering.
    • Out-of-the-box usage: Component state is automatically bound, minimizing integration effort.
    • Protocol-driven: Built on standard JSON-Schema.
    • Scenario reuse: Abstracted scenario components based on protocol driving.
    • Developer friendly: Native support for Formily DevTools for debugging.
    • Intelligent hints: Full TypeScript support.

  12. Overview of @formily/next component categories

    formily_next

    @formily/next is a professional-grade component library built on top of Fusion Design, specifically optimized for Formily 2.x form scenarios. It provides a rich set of components categorized as follows:

    • Layout Components: FormLayout, FormItem, FormGrid, FormButtonGroup, Space, Submit, Reset.
    • Input Controls: Input, Password, Select, TreeSelect, DatePicker, TimePicker, NumberPicker, Transfer, Cascader, Radio, Checkbox, Upload, Switch.
    • Scenario Components: ArrayCards, ArrayItems, ArrayTable, FormCollapse, FormStep, FormTab, FormDialog, FormDrawer, Editable, LogicDiagram.
    • Read-only (Preview) Components: PreviewText (designed for flexible read-only state encapsulation).

    Key Features:

    • Schema-first design: Complex components like ArrayCards, ArrayTable, and FormStep are designed to work with Schema mode to enable high-level UI abstractions.
    • Improved Layout: Grid capabilities previously found in FormMegaLayout are now integrated into FormLayout, FormItem, and FormGrid.
    • Reactive Communication: Components like FormStep, FormTab, and FormCollapse use a Reactive Model pattern for easier state management (e.g., using createFormStep).