本文首发于「Shopee技术团队」公众号,探索更多Shopee技术实践

本文是基于 Shopee Supply Chain WMS（Warehouse Management System,仓库管理系统）Team of the authors efficiency by using the low front-end code system a practice.

目录1. 项目背景    The current development mode of pain points2. 思考破局    业界方案对比3. ASLINE 方案设计    3.1 核心设计思想    3.2 核心架构4. Core difficulties and solutions    4.1 Design components of intelligent recognition    4.2 布局转换    4.3 Interface with the component field match5. 系统展示6. Fall to the ground and subsequent plan

1. 项目背景

在 Shopee Supply Chain WMS 团队内部,经过近几年的沉淀,Our design team、前端团队、The backend team formed an effective way of collaboration between.

We have the following basic resources and standardize：

• The front-end based component library;
• The front-end business component library;
• Front end design and abide by a set of design specification,Design based on component library UI,通过 Figma Output the design draft;
• Before and after the end of the current way of collaborative development alignment：通过 YAPI 在线平台,In front of the interface unfinished,Interface document is given in advance.

The current development mode of pain points

然而,These existing component、Although specification and process to a certain extent, help us faster output page,But the development efficiency of limited.

作为以 ToB The business of warehouse management system,The front page of a large number of management background related page,High frequency is to form a query show、表单输入、Information display a list of query page and content page for details,如下所示：

并且,After a year or two to precipitate,Our page business componentization high degree,Most of the page can be split into a business component module of a.

我们有类似于 Element UI Since the research basis of component library.And the business component is based on the multiple component coupling certain properties and business logic,Packaged further,Therefore also gradually formed a set of business component library.

同时,In the end interface alignment before and after the link,In the face of these pages,The front-end requires a certain amount of time to match the display field and interface,Alignment larger workload.

总结起来,The main pain points here are：

• High business page similarity,且需求量大,There are many query list page、内容详情页面;
• Before and after the end interface alignment from volume.

Based on the existing component library resources、设计规范、Platform interface document resources, and facing the pain,我们在思考,Whether effective will existing tools to better together？By what means can better to improve development efficiency？

2. 思考破局

针对上述痛点,我们的核心问题是：

• How to quickly output does not contain the business logic of the front page？Could you please design draft directly into the page code？
• How to effectively reduce the front end alignment time？

为此,We naturally think of the current relatively low to the fire code platform concept.Based on the spot and demands,We pre-research industry some of the best platform for the same low code scheme.

业界方案对比

Compared with a few of the more popular industry low code below platform：imgCook、CodeFun、飞冰、H5-dooring 等.

Slide left see the full form

总体而言,Different low code platform has its own characteristics and advantages,But not fully in accordance with our requirements.最为核心的是,Can't with our existing workflow and the basis of existing components、Business component library resources phase through.

我们的诉求是：

• 需要支持 Figma 设计稿的识别;
• System is able to and the foundation of our since research component library、The business component library combining,Also is the foundation of the generated code is based on our own component library、The business component library;
• Effective and API 对接,Speed up the front and rear end alignment;
• Can be second edit export code,Have enough flexibility to ensure the future optimization and new requirement.

基于此,We decided to research and development based on UI The design draft recognition and automatic API Visual interface docking low code system.

当然,这里有一点需要强调：我们做的是低代码而不是零代码,Although our business page high similarity,But the business logic is different and very complicated,We hope that the system output is justThe middle code,可以理解为“半成品代码”,Its purpose is to help complete the front page layout and the part of the alignment of the interface docking work,And we need to get thisThe middle code,二次开发,Complement the rest of the business logic.

We design the low code system,Goal is to give attention to both efficiency and flexibility.

3. ASLINE 方案设计

为此,我们自研了 ASLINE 低代码系统.

ASLINE,意为 Assemble Line 流水线,We hope for some high frequency、量大、重复的页面,The system can quickly like a line of output corresponding high quality code.

3.1 核心设计思想

The system of the core design idea is make full use of existing resources,即：

完善的组件库+Online design draft resource+在线接口文档.

核心流程如下：

1. By identifying the design draft,Identify the components used in the design draft,Combined into the page,自动生成基于 flex 的智能布局 UI 代码;
2. 通过接口文档,Automatic generation of front-end web request relevant code,Automatic matching replacement components in field;
3. Based on the above two process,Completion to generate most of the framework code（Vue）,Export the complete structured page code can run.

The core of the system to provide the ability to include：

• The design draft to the page layout and the intelligent identification of the component;
• The canvas drag and drop support components and intelligent adsorption;
• Supports visual configuration adjustments;
• 组件和 API Interface field automatic matching;
• API Interface section code automatically generated;
• Download code generated automatically merge and export.

3.2 核心架构

Take a look at our abstract design the architecture of the system as a whole：

The interactions of the whole system is based on低代码平台,Through the three core algorithm：The design draft recognition algorithm、Intelligent layout transformation algorithm、API With the component field matching algorithms will core processes together.

4. Core difficulties and solutions

The system is more difficult,Built around the core algorithm about the following three points here：

• How to carry out the design draft recognition？
• 布局问题：Identify the components of how to realize the absolute positioning based on the canvas to export the current layout of the conversion？
• How to realize the interface with the component field match？How to improve matching accuracy？

4.1 Design components of intelligent recognition

ASLINE Low code system support design draft recognition,Can intelligence used to identify the corresponding component.

这里有一个误区,We are not to directly compare the image similarity between,But through the image abstraction and normalized to a digital matrix.Finally compare,After standardization is actually two digital matrix similarity.

In the component identify this piece,You might think of image recognition,The industry with more mainstream scheme is Mask R-CNN Depending on the machine learning method,But we think this project is not necessary to do so complicated,Don't need to use the complex algorithm even need to use the point of machine learning.

同时,There is a don't need to identify,Directly through the design draft marks indicating the name of the component of the plan.Didn't choose this solution mainly because do not have good versatility（Need to design team involved in、Also conducive to spread to other teams）.

因此,We compromise choose the following will introduce this kind of,实现简单、处理速度快、准确率较高的方式.

我们可以通过 Figma 的 OpenAPI 获取一个用来描述设计稿所有元素的 JSON 文件,通过这个 JSON 文件,能够知道文本的信息、各种元素的 CSS 信息、大小以及位置等.在拿到这些数据以后,可以通过提取出一些有效的特征,将这些特征转变为数字矩阵,通过数据的对比来识别出对应的组件.

4.1.1 数据获取

我们可以通过 Figma 的 OpenAPI For any designs JSON 数据,接口为 https://api.figma.com/v1/files/:file_key/nodes,To obtain the return of data format roughly：

{    name: 'Component Name',    lastModified: '2021-11-29T08:57:41Z',    version: '1334322378',    role: 'viewer',    nodes: {      id: '6:188',      name: 'Component Name/View',      type: 'FRAME',      children: [{        "id": "6:202",         "name": "bg",         "type": "RECTANGLE",         "blendMode": "PASS_THROUGH",         "absoluteBoundingBox": {            "x":1792.0,            "y":-762.0,            "width":114.0,            "height":32.0          },          "fills":[            {              "blendMode": "NORMAL",              "type":"SOLID",              "color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0}            }          ],          "strokes":[            {              "blendMode":"NORMAL",              "visible":false,              "type":"SOLID",              "color": {                "r":0.85882353782653809,                "g":0.85882353782653809,                "b":0.85882353782653809,                "a":1.0               }            }          ]        }      // ... 还有 N Several similar nodes      ]    }  } 

nodes Will contain each of the elements in a variety of information,This information is too much too big,And it contains a large amount of redundant information,So the next step we need to conduct data cleansing.

4.1.2 数据清理

After get the design draft all data,We must carry on the data cleansing work.This is because the designers draw designs,Some of the text or element information may use is hide 属性,The hidden and not deleted the elements.Sometimes draws more does not show the effect of the layer（Similar to an empty div 元素）,Or design draft marked some note information,All of these work for design draft recognition belongs to the noise（noise）,So the next step work is by setting some special rules（Such as regular matching, and identify some special parameter name）To remove the noise.

The content of main removal：

• 剔除 visible 属性为 false 的元素;
• Eliminate note information;
• Weed out to show off meaningless elements.

4.1.3 特征数据提取

For this step to understand,可以想象一下,When we see such a component in design draft：

Next to the component in the document which component should be used,We found the component：

Although the two components in different text information,Length and width are not the same,But we can know that they are the same components.

This is because our brains automatically on the component抽象化（Abstraction）,We will both figure similar features are extracted automatically,进行标准化,Then will be able to match to the：The two pictures in fact is one thing.

因此,Our component matching is also mimic this process.Here only the text extraction as a feature to explain the process：

• 首先,Using the depth-first traversal will all text elements of information extract;
• 然后,生成一个二维数组,2 d array of the number of columns for the Table 组件的宽度（Is actually the pixel width of the component in the design draft）,Line number for this Table 组件的高度;
• 接着,Each text elements in the two dimensional array position is set to 1,With no other text element coordinate superposition of two dimensional array elements,值都为 0.

The following picture was used to simulate the,The black part is a two-dimensional array is marked 1 的地方,White is a two-dimensional array is marked 0 的地方：

We need to do next standardized processing,And the size of the text element is、数量,And the component of wide and high,According to certain proportion to standardize,Into this style：

The left is standardized components,The real two-dimensional array is the right way,一个二维矩阵.实际是这样的（图片大小有限,实际的 0 和 1 会更多）：

4.1.4 数据压缩

After got the two-dimensional matrix,If you want to keep it down,非常耗费空间,Therefore shall transfer the data compress.Compress the data at the same time,Also need the data in the can directly to compare,也就是需要一个Special lossless compression algorithm.

可以发现这个 Table Two dimensional array of components is mostly 0,1 Part is a small number of,So we will be the first two-dimensional arrays into one dimension,然后每 32 A into a,就可以发现,The inside of the each values are one 32 位的二进制.

We will the binary to decimal number,如果该值为 0,Automatically skip this a.如果值不为 0,An object is used to save,key A value for this copy of data index,value Set as binary to decimal values.So that we will have a very large originally matrix object much larger compressed into a small object.

Compressed data format：

{    "Table": {      "matrix": {        "1": 127,        "2": 478,        “10”: 1229332,        // ...        "528": 127,        "529": 2147483392,        "530": 8388607,        // ...      }    }  }  

其中,“1”,“2”,“528” Represents the standardized coordinate,On behalf of the area of information is not complete as 0,Then face should be digital, said the region's information,我们将原本的 01010101 Change to a decimal display.

4.1.5 组件比对

After the data is compressed,The following data than.在真实的系统中,A standard could be preserved database Table Components of compressed data,When we started comparing,The design first draft of a component by the above transformation,Into a compressed data,To save the data and database of standard components database compare.

The comparison process is as follows,After the above calculation,Can get the design draft components in data：

{    "Table": {      "matrix": {        "528": 127,        "529": 2147483392,        "530": 8388607,        // ...      }    }  }  

One of standard components database component data：

{    "Table": {      "matrix": {        "528":300,        "529":2147483392,        "530":8388607,        // ...      }    }  }  

可以看到,The design draft components in data key 值有 528,At this time to see whether the components in the standard library have 528,There are on either side of discovery index 是 528,值分别为 127 和 300,That is to say, some of their binary is not the same.This time can use an operation,Will be able to know which is the same.

举个例子,After the use and operation,得到 127 & 300 = 44,44 Is a binary number to a decimal value after,其中 44 中有多少个数字 1 Represents how much is two pieces of similarity,It then how can I know 44 How many of the binary single-digit is 1？

我们可以选择将 44 转为 32 位的二进制,Then traverse again to get a total of how many bits as 1.But the quicker method is,44 的 32 位二进制中,是 1 The figures must be less than 32 的,So we use a special operation method i & (i-1),Use of this operation,A binary will be the most on the right side of the 1 去掉.

为什么 i & (i-1) Can remove the right 1 呢？Because from the perspective of binary,n 相当于在 n-1 The lowest plus 1 .44 的二进制为 101100,43 的二进制为 101011,44 & (44-1) = 40,40 的二进制为 101000,也就是比 44 The binary less a.So you can use cycle for a digital and digital subtraction 1,Know the number of 0.

利用此方式,Than the number of times must be less than 32 次,We can also based on this for algorithm optimization.Through this method to iterate over all components after,Select the highest similarity,即可得到比对结果.

The above is based on image information to identify a component of the whole process of,大致分为 5 个步骤：

1. 数据获取;
2. 数据清理;
3. 特征数据提取;
4. 数据压缩;
5. 数据比对.

通过上述 5 个步骤,You can find the highest similarity component.The benefits of this approach is that don't need special large sample size,Similar to the deep learning training after the model function,We found a rough version of the function.This kind of plan recognition speed,Components and text information extraction and recognition are get together,Don't need to be divided into two parts,To further improve the efficiency of.

But this solution identification is not accurate sometimes must have,And this solution is due to artificial define some characteristics of the data（比如上面的例子,We will feature data as the text information,Can also be information such as border）,Can't cover too full,因此,We have a complete set of degradation based on the recognition and relegation scheme：

当然,Here are some questions need to explain,Such as why not just use a ID What kind of component is clearly identified in the design draft？Why must be to use algorithms to identify？这里有几个原因：

• Considering the internal team Figma Account with the corresponding design resource permissions distribution,If you want the designer clearly identify each component,And take a specific ID,Additional design work,At the same time not too good for popularization of this tool to other teams;
• Based on the existing way of recognition,Suppose a new component,无需 UI Lateral synchronization add this ID.

基于以上现状,We have developed such a way to identify.And it is common,Based on any component can be to do this.

4.2 布局转换

Many low code platform on the canvas to display,Due to convenient calculation and drag,Are based on absolute positioning,The final output of the layout of the page code to use way are also most absolute positioning.

But in the real business code,HTML Code needs to be a hierarchy,并且就目前而言,Most of the use of flex 进行弹性布局.So we need a converts absolute positioning components flex The algorithm of elastic layout.

我们的做法是：

• Through each component position calculation,Automatically generate a hierarchical structure of HTML 代码;
• By the location of the relationship between component,优先以“行”结构进行划分,其次以“列”Structure to calculate,生成基于 flex 布局的 HTML/CSS 代码.

How to know the layout of information？我们采用的是投影法,In such a layout for example：

它由 3 个业务组件构成,Each is a flex item.那么,How to know it in the process of transformation of the nested structure of——That it has 2 行,其中第一行有 1 个元素,The second line side by side 2 个元素呢？

First from the left to right,Assume that a beam of light level to play in the past,Projected on the walls of the results——The number of discrete black piece,That separates the number of rows can be：

Based on the result of the above has separated the line,Projection down on again,And how many of each line can be listed.

最终,We will based on the layout of the absolute positioning originally,转换为基于 Flex 的布局,类似于这样：

<div class="container">    <div class="row-1">      <PageHeader />    </div>    <div class="row-2">      <div class="column-3">        <ProTable />      </div>      <div class="column-4">        <TrackingHistory />      </div>    </div>  </div>  

.container {    display: flex;    flex-direction: column;  }  .row-2 {    margin-top: 12px;    display: flex;  }  .column-4 {    margin-left: 20px;  } 

对于整个 container 而言,We will set it to a vertical arrangement of flex 布局,设定 display: flex 与 flex-direction: column.

而 container 容器之下,Projection analysis result is in accordance with the above,设定 row 信息（行信息）,Each line container set flex-direction: row,And then based on the vertical projection of each inline analysis get inline column 分布,At the same time according to the actual physical configuration,Get the spacing between each column information,Thus summary get overall flex 布局代码.

4.3 Interface with the component field match

When identified the design draft of the corresponding business component,And render it on the page after,ASLINE Low code system also provides a kind of ability,To each business component associated with an interface to match,By entering the interface associated documents URL,Automatic generation of front-end web request relevant code,Automatic matching replacement components within the field.

Here we mainly do a few things：

第一,When a user provides the corresponding business component interface document URL,System can help generate a request related code,Save some work.

第二,Complete the front page display and interface field match.这是什么意思呢？Components such as a form of,A field in the front-end display as start time,The backend interface fields may have returned to the front end start_time、 begin_time 等形式表示.这里,算法要做的事情,Is the field will be displayed at the front and back-end returned to the field of matching,We relate them correctly.

The overall process of here：

1. 选中组件后,To get the component field data;
2. Input interface document request parameters,The document components parameters and field data to our API 处理服务;
3. API Processing service interface document request parameter,Pull the user input interface document data;
4. Component field data and interface document data matching,Through the highest matching algorithm calculates the similarity of the interface of field;
5. The component field replacement for matching interface documents after the field values of the;
6. Return after matching interface document component data、API 接口数据;
7. After the system receives the response data,Will match good component data update to the page;
8. The user can after matching fields,Artificial secondary confirmation and adjustment.

其形式大概如下,For us as a business component ProHeader：

Data on the right side panel is as follows：

Through the input interface document for interface should be URL,We can pull to the interface information,Label Column represents the front-end display field copywriter,而 Prop Column is after intelligent matching,Display field and interface matching results.

For such a PageHeader 组件,After identifying and interface matching,Export automatically generated such a piece of code,以 Vue 项目为例,大致的伪代码如下：

<template>    <SPageHeader      // 一些组件的 props 入参      :infoSchemas="schemaProps.infoSchemas"      :infoValues="infoValues"      :titleInfo="titleInfo"    >    </SPageHeader>  </template>   <script>  import { Vue, Component } from 'vue-property-decorator';  import { SPageHeader } from '@/ssc-vue-ui';  import request from '@/utils/request';    // By analyzing the request of interface document generation into the reference interface  interface InterfaceGetCcOrderDetail {      // ...  }    // Automatically generate request interface code  export const getCcOrderDetail = async (params: InterfaceGetCcOrderDetail) => {    const res = await request.get(      '/api/test/xxx/xxx/get_xx_order_detail',      {        params: {          ...params,        },      },    );    return res;  };    @Component  export default class SPageHeaderComponent extends Vue {    titleInfo = {      // By identifying the design draft to get some of the components of the default document    };      // basicInfo label 列表,According to the design draft and interface document,Actual display parameters of components and interfaces document fields match,And some business information    infoSchemas = [      { label: 'Source From', key: 'source_from', enums: 'CycleCountSourceFrom' },      { label: 'Source ID', key: 'source_id' },      { label: 'Type', key: 'cc_type', enums: 'CycleCountType' },      {        label: 'Operate Function',        key: 'cc_operate_function',        enums: 'CycleCountSkuCCOperateFunction',      },      { label: 'DynamicCycle Count', key: 'is_dynamic_count', enums: 'YesNo' },      { label: 'Blind Count', key: 'is_blind_count', enums: 'YesNo' },      { label: 'One By One', key: 'is_one_by_one', enums: 'YesNo' },      { label: 'Create Time', key: 'create_time' },      { label: 'Creator', key: 'creator' },      { label: 'Cycle Count Method', key: 'cc_method', enums: 'Express' },    ];    // A simple initialization logic,发送请求,渲染组件    mounted() {      this.getDetailInfos();    }    async getDetailInfos() {      try {        const res = await getCcOrderDetail();        console.log(res);      } catch (error) {        console.log(error);      }    }  }  </script>   <style lang="scss">  // CSS 相关代码  </style> 

包含了整个 Vue 文件的各个部分,组件入参、接口请求、The component rendering, and so on.

当然,Here are just a business component,For a complete page,We also will be based on a single component,再有一个 index.vue Aggregation of all the components on the page,并且基于 flex Layout complete a layout of the content.

5. 系统展示

The following simple show the whole system and its key step.

The start into the home page is only one input box,Only need to fill in the corresponding Figma URL.

在对应的 Figma 页面上,Pick a common list page in our business,将其 URL Fill in the system in the input box can be.

完成识别后,System will give you the business component of current identified list,There is a user the adjustment process of secondary confirmation：

再点击下一步,To enter the main edit area.On the drawing board to get what we identify the components：

这里分为：

• Can drag and drop components area：Can increase the content of the canvas,For some have not been identified components can be dragged into the canvas from here;
• Operation panel area：Some conventional operation on canvas toolbar,譬如撤销、回退、Auxiliary line etc;
• 画布区域：可以调整布局,Cut the component;
• Secondary edit panel：On the depth of each component to adjust,Associated interface, etc.

最后,调整完毕,Click on the upper right corner of the export code,Each business component can obtain separate code,And the complete code of the page.

6. Fall to the ground and subsequent plan

Here is necessary again：The platform is low code,Rather than zero code platform,System to help us finish,Just the page layout、The interface alignment and so on some tedious repetitive work.After receiving system export code,We still need this part based on the middle code,To continue to supplement some complex business logic.

This is our from one's own business scenarios,Considering the actual pain points in daily work,To achieve an effective to reduce part of the repeated mechanical labor system tools.

目前,This system has access to Shopee Under the supply chain based on Vue Framework of multiple components：

• Applicable scope：Now full recognition, can use half a recognition of the design draft 30%-35%,Mainly distributed in the list page and details page;
• For these list page and details page,From the current access use case,The business component recognition success rate can reach 92%,Only a few cases need to manually modify,Drag and drop or directly in the page;
• To apply the page,The average can save 80% 的开发时间（A single page list from 0.5 - 1 Working to 1 个小时）.

当然,ASLINE Can significantly improve development efficiency,降低开发成本,但是也存在一定的局限性,Need all kinds of specification/组件库作为支撑.And early development of work not low.

About follow-up prospects,We have already begun to fit different component library and development framework（React）,And the introduction of intelligent learning,提高识别准确率、Interface field matching success rate.

同时,We also on ease of use of the canvas、Experience on interaction continuously optimize,Increasing the number of components support.We expect that in the case of no design resources,Support fast drag assembly commonly used page,In the service of some non front-end classmate,Generate more business value.

本文作者

Coco,前端工程师,来自 Shopee Supply Chain 团队.