background
For front-end development of mid- and back-end products, the most common scenario is nothing more than developing a CURD operation on a table:
-
Create:
insert into Table(...) values(...); -
Update：
Update Table Set... Where...; -
Retrieve:
Select ... From Table Where...； -
Delete:
Delete From Table Where...；
For example, develop a user page, including conditional query, user addition, user update, user deletion, and user details functions.
The general development steps are as follows:
Next, add another role page, which is also the function of CURD, and repeat the above steps; finally, it is found that about 80% of the glue codes on the two pages are exactly the same except for the different fields and interfaces.
Healed 10086 points by this cute logo
Faced with repeated glue codes, the front-end development team, which has been suffering for a long time, launched the Koala Form solution in 2022 to solve these problems. After more than half a year of polishing by the project team, it is now launched for community users to use together.
What is Koala Form?
Koala Form is a low-code solution for form pages . Based on Vue3, it abstracts around the form scenarios of mid- and back-end products to help developers develop configurations.
Compared with other products in the industry with high learning costs, multiple packages need to be cited, and the pain points of large package size, Koala Form provides stronger UI library support, maintainability and reusability, and provides a strong Scene encapsulation capability, lower cost of use and learning, and reduced development complexity.
Feature overview:
-
Efficient : It may take you a day or a few hours to develop a complete form page from 0, but Koala From may only take a few minutes. All you need to do is configure the display rules of the fields.
-
Simple : Built-in basic form scenes, useScene, useFrom, useTable, useModal, usePager, provide context API to operate scene content;
-
Flexible : Scenes can be combined freely, field linkage is supported, field and component descriptions also support vue slots, and plug-ins can be written to extend functions.
Architecture diagram of Koala Form
Quick Start with Koala Form
You can use Koala Form to quickly implement the following user pages:
Brief description of the process: After creating the Vue3 project, install the koala form related dependencies @koala-form/core, @koala-form/fes-plugin and @fesjs/fes-design component library, after configuring the entry file globally, use useCurd Create user CURD page.
The project team has compiled detailed product documentation for your reference. In order to let you have a better reading experience, please move to the " Quick Start Guide " https://koala-form.mumblefe.cn/zh/guide/getting-started. html understanding (or click " read the original text " to jump).
Get Started：https://koala-form.mumblefe.cn/
Recent planning
-
Plug-in support for other UI libraries, such as Ant Design vue (the specific time node will be adjusted according to the needs or feedback of community users);
-
Respond to community feedback and support, etc.
join us
We have taken the first step. Although some functions cannot be implemented more comprehensively at present, these functions will definitely become more and more perfect as time goes by. I hope these can help developers develop better.
We sincerely invite you who are concerned about front-end development to participate in the Koala Form project. We welcome any form of contribution. If you have any suggestions or comments, you can raise an issue in the GitHub/gitee/WeChat group. We look forward to your arrival.
- Document address: https://koala-form.mumblefe.cn/
Warehouse Address
- Demo address: https://github.com/WeBankFinTech/KoalaForm/tree/main/packages/demo-with-fes