前端代码是怎样智能生成的 - 语义化篇

做为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次 《前端代码是怎样智能生成的》 系列分享，将与你们分享前端智能化项目中技术与思考的点点滴滴。

---

文/卡狸

概述

imgcook 是以各类设计稿图像（Sketch/PSD/静态图片）为原材料烹饪的匠心大厨，经过智能化手段将各类原始设计稿一键生成可维护的 UI 试图代码和逻辑代码。

语义化是什么？

语义 主要研究符号标记，以及他们所表明的事物之间的关系，语言学中主要研究符号所表达的意思，而在 web 前端开发领域中，语义化 指编写 HTML 的过程当中“用最恰当语义的 html 标签和 class 类名等内容，让页面具备良好的结构与含义，从而让人和机器都能快速理解网页内容”。语义化的 web 页面一方面可让机器（搜索引擎、爬虫、屏幕阅读器）在更少的人类干预下收集并研究网页的信息，从而能够读懂网页内容，收集汇总信息进行分析；另外一方面它可让开发人员读懂结构，快速理解页面各区块功能，便于二次维护。 简单来讲就是利于 SEO，便于阅读维护理解。

传统语义化包含了 html 标签的语义和 class 类名的语义。

先说 html 标签语义，在 HTML 5 出现以前，咱们只能用没有语义的 div 来表示页面章节。如今，经过使用 HTML5 语义元素标签，如 body、article、nav、aside、section、header、footer、hgroup等，咱们能够经过读取 html 结构就了解页面的布局结构。在 react-native、rax 等跨端 UI 体系下，标签一般被各类组件替代，标签语义化也就转换成了“组件语义化”，在合适的场景下使用合适的组件名便可实现结构可读。

class 类名语义化指用易于理解的名称对 html 标签附加的 class 或 id 命名。class 属性本意用来描述元素样式内容的，通过前端领域多年的演变，已经不只局限于作 HTML 和 CSS 的衔接，而是一个集样式定义、函数钩子、组件类型等多层意义的复杂属性。 本文将专一于 class 类名语义化这个问题，尝试运用 D2C 的能力完全解决，

所在分层

在总体架构中，语义化层负责对布局算法生成的视图进行语义推测，用较为人性化的类名替换初始值，从而达到接近前端本身命名的效果。

(D2C 技术能力分层)

制定 class 类名命名原则

业界规范

BEM（Block，Element，Modifier）
**
BEM 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。用中划线、双下划线、单下划线来作单词间的连接记号，经过将页面分解为一个个小小的可重复使用组件来解决复杂项目的命名问题。好比：.block {}、.block__element {}、.block--modifier {}，都是典型的 BEM 命名模式，他们的命名规范、可读性高，经过组件的修饰符就能够了解组件的形态。

NEC（nice easy css）

国内的网易团队指定的前端样式规范。经过指定的单字母前端来作功能划分，大致上有如下功能：重置和默认（reset + base）、布局（g-）、模块（m-）、元件（u-）、功能（f-）、皮肤（s-）、状态（z-）、js 钩子（j-）等。基于上述单字母命名，再使用简约而不失语义的后代选择器名称追加其后。典型的 NEC 命名如m-list、u-btn-hover等。

AliceUi

用扁平化的方式划分为不一样层级。基于 - 符号作命名空间隔离，第一个前缀一般是通用业务标识，各业务线选取本身的前缀，后面依次用组件名、组件状态等填充。组件名必选，且要求表意，模块内部类名需继承上层名称。ui-name-status、ui-page-item-info都是典型的 AliceUi 命名方式。

业界的 class 类名规范的目的都是解决大规模项目下的样式命名问题，且由于遵循了各类层级结构关系和私有约定，编写出的类名广泛较长、在不了解规范的人眼中须要有必定的适应过程。不是特别适合 D2C 主打的移动端轻量级的模块开发场景。

从实际场景推导

为了寻求适合的场景，咱们分析了内部的前端工程师在导购开发业务下真实代码的样式命名。下图是咱们对淘系导购页面的真实词频统计结果，左图是样式全名词频，右图是拆分以后的原子结果：

(前端样式词频分析)

图中样式命名有以下特色：

• 和 BEM 、NEC  等规范的风格不一样，实际开发场景中的命名相对简洁
• 准确表达语义，且和节点业务特征强关联
• 单词为主，复合词采用驼峰命名，长度一般不超过 3
• 辅助性的修饰词如： wrap 、 ctn 、 empty 、 desc 等高频出现
• 可以使用通俗易懂的简写单词

制定命名原则

D2C 但愿优先解决淘系移动业务的问题，整体上以实际场景为主，业界规范为辅，最终肯定了以表意为主要原则的样式命名策略：

• 表意：样式名需准确表达节点意义，选择上优先从移动端业务真实类名中获取
• 简洁：以单个词为主，全部词都使用不超过三个原子词组合
• 规范：以驼峰为主，同时在代码转化层面保留了转化为连字符的能力
• 工整：从模块根节点开始，采用 布局信息 + 区块语义 + 语义辅助 的总体命名策略

类名策略树

命名原则肯定后，咱们至关于定义了一个树的最终叶子节点形态，接下来须要构建从枝干一点点按图索骥到这些最终节点的过程，最终构建出咱们的类名策略树。

判别维度

在实际对节点类名命名的过程当中，咱们要考虑的规则每每是多个维度的：

(样式判别维度)

imgcook 对淘系多达几百的模块进行规则提取，根据真实书写习惯，将上述规则作了权重，通常来讲咱们但愿功能类别优先于样式特征，即一个按钮播放器按钮命名为 playBtn 而不是 circleIcon。 其余的规则做为辅助决策，在整个树中左右走向。

基于节点样式、内容、层级、特征、权重、布局、全局计数对组件节点作了多方位多种类型的鉴别。同时借助阿里内部 sqi 平台和 D2C 自身的智能化能力，实现对一些经验规则解决不了的节点类名的鉴别。

(D2C 样式命名选型)

策略定型

在建设完成阿里内部业务专属的类名专家系统后，结合智能化算法，咱们升级了策略判别的流程，并整合出了下面这个最终的策略树。从根节点出发，大部分节点均可以经过此策略树概括到一个具体语义结果上。

(D2C 样式策略树)

类名识别服务

核心实现

在实现上述样式命名策略树的过程当中，咱们产出了一个专用于推测 imgcook 模块布局类名的服务：

(语义化 Semantic Service 结构图)

semantic-core 提供总体的节点树遍历流程控制，分为前置和后置两个处理过程。
预处理过程会向组件节点追加检索索引，同时会检索组件树中符合条件、须要调用 iconFont  识别服务的图片统一聚合发送请求。后置处理中会对各个语义项处理的结果标记进行排序、应用前缀类名、执行组件索引清理等。

semnatic-text 、 semantic-pic 、 semantic-view 、 semantic-layout  是 imgcook 内置的语义算法。分别分析 文字、图片、容器 和 布局相关的信息。

每一个语义项执行过程以下：

• 判断是否命中语义策略，未命中则结束此语义执行（语义策略下面会有详解）
• 判断是否会影响父元素，是则检索父元素，追加当前语义项的标记
• 判断是否会影响兄弟元素，是则检索兄弟元素，追加当前语义项的标记
• 判断当前命中的语义策略置信度是否可靠，是则为当前节点追加数据推荐标记
• 最终，一个节点会获得不少不一样置信度的语义项标记结果。经过统一筛选，获得此节点最后生效的类名

(语义项执行流程)

细节实现

在向各个策略叶子节点的推导过程当中，咱们会使用最适合的能力实现需求，好比为了解决“鉴别小图标”这个语义判别过程当中咱们部署了 IconFont 服务来实现，具体流程以下：

1. 从iconfont网站上获取iconfont的图标文件，并转成png格式，以下图
2. 使用一个自编码器把图片编码到特征空间
3. 使用t-SNE映射到二维平面上看看效果
4. 在特征空间上使用聚类算法将相似的icon聚到一块儿
5. 手工剔除质量较差的版本，而后将一个类簇中的命名根据已有名称进行选举

(IconFont 识别服务执行流程)

iconFont 服务用于解决小图标命名问题，至今仍然在持续优化中。

展望将来

典型应用

imgcook 语义化能力自从方案上线以来已支持了一年多的线上业务。如下是2019年双11的模块仓库中找到的，可验收语义化成果的一个模块：

(语义识别结果)

从该模块的还原效果中可见，依次命中了 布局逻辑、图片分类、IconFont分类、翻译、店铺名、样式特征、价格判断等内置策略。大部分节点都有语义项命中，其中识别较为准确且贴近语义的节点占比 60%+。

衍生方向

语义化本质是推测节点特征的过程，在识别准确度没有要求时能够做为 class 名使用。对于识别准确度极高的预测结果，咱们认为节点和数据也有映射成功的可能性。

由于咱们但愿 D2C 能推测出节点绑定字段并实如今业务中落地，因此基于语义化的思路， D2C 孵化出了目的性更强、对准确度要求更高的节点数据字段推测服务。

感兴趣的同窗能够移步本系列的“字段绑定”文章继续深刻了解。

---

更多推荐：

• imgcook 官网  体验一键智能生成代码
• imgcook 知乎专栏  为你带来前端智能化前沿资讯
• imgcook 掘金专栏  设计稿智能生成代码
• 钉钉交流

---

招聘

咱们是频道与D2C智能团队，致力于探寻智能与前端的链接点，研发前端智能化。团队成员业务涉及机器学习、算法、规模化智能会场设计。

咱们的工做:

主要负责阿里巴巴前端委员会智能化方向核心技术设计落地、imgcook.com 平台建设及开放和开源，部分参与淘宝天猫的核心业务研发。

• 直接对接谷歌 tensorflow 团队，推进 tensorflow.js 在前端的应用。
• 利用 Faas 构建更适合前端的 Serverless 服务。
• 支撑天猫、聚划算、淘宝等大流量业务。

咱们须要你：

• 对主流前端技术栈有全面、升入的理解
• 对 W3C、TC39 等国际标准化组织在前端领域和浏览器领域的标准有全面的了解。
• 对本身的成长路径有清晰明确的职业生涯规划和技术提高目标。
• 英语据说写能力优秀者优先。

咱们的目标:

• 帮助前端迈进智能化时代。
• 借助人工智能和机器学习打造前端零研发解决方案。
• 用前端边缘计算理解用户定义下一代交互体验。

更多请查看：阿里巴巴招聘官网 JD

若是你不想错过人工智能这个时代风口，对 前端和 AI 结合 相关感兴趣，简历请投递： miaojing@taobao.com 或者 钉钉联系 妙净。