First you need to understand that visual layout and low code are two concepts:

  • Visual layout mainly serves the front-end, and its vision is to improve the efficiency of front-end writing static pages
  • Low code lowers the coding threshold and automatically generates reusable code

If you spend a lot of time writing static pages every day, you should have a feeling that you can see the general layout of the page at a glance according to the design draft. The layout part of the work is theoretically repetitive, but why those visual layout tools just can’t do it?

To start with a simple example, suppose we want to complete a layout like this:

If you’re familiar with Flex, you’ll quickly disassemble it into something like this (based on Elment) :

    <el-row type="flex" justify="start" align="middle">
        <el-col :span="18">
            <div>A</div>
            <div>B</div>
        </el-col>
        <el-col :span="6">
            <div>C</div>
        </el-col>
    </el-row>
Copy the code

What do you need to do to generate this code using a visual layout tool, such as bootstrap-Layout

  • Drag a row container with one row and two columns
  • Col on the left, put two controls
  • Col on the right, put a control

You might say that the code generated by bootstrap-layout can only be used in the bootstrap project, but if I were using Element, it wouldn’t work for me.

Find a layout tool that generates Element code. The first one I found on Baidu is form-generator

This tool is almost useless in this scenario because its row containers can only be on the same row. Our col on the left needs to put two vertically aligned text, which it can’t do, so it’s only good for some form generation.

Since the form-Generator does not have text controls, a single-line input box is used instead

Problems with visual layout tools

availability

Bootstrap-layout does a pretty good job of layout, at least in this simple scenario. However, in modern front-end engineering, the resulting code varies greatly due to the difference in the technology stack. Such as:

  • The business layer framework is different. Vue generates a single file component, react generates a separate CSS file
  • The resulting code tag will be different depending on the UI library
  • Different preprocessors, sASS, Less, or PUG. Or windicss
  • Specification, different code styles, esLint, Preitter configuration is different
  • Vue2 root vue3 code is different from vue2 root vue3

If you don’t support any of these configuration items, your availability is compromised.

The efficiency of

In simple scenarios, the efficiency of the visualization tool code is significantly improved, but for slightly more complex layout structures. Such as:

Bootstrap-layout requires multiple layers of nesting:

In the case of deeper row, col nesting, the user experience is pretty bad. Dragging out such a nested layout, and then making minor changes to the generated code to keep it consistent with the design draft can be quite laborious. These details include:

  • The spacing between col cannot be adjusted, offset is not supported (col several slots to the left)
  • There is no support for changing the position of elements inside col, such as left, center, right, etc
  • Col itself does not support adjustment, there are only fixed types

New ideas

Start by solving the nesting problem

Everyone has inertial thinking, just like when you think of visual layout, you will think of drag components, and only by jumping out of the bondage of inertial thinking can we find a hidden optimal solution. Again, let’s take this structure.

Look at how you unpack the layout, we think of AB as a col, and C as a col, and then we put AB and C inside a row. Is it possible that I could just generate three cells from a visual layout, arranged like the one above, and it would know what structure I need to generate, without having to drag out the row col controls myself?

The answer is yes, but it requires a set of rules, such as:

  1. When cells are of equal width and are adjacent, they are combined into a single col
  2. Combine a row when the cells are of equal height and are adjacent

Then the above structure can be merged automatically by the rules, AB merged, the height is equal to C, AB merged with C, and finally we have the structure we need.

Of course, this is only a preliminary idea, and it is not enough to satisfy most of the layout rules, so we will not go into the algorithm. However, we solved the problem of row, col, and multi-layer nesting in visual layout by using a set of rules. After solving the nesting problem, I found that this is a huge efficiency improvement, especially in the case of complex layout, the efficiency can be improved by more than 80%. Even since you don’t have to nest any more, the interface looks almost exactly like a preview, true WYSIWYG.

Following this line of thought, what we need to do is a two-dimensional layout without nesting, which can be automatically merged by the width and height of the cells. The col itself cannot be adjusted, and the offset between the col cannot be adjusted.

  • Assuming that the cells can be scaled at will, we can set the width of the cells to be the span of col (span represents how many cells a COL occupies in 24 grids).
  • Assuming that the position of the cells can be oscillated at will, we can use the spacing between the cells as offset

The amount of work that has to be done on the details can be drastically reduced. For example, this layout:

Generate code like this:

    <el-row type="flex" justify="start">
        <el-col :span="8">
            <h3>span8</h3>
        </el-col>
        <el-col :span="8" :offset="8">
            <h3>span8</h3>
        </el-col>
    </el-row>
Copy the code

DEMO

Here’s a demo that I’m working on, so you can try it out. Visual layout in development

  1. Click the controls, or click Generate cells, to arrange them in a certain layout
  2. Click on the generated code in the upper right corner

If you have any good suggestions about this project, please feel free to talk to me

How to solve the usability problem?

Now that we know how layout can improve efficiency, how can we generate code for specific project configurations? Perhaps we can refer to the implementation of Babel, which converts ES6 code into ES5:

  • Parsing ES6 code generates ast syntax trees
  • Iterate through the syntax tree, modify the nodes in the AST according to the target environment and Babel configuration, and generate a new AST syntax tree
  • Generate object code based on the syntax tree generated by the Traverse stage

Corresponding visual layout:

  1. Generate a JSON recording cell from the GIRD layout
  2. Walk through the JSON and add nodes to the JSON based on the location of each cell, merging the width and height horizontally and vertically
  3. Generate object code based on the project configuration

In this way, we consider the application layer framework, code style, and UI library as a configuration item to be considered in the final code generation phase. Again, this simple structure illustrates how these three steps are implemented:

When you arrange three cells in this layout, the resulting JSON looks like this:

[{abscissa "x" : 0, / / "y" : 0, / / ordinate "w" : 16, / / width "h" : 2, / / height "text" : "A"}, {" x ": 0," y ": 2," w ": 16," h ": 2, "text": "B", } { "x": 16, "y": 0, "w": 8, "h": 4, "text": "C" } ]Copy the code

Second, according to our merge rules, convert this structure to (only AB merge is shown so the JSON is not too long)

[{" y "" x" : 0:0, "w" : 16, "h" : 4, / / highly combined into 4 "text" : "col", "children" : [] / / record information ab}, {" x ": 16," y ": 0," w ": 8, "h" : 4, "text", "col", the children: [] / / record information c}]Copy the code

The third step is to generate code according to tags, attributes, etc of each node.