Formily

screenshot of Formily
react
react-native
vue
less
styled-components
ant-design

Formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3

Overview

The text discusses how Formily, a tool in React, improves the performance of form operations by distributing the management of each form field's state. It integrates the JSON Schema protocol to render forms efficiently and effectively.

Features

  • Designable: Develop forms quickly through Form Builder.
  • High performance: Fields managed independently for efficient rendering.
  • Integrated components: Uses Alibaba Fusion and Ant Design components for seamless integration.
  • JSON Schema support: BackEnd utilizes JSON Schema, while FrontEnd uses JSchema.
  • Independent side effects: Manages form data linkages independently for easier operations.
  • Flexible layout customization: Override complex form layout use cases easily.

Installation

To install Formily, follow these steps:

  1. Install Formily package:
npm install @formily/core
  1. Install Form Builder package:
npm install @formily/antd
  1. Start using Formily in your project:
import { createForm } from '@formily/core';

Summary

Formily in React addresses the rendering performance issue in form operations by managing each form field's state independently. It supports JSON Schema for efficient form rendering and offers seamless integration with Alibaba Fusion and Ant Design components. Moreover, it allows easy customization of form layouts and simplifies data linkages for improved user experience.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

react-native
React Native

React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

less
LESS

Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

ant-design
Ant Design

Ant Design is a React UI library that provides a set of pre-designed components and design resources for building high-quality, responsive web applications.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

mobx
Mobx

MobX is a simple and scalable state management library for JavaScript applications. It uses reactive programming techniques to automatically update the user interface in response to changes in the application state, making it easy to build complex and dynamic user interfaces with minimal code.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.