This paper mainly explains the background system and form related page development, and analyzes how to better, efficient development.

Technology stack

  • React
  • Antd

background

Antd

I will refer to Ant Design as Antd for short

Ant Design is a UI framework for enterprise products that can be used in backend systems. It has React, Vue, and Angular implementations. Personal feeling Antd is still very powerful, THE API is quite perfect, comprehensive, basic can achieve you want a variety of functions.

Forms in the development of common background system, the most developed is the entity of new page, edit and detail page, these three pages have something in common, there are also differences, feel can be reused, but some places need special processing.

The form page is shown below:

The details page is shown below:

Relationships between new, Edit, and detail pages and Form components

As can be seen from the above pictures:

  • You can reuse a Form component for creation and editing
  • No data is passed to the Form when it is created
  • The edit requests data from the backend entity and passes it to the Form component for data initialization
  • The detail page could also use a Form component, but the Form component and the detail page are not the same in the UI view. For example, the detail page is a purely displayed div instead of a variety of Form controls.

Think and implement

Through the research above, we can consider to make details page, new and editing a single page, but new and editing to reuse the same Form component, Form component for data collection, display, Form validation, additional logic processing (such as the new, edit, submit action, redirect users and data filtering) may have different, So the new and edit pages are processed separately. Ok, let’s look at the Form code implementation: see here for more details

      <Form onSubmit={this.handleSubmit}>
        <FormItem
          {. formItemLayout}
          label="E-mail"
        >
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: 'The input is not valid E-mail!',
            }, {
              required: true, message: 'Please input your E-mail!',
            }],
          })(
            <Input />
          )}
        </FormItem><FormItem {... formItemLayout} label="Password"
        >
          {getFieldDecorator('password', {
            rules: [{
              required: true.message: 'Please input your password! '}, {validator: this.validateToNextPassword,
            }],
          })(
            <Input type="password" />
          )}
        </FormItem>.Copy the code

The above code is implemented using the Antd form, and there are some problems:

  • The average form control takes 12 to 17 lines of code (not including complex logic and callback functions). In a large system, a complex form may have 30 to 40 controls. Write a 2000+ line form.js file?
  • Redundant code occurs when written as follows:

For each control, FormItem and getFieldDecorator are written multiple times and in the same format

<FormItem {... formItemLayout} label="E-mail"
        >
          {getFieldDecorator('email', {
            rules: [{
              type: 'email'.message: 'The input is not valid E-mail! '}, {required: true.message: 'Please input your E-mail! ',,})} (<Input />
          )}
        </FormItem>
Copy the code
  • The detail page needs to be rewritten with a completely different set of logic and UI, and cannot reuse the logic in the Form component
  • What if I have dynamic tags? For example, I encountered a scenario where some fields in the page were written dead by the front end, such as user name and password, and some fields were uploaded by the user to a template file, and the back end parsed the template and returned it to the front end. The structure might look like this:
{
    "name":"Label 1"."type":1.// 1: text box, 2: percentage, 3: number, 4: amount, 5: radio button, 6: radio drop-down box, 7: multi-select button, 8: multi-select drop-down box,9: date - single day, 10: date - range
    "commonUse":true.// Whether to use common labels
    "requiredTag":true.// Mandatory
    "placeholder":"This is a description."."option": [// The selection will use this field
        {
            "id":1."name":"Name"."defaultOption":true.// Whether it is selected by default}}]Copy the code

Better solutions

  • To avoid situations where a Form has more than 1000 lines, we should break up the large Form Form

As shown in the picture below, there is a Form of contract. We split it according to type as follows:

  • For the rest of the above, we plan to extract a common component:
    • Component receive: fields that need to be rendered from the form, initial data, control types of fields, and so on
    • Can render different form controls according to different control types of fields
      • Select
      • Input
      • .
    • Details pages can also reuse this component
    • Extensible (for example, Antd API methods can be used in this component)

conclusion

We develop most of the page in the backend systems are form page (new, edit, details), is a small list of pages, we should consider more routing, design of the data layer, business component split, common component design and implementation, if these things ready, accumulated certain experience, after the system development background will get twice the result with half the effort. Tip: I’m going to go into more detail on the design and implementation of the common components of forms mentioned above in the next installment. React-based forms development

A link to the

Ant. The design/components /…