阿里前端也切图？不，人工智能帮你作

关注个人公众号：一颗小树，一块儿交流，共同成长。

做为负责 Aliyun 大官网和营销中台团队中的一员，咱们的平常工做是横向支撑各种运营同窗的需求，建设线上运营场和营销能力，帮助他们实现用户和收入的增加。在之前咱们经常会听到这样的声音：

• “今天咱们有一个紧急的需求，能够帮忙支持一下吗？”
• “这个页面很简单的，可是咱们没有本身的前端同窗，能帮忙支持一下吗？”
• “个人需求提交好久了，何时才能排期呢？”

过去的协做彻底基于人工支持，你们疲于奔命，但前端每每仍是成为瓶颈，难以抽出时间来进行深度的思考和能力建设，久而久之会陷入一个恶性循环，同时外包和计件服务的也在逐渐减退，开发提效迫在眉睫。你们很容易可以想到，针对常见的业务场景和模式进行组件化的沉淀，没错，咱们成功和设计同窗改变协做模式，组成统一战线，实现了核心营销玩法和通用组件的沉淀，实现大部分平常场景的运营自主搭建。 但与此同时，咱们发现组件化并不能解决全部的问题，同时组件化的开发自己也是具备不小的开发成本的，是否能经过集团沉淀的能力和经验，为咱们带来一些新的思路呢？这时咱们盯上了集团智能化方向，在帮助咱们进一步提效开发的同时，也为咱们智能化能力的演进打下了基础。

集团造风，咱们乘风

对我来讲，智能化是集团前端四大方向中最神秘的一隅。通过研读智能化小组的分享以及和小组成员的交流，梳理出了咱们的场景和集团智能化方向场景的异同。

	集团（淘系为主）	Aliyun 大官网
场景	营销导购	营销导购
客户端	无线场景为主	PC + H5
场景特色	复杂度相对较低，展现型为主	复杂度相对较高，存在复杂的交互和状态切换
需求特色	业务模式和视觉规范更成熟	玩法和营销模式长期处于探索期，业务需求变更比较频繁
数据模型	有成熟的业务数据模型，搭投一体输出数据	数据模型结构化程度还不够，多须要运营人工完成录入
提效思路	在认为基础组件和业务组件复用难度高的前提下，经过 D2C 能力和可视化编辑，下降二次开发的成本	组件化沉淀约束设计规范和复杂玩法；
简单模块零开发，不须要前端参与；
服务人群	前端开发	运营 + 设计师 + 前端开发

淘系是在场景、数据模型甚至需求标准化的前提下，利用智能化实现开发提效。咱们是在各个层面的标准化暂未成熟的前提下，指望经过智能化能力，下降平常需求的投入，用技术为开发提效，为运营赋能。 当前集团智能化方向的核心能力是 D2C（Design to Code）能力，其中 UI、数据、逻辑的识别和表达，是基于「智能化的前提是标准化」这一前提进行的模型构建和训练，最终以 imgcook 做为产品载体输出。在集团的其它 多个 BU 中，多为利用 imgcook 的能力，配合可视化编排引擎，落地低代码开发，提升开发效率。 这证实智能化能力在开发提效的路径是走得通的，这时候须要结合咱们的场景，思考更多的可能性。因为咱们会有大量的平常/临时需求，纯粹靠人工或外包的模式始终是成本很高，对业务的体感也较差。 最终咱们肯定进一步优化 D2C 能力，经过工具自动完成数据坑位的提取，转换生成模块 DSL，直接从视觉稿输出可渲染的模块，最终让前端之外的角色能本身玩起来。与此同时，咱们的设计（稿）规范、数据模型、业务需求，还不具有成熟的标准，所以，咱们须要根据差别点，梳理解法并设计对应的技术方案。

站在巨人的肩膀上，构建适合咱们的智能化能力

最终通过和团队小伙伴的共同努力，上线了两种可以助力咱们提效的智能化方案。

Design to Component - 组件设计器落地零开发

实现了视觉稿直接生成模块，自动挖取数据坑位的能力。对于普通展现类型的页面，能够在小时级完成配置并上线。

Design to Code - 借力 imgcook 提效二次开发

这部分依托 imgcook 的标准开发链路，拓展自定义 DSL，下降 70% 以上视觉还原的成本。

以智能化为主线，沉淀通用技术能力

首先须要解决 DSL 可维护性和可拓展性的问题，好比多种模块 DSL 的组装和输出，所以建设了 DSL 转换引擎。另外一方面，零开发须要实现数据自动挖坑和绑定的能力，就要求咱们从视觉稿中获取更多信息，具有识别模块结构的能力，即合理的分组和节点的识别，所以建设告终构化引擎。 在整个过程当中，对团队须要的智能化能力进行了一轮梳理，技术设计上，也增长了更多灵活的设计，应对将来的可能性。 最终为咱们的开发实现了不一样程度的提效。

下面为你们详细介绍实现 D2C 能力的技术方案。

DSL 转换引擎：配置化输出可运行的 DSL

这一步是将相对定位的模块描述数据转化为前端直接可用的代码。自定义 DSL 的原理不在此赘述，咱们的诉求是DSL 转换能力能够支持在 Node、Web 等多端可用，同时因为咱们将来须要支持多种 DSL 规范，这些规范有可复用的部分，也须要有灵活拓展的能力。

所以咱们将其中的能力分为核心层（Core）和处理器（Processor），每个处理器是一个独立的功能单元，分别负责最终代码须要的模板、样式、数据和 Schema 生成等功能。核心层负责标准化输入输出，完成处理器流程的串联，补充拓展性。最终完成配置化 DSL 转换引擎的输出。

结构化引擎：掌握模块结构，解析定义元素

结构化的基础思考是当前 imgcook 能力须要对视觉稿进行简单的规划化整理，咱们指望尽量少的对视觉稿进行干预，下降其余角色的使用成本，那就有必要对模块进行标准化的描述。同时 imgcook 的官网推荐链路中可视化的二次编辑尤其重要，在这里会补充视觉稿不太方便直接描述的信息，好比数据字段的绑定、循环的处理、事件的声明等等逻辑。 若是咱们指望实现零开发的链路，就必需要自动补所有分这类信息。针对数据字段的绑定，须要了解当前模块中有哪些节点、每一个节点须要开放哪些配置，即须要具有 UI 模型的识别和解析能力。针对组件结构的识别，借鉴了集团的布局算法方案，实现了一版基于咱们场景下较简单的分组算法。 最终结构化引擎输出的设计以下，其中元素模型负责对模块中元素的识别和解析，抽象基类处理通用逻辑，不一样元素可输出不一样能力，实现精细化识别；结构转换的基础是标准的分组结构，将来辅助精细化的元素模型，实现更智能的结构识别，如循环等。

结构化引擎在底层设计作了更多通用化的考量，将来能够做为通用的模块结构解析能力，不局限在 D2C 生成的模块中，标准结构化信息能够覆盖全部的搭建平台模块，拓展更多的业务场景。

乘风破浪，持续探索智能化建设方向

目前初步实现了 D2C 能力的最小闭环，已经在部分业务场景中使用，期待能在提效上带来的成果，将来还有不少能够想象的空间：

• 以智能化为基础，充实提效能力，重点是结构化引擎优化，充实识别能力。如：
  • 标准组件匹配率提高，补充配置化能力
  • 循环结构自动识别，数据循环配置自动输出
  • 推动视觉规范，利用 PC 自动完成 H5 适配
  • 持续接入其它智能化能力，如智能配色、智能合图
• 以智能化为契机，探索业务赋能方向，如：
  • 改变业务支撑模式，提升业务支撑效率
  • 串联数据体系，提供业务效果优化建议，辅助业务决策
  • 接入标准模型，内容智能匹配，减小人工配置
  • 模块结构分析，智能匹配已有组件，提升搭建效率

结语

目前不可避免地还存在一些问题，好比须要对视觉稿作标准化的处理，短期内还难以免前端同窗零投入。但智能化能力仍是给咱们带来了史无前例的强大能力，帮助前端解放生产力，投入到更有价值的领域中去。

最后的最后，欢迎一块儿来建设 Aliyun ToB 的线上体系，作点不同的事儿。长期接收任意姿式的社招同窗，邮箱 yeshu.lrt@alibaba-inc.com，欢迎交流。