This article was originally published at: github.com/bigo-fronte… Welcome to follow and reprint.

preface

First of all, what is amis? Baidu. Giee. IO/Amis/Amis is a low-code front-end framework open source by Baidu. Based on React, it uses JSON configuration to generate pages, which can reduce the workload of page development and greatly improve efficiency.

Amis’s solution is configured based on JSON and has the unique benefits of:

  • No need to know the front end: Inside Baidu, most amis users have never written a front end page before and don’t know JavaScript, but can create a professional and complex back end interface that no other front end UI library can do;
  • Not affected by front-end technology updates: The oldest amis page in Baidu was created more than 4 years ago and is still in use. The Angular/Vue/React version is now abandoned, and the popular Gulp has been replaced by Webpack. If these pages are not using Amis, the maintenance cost will be very high now.
  • Provide complete interface solutions: Other UI frameworks must use JavaScript to assemble business logic, while AMIS only needs JSON configuration to complete complete functional development, including data acquisition, form submission and verification, and the resulting pages can be directly online without secondary development.
  • Built-in 100+ kinds of UI components: including other UI frameworks will not provide rich text editor, combination of conditions, etc., can meet the needs of various page components to display, and for special display forms can also be expanded by custom components;
  • Containers support infinite levels of nesting: they can be composed to meet a variety of layout requirements;
  • It has been a long time in the field: Amis is widely used within Baidu, creating 38,000 pages in more than five years. From content auditing to machine management, data analysis to model training, Amis meets a wide variety of page needs, the most complex pages have more than 10,000 lines of JSON configuration.

Amis, of course, is no silver bullet, and large, complex front-end systems, or personalized 2C pages, cannot be flexibly supported.

Training platform requirement analysis

The CURD function is mainly used, involving tasks creation, task list, task details, dynamic form rendering, form linkage, data set uploading, replication and other scenes. So AMIS is fully capable of overlaying business implementations, for example:Baidu. Gitee. IO/amis/exampl… Training platform Screenshot

The technical implementation

1. Initialize the project

NPM install @bigo/fed-cli -g fed-cli create cv-flow-admin # select amis-tpl template

2. Directory structure

├── Bass ├─ Common │ ├─ dataSet │ ├─ Jobs │ ├─ Model │ ├─ Pipeline │ ├─ Task ├─ │ ├─ admin │ ├─ ├─ taskManage │ ├─ jobList │ ├─ SCSS public Style ├─ Stores ├── class exercises ─ class exercisesCopy the code

3. Add a page

Just add a NEW JSON configuration file in the routes/admin directory. Such as new mission: routes/admin/taskManage/jobList/create. Ts

4. Interface processing

Amis prescribes interface response standards

{
  "status": 0."msg": ""."data": { 
    "text": "World!". Other fields}}Copy the code

However, we still lack a unified aggregation layer for format encapsulation, so when connecting with the business API, we can adapt the global fetcher, or the requestAdaptor and adaptor methods of a single interface

5. Form nesting

Use to group multiple form items together for deep-structured data editing. For example, if you want to submit a data structure like user.name, there are two ways: one is to set the name of the form item to user.name, and the other is to use combo. Baidu. Gitee. IO/amis/useful – CN /…

6. Dynamic forms

The form configuration data is obtained from the business API through the Service function container, and then the data is cleaned and the form is rendered. Baidu. Gitee. IO/amis/useful – CN /…

7. Contextual data acquisition

Get bidu.gize. IO /amis/ zh-cn /… using template variables like ${text}.

8. Component communication

Baidu. Gitee. IO/amis/useful – CN /…

9. Context data cleaning

In Point 7 and 8, only data transmission and consumption are realized. However, in some business scenarios, data generated by the previous component needs to be modified to fit the input parameter of the next component. Amis does not provide such event capability at present. The current solution is to use requestAdaptor and Adaptor methods of a single interface, pretend to initiate HTTP requests, intercept specific URL fields, and then clean the data and pass it to the next component. Specific example: When running the task list, the params field returned by the interface is a JSON object. When clicking to view details, the Params data needs to be rendered as a dynamic form. Therefore, a request is made through service, and then the Params data in the context is cleaned and returned to the details component.

Research and development experience

  • Reduce complex form development processes and quickly configure pages based on sample JSON;
  • React family does not need to master, greatly reducing the technical threshold;
  • Fast demand change, quick adjustment of JSON configuration, high efficiency;
  • Enable the server, simple demand iteration can be directly modified online;
  • It takes a week to learn the AMIS properties, component usage specifications.

Overall, Amis is an excellent low-code solution for small and medium sized backend systems. Increase r&d efficiency by at least 30%.

Welcome everyone to leave a message to discuss, wish smooth work, happy life!

I’m bigO front. See you next time.