1。提高研发效率还能做些什么？研发效率的提升一直是我们追求的主题。从最初的工具到工程，工程师尽最大努力更快地编写代码以满足不断增长的业务需求。然后，随着小程序等各种平台的兴起，工程师们开始研究多端统一开发的解决方案，让我们可以一次编写跨端运行的代码，进一步提高效率。但个性化业务仍在爆发式增长，我们不禁要问，如何才能不断创新，提高研发效率。我们考虑“求变”。在智能思维越来越普及的当下，传统的研发效率提升方式遇到了瓶颈。能不能用智能思维来解决呢？我们想，既然更快写代码的路似乎已经走的差不多了，能否实现基于AI方法的代码生成，让我们少写一些代码，于是我们的探索方向转向了“前端”+”智能化”，希望借助AI和机器学习能力，拓展前端能力圈，打通设计研发的工作流程，实现规模化生产。2.智能代码——选择的路径？Deco智能代码项目是我们团队在“前端智能化”方向上的探索。我们尝试从设计稿开始到生成代码（DesignToCode），完成现有的设计到研发能力。从而提高产学研效率。在日常的需求开发过程中，往往需要遵循一套固定的工作流程。产品提交需求PRD，交互设计师根据PRD输出交互稿，然后视觉设计师输出产品视觉稿，然后进入前端开发工作流程。对于前端工程师来说，输入源是可视化草稿+PRD，输出结果是可以上线的页面代码。Deco期望解决的是上述流程中前端工程师价值相对较低，可以用复用思路处理的工作：UI视觉稿还原，即页面重构，编写HTML+CSS；可重用的业务逻辑绑定；设计稿中已有组件的识别与替换，以“设计稿生成代码”为切入点，探索用智能方案替代传统的人工页面重构（图层样式分析+切图等），希望从视觉稿的原始信息中提取结构化数据描述，再结合各种智能算法输出可维护的页面代码。经过618推广的初步验证，Deco不断升级打磨。在双11个性化场馆的持续研发中得到广泛应用，覆盖了约90%的促销楼层模块，带来了约48%的业务研发。效率提升。3.如何实现设计稿的代码生成方案3.1．生成静态代码设计稿智能生成代码的第一步是生成静态代码，而这一步的核心是如何根据设计稿生成一个“结构化数据描述”信息，这个数据称为D2CSchema。Deco设计稿智能生成静态代码主要做了两件事：从可视化草稿中提取“结构化数据描述”；将“结构化数据描述”表达为代码；本质上，Deco智能代码是通过设计工具插件提取D2CSchema从视觉稿的原始信息中提取，然后通过规则系统、计算机视觉、智能布局、深度学习等技术对D2CSchema进行处理，转化为布局合理、语义合理的D2CSchemaJSON数据，最后使用DSL解析器转换为多端代码3.1.1.处理设计稿一个Sketch文档是由几层meta-info组成的压缩文档（文件后缀为.sketch）rmation（分为Document和Pages等）和资源文件（主要是图片）。需要对图层元信息进行处理，得到一份数据供布局算法服务处理。通过开发Sketch插件，使用Sketch提供的API帮助我们操作Sketch文档，获取图层信息后，对数据进行处理和过滤。图层信息的处理主要分为两层：设计稿处理层：将设计稿中的符号解耦为实际的图层，然后对图层进行各种处理，如过滤不可见图层，合并必要的图像图层，处理遮罩层等；层信息处理层：提取层中有用的信息，转换信息，同时去掉无用的层，压平层信息等。下图是层信息的处理流程：除了层信息的基本处理，我们建立了一系列数据导出的优化规则，以增加布局和语义的合理性。例如，在一些宣传设计稿中，一个复杂的背景图的设计可能是由几个矢量图形组成一个图层组（如下图所示）。如果将这些图层原封不动地导出，将会给布局带来很大的帮助。复杂性和不确定性。在合并图片??的过程中，如果一个图层组下的所有图层都是矢量图形，我们将它们合并为一张图片，这样会大大降低排版的难度。最终的图像组合效果如下：当然，上面提到的优化规则不能满足所有情况，毕竟设计师是自由的。为了提高布局的合理性和语义，我们为输入的设计稿提供了一些标准协议，供设计人员和开发人员使用。3.1.2.通过布局算法还原设计稿设计稿插件处理后的数据需要经过布局算法处理，得到视觉还原好、布局结构合理的代码结构表达数据。插件导出的元素数据是基于坐标原点坐标绝对定位在左上角(0,0)的元素信息，一般情况下（没有主动分组，没有AI识别等）元素是扁平的，即元素之间没有从属关系。在前端开发过程中，绝对定位布局在扩展性和可读性方面无法满足开发需求，所以如果不解决，就会成为一次性代码。因此，需要一种布局算法来提高生成代码的可扩展性和可读性，以供后续二次开发使用。布局算法层的运行过程包括数据结构转换、布局推导、样式计算三个步骤。数据结构转换是将SchemaJSON数据转换成类似于DOM树的结构，可以进行节点的插入、删除、查找等操作。数据转换处理后，需要布局推导。该步骤中进行行列分割推导，一般包括：空间布局算法、投影布局算法、背景图布局算法、特征检测布局算法、坐标推导算法、背景层和冗余度。层检测算法等。Layout导出后，Layout结构已经有了清晰的层级关系和相邻关系，我们可以得到一个分段合理、分组合理、结构合理的节点结构。布局结构生成后，需要进行样式计算，也就是对通过布局推导层得到的结果进行一系列的计算。例如，基于层级关系，可以通过坐标计算计算出Flexbox的主轴和侧轴；根据相邻关系，可以计算相邻之间的margin等样式。Deco风格的布局大多使用Flexbox，在某些特殊情况下需要绝对定位。经过布局算法处理后，我们可以得到还原性好、结构合理的SchemaJSON数据。3.1.3.生成语义代码当设计稿数据经过布局算法处理后，我们可以获得结构比较好的代码，但是这时候我们会发现代码仍然没有很好的可读性。为了最终得到可以再次开发的代码，我们需要在布局算法之后加入语义处理，使代码具有良好的语义。语义首先要解决的问题是如何给元素节点添加语义类名。为了达到这个目的，我们可以先回顾一下我们在开发过程中是如何给元素节点添加类名的。下面以单品图为例。上图为产品图示例。我们会根据图片、价格、图片下方文字等因素判断为商品。然后我们可以给这个区域赋类名goods，区域中的节点，比如图片可以赋类名goods_pic，图片下面的文字可以赋类名goods_tit，价格可以赋值类名价格。这是将类名添加到元素节点的一般逻辑。可以看出，我们通常在判断一个区域或者一个组件的语义时，需要根据该区域中节点的语义组合来判断。比如上面的商品组件，需要依赖内部图片、价格、文案等元素来确定语义，来确定类名。因此，语义处理方法从容器元素的子节点开始，首先判断子节点的语义，然后推断容器元素的语义，逐层推断，最后推断出完整的节点树语义。在语义处理中，我们主要的处理对象是布局算法处理后的JSONSchema数据，我们称之为布局树。这时候布局树已经有了很好的结构，我们可以对其进行语义推理操作。推理过程从树的叶子节点开始，逐层向上冒泡到分支节点，最后向上冒泡到根节点。目前我们推断的依据主要是节点的位置、样式、大小、兄弟节点等因素。同时，我们会结合不同类型的节点，结合一些智能手段来辅助推理。例如，最小的叶子节点一般可以有两种类型：图片和文本。对于文本，我们可以使用NLP来分析文本的词性和语义；对于一些图片，我们可以通过图片分类或者识别来确定图片分类或者提取图片根据图片上的关键信息对图片进行语义判断。为了确定每个节点的语义，我们需要结合一系列规则对已有的事实（样式、位置等）进行推理，同时，经过一些规则推理，我们会得到新的事实，而我们需要通过其他的规则推理才能得到最终的结果。因此，这是一个基于规则推理的推理系统。我们可以实现一个前向链推理引擎来帮助我们做出推理决策。例如，推断上述产品组件的过程，首先我们找到一个带有价格因素的文本节点，命名为price，然后我们在树中找到价格附近且处于相似级别的图片节点，图片节点符合到商品图的大小要求，这样我们就可以基本判断出既包含价格又包含商品图特征的容器是商品容器，然后根据容器中元素的个数，是否有图片附近的一段文字，对文字进行NER分析，我们可以判断这段文字是否为商品名称，从而确定其语义类名。在整个语义处理过程中，上述判断规则只是冰山一角。我们结合整个电商场景，分析了大量的设计稿和线上案例，总结了大量的判断规则，帮助我们合理化语义命名。在此过程中，利用NLP分析、图像分类识别等AI方法，辅助获取更准确的语义别名。3.1.4.生成DSL经过前面的步骤，我们就可以生成代码了。为了支持生成不同的DSL代码，我们将经过语义化处理的数据抽象成类虚拟DOM的节点描述数据，再将节点描述数据处理成各种DSL代码，并预留接口以支持新DSL的扩展。3.2.让代码有灵魂。生成静态代码后，我们会发现有时设计稿中会存在已有的组件。最好的方法是我们可以在设计稿中找出现有的组件，然后生成代码的时候再利用。为了解决这个问题，我们把目光转向了深度学习。利用深度学习中的目标检测和分类算法，我们可以识别和定位设计稿中已有的组件，最终将它们映射到组件库中的组件，达到组件复用的目的。组件识别与映射的整体流程如下：对于输入的设计稿图片，首先基于视觉算法进行合理裁剪，裁剪图片后识别出图片中包含的UI块，然后将UI块识别出来映射到架构JSON。节点信息，然后通过块的分类算法识别最有可能的组件类型，然后将识别信息写入到SchemaJSON的节点中，从而最终实现组件识别映射。目前我们已经完成了大促业务组件库的训练，可以准确识别定位设计稿中的大促组件。但是，我们发现如果要让其他业务接入组件识别和映射解决方案，有很多困难。其他业务团队没有AI处理能力。如果他们都让我们做组件训练，会大大增加我们团队的工作量。为了解决这些问题，我们思考如何共享Deco积累的AI能力，所以我们设计了AI开放平台。AI开放平台为开发者提供图像分类、目标识别等AI能力零门槛接入。开发者可以在AI开放平台上创建和管理自定义数据集。选择预设的算法模型后，可以直接进行模型训练和预览评估，这样如果有新的组件库需要训练，可以通过AI交给业务团队自己操作开放平台。3.3.业务中的实现至此，我们有了一个从设计稿生成代码的总体规划，但是距离规划落地还有很长的路要走。我们需要一个平台来执行我们的计划。当设计稿生成静态代码时出现错误，我们可以通过可视化编辑器进行二次调整。同时，在获取静态代码的同时，我们还可以加入组件化、字段绑定、生命周期等逻辑处理。3.3.1.组件化我们可以使用“组件标记”功能将某个节点标记为组件。将其标记为组件后，我们可以在组件中设置状态和数据，设置组件入参，设置组件生命周期等操作，最终生成代码时作为组件生成。3.3.2.数据定义我们可以根据需要定义页面的全局数据或者组件内部的数据，也可以通过设置React上下文来定义共享数据。3.3.3.异步数据请求针对最常见的异步数据请求场景，Deco提供了可视化的表单，可以通过简单的配置快速生成异步数据请求代码。3.3.4.事件绑定Deco提供了包括点击事件在内的多种节点事件，以及组件生命周期等事件的定义。用户可以在事件中编辑逻辑代码。3.3.5.属性编辑和数据绑定此外，Deco还提供了组件映射的能力。在此基础上，开放了组件的属性编辑和数据绑定能力，实现页面与动态数据的连接。4.未来展望现在看来，智能代码是一条值得探索的道路。它是一颗种子。也许此时它才刚刚萌芽，但我们对它抱有很多期待。我们希望通过Deco探索前端智能化之路，探索AI与前端结合的各种可能性，更重要的是我们希望通过Deco开启产学研的效率革命，探索降低成本在各种前端工程、平台、方法论日趋完善的当下，对于业务来说。另一种提高效率的方法。同时，我们一直在智能化上下功夫。或许在未来，我们可以直接实现设计和交付，这无疑是行业的又一次创新。路漫漫其修远兮，需要技术人上下求索。
