Setting sun grass tree, common road, humanitarian slave ever lived. Think that year, iron horse, swallow ten thousand miles such as tiger.

Antecedents to review

The last code dealt with the drag problem, which is of course a very simple problem. This time I’m going to talk about a core issue of low code or form generators.

How does the component data translate into the configuration form on the right?

Similarities and differences between form generators and low-code platforms

If it is a simple form generator, the data flow is very simple, and the right configuration -> form Component -> global state controls the form data, and obtains the form data globally when submitting the form. Because its form components are very simple, usually a single list of numbers, text, or options, fields are easy to control.

But as a low code platform, the data flow is relatively complex. Because a component is not just a single text entry box, it can be a page, a chart, etc., and the data required by a component can be many and varied. Object, Array, a String, Number is possible.

The true flow of data

The previous data flow is expected as follows:

Parameter ==>Setter==> Business component ==> Updates presentation content

Of course, it’s also possible to skip Setters and go straight:

Parameter ==> Service component ==> Update display content

This is actually not accurate. If you were simply developing a form generation tool, this kind of data flow could barely support such a small business. Considering that if we were developing an interface configuration platform, this kind of data flow would be overwhelming.

So what is the core of a drag-and-drop interface configuration platform? The core, of course, is the business component. The core of a business component is the data it needs. Therefore, according to the above analysis, for an interface configuration platform, the real data flow should be shown as follows:

The configuration items on the right should be rendered based on the data in the component to generate a data format that displays the setter on the right. After the configuration item’s data is updated, the data is successively sent back to the component. In this way, it is a complete process.

The difficulty is how to represent the data in the component as a data format that shows the setter on the right. For example, a component has the following data:

// test.vue.data(){
  return {
    msg: {value:'test'}}}Copy the code

So you might want to figure out the type of this MSG, and then figure out the type of its value, and then come to the conclusion that it needs a TextSetter. Then generate a corresponding data format, such as:

  configParams:[
    {
      fieldName:'msg'.setterType:null.fieldValue:[
        {
          fieldName:'value'.setterType:'TextSetter'.fieldValue:'test'}}]]Copy the code

Although the data in the component is an object, it seems more reasonable to render configuration items as arrays. In this way, you can basically meet the requirements of component configuration, which in turn enables page configuration.

At the same time, the display in the parameter configuration area on the right needs to be handled separately. Because the configuration of parameters is not a single configuration, a complex business component may contain multiple setters, and these setters may have nested relationships.

It doesn’t really matter. Once you figure out the core, it’s just a process of moving bricks.

The last

Personally, developing something like this with Vue is a bit more complicated than react. React functions can accept the children component directly into the render. It is easier to convert component data.

With the props of Vue not being able to be modified directly, and some other limitations, react feels a bit better for complex applications.

conclusion

Some things we have met at ordinary times, and also in use, but sometimes do not go to in-depth thinking about some problems. Only when we think deeply about some problems can we have a deeper understanding of these problems.

Code warehouse: https://gitee.com/mynoe/low-code-platform.git

One last word

  1. Move your rich little hands and “like it.”
  2. Move your rich little hands, “click here”
  3. See here, might as well wechat searchJavascript Advanced Programming"Add a follow"
  4. Might as well “forward”, good things to remember to share