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


概述

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

语义化是什么?

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

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

先说 html 标签语义,在 HTML 5 出现之前,我们只能用没有语义的 div 来表示页面章节。现在,通过使用 HTML5 语义元素标签,如 bodyarticlenavasidesectionheaderfooterhgroup等,我们可以通过读取 html 结构就了解页面的布局结构。在 react-nativerax 等跨端 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-listu-btn-hover等。

AliceUi

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

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

从实际场景推导

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

前端样式词频分析

图中样式命名有如下特点:

  • BEMNEC 等规范的风格不同,实际开发场景中的命名相对简洁
  • 准确表达语义,且和节点业务特征强关联
  • 单词为主,复合词采用驼峰命名,长度通常不超过 3
  • 辅助性的修饰词如: wrapctnemptydesc 等高频出现
  • 可使用通俗易懂的简写单词

制定命名原则

D2C 希望优先解决淘系移动业务的问题,总体上以实际场景为主,业界规范为辅,最终确定了以表意为主要原则的样式命名策略:

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

类名”策略树“

命名原则确定后,我们相当于定义了一个树的最终叶子节点形态,接下来需要构建从枝干一点点按图索骥到这些最终节点的过程,最终构建出我们的类名策略树。

判别维度

在实际对节点类名命名的过程中,我们要考虑的规则往往是多个维度的:

样式判别维度

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

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

D2C 样式命名选型

策略定型

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

D2C 样式策略树

类名识别服务

核心实现

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

语义化 Semantic Service 结构图

semantic-core 提供整体的节点树遍历流程控制,分为前置和后置两个处理过程。

预处理过程会向组件节点追加检索索引,同时会检索组件树中符合条件、需要调用 iconFont 识别服务的图片统一聚合发送请求。后置处理中会对各个语义项处理的结果标记进行排序、应用前缀类名、执行组件索引清理等。

semnatic-textsemantic-picsemantic-viewsemantic-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 掘金专栏 设计稿智能生成代码
  • 钉钉交流

专家系统代码实现_前端代码是怎样智能生成的 - 语义化篇相关推荐

  1. 前端实现照片选取范围上传_前端代码是怎样智能生成的?看看大佬怎么说

    作者|莱斯 出品|阿里巴巴新零售淘系技术部 导读: 作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.3 ...

  2. opencv自然背景下交通标志形状分类c++代码_前端革命时刻:前端代码是怎样智能生成的-图像分离篇

    作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在此期间研 ...

  3. 第六届360前端星计划_前端代码的自我修养

    主讲人:孙磊 一.如何衡量代码质量的好坏 衡量代码质量的唯一有效标准:WTF/min -- Robert C. Martin 代码的自我修养 代码规范 格式 流程化 二.代码规范 yarn globa ...

  4. 前端学习(10):HTML语义化

    我理解的HTML语义化 经过查看别人博文中的一些描述,我将HTML的语义化总结为: 用最恰当的标签来标记内容. 该如何理解呢?比如需要加入一个标题,这个标题的字体比正文的要大写,还要加粗.能够实现这种 ...

  5. vue 判断同一数组内的值是否一直_前端代码+后端API,值得一学的Vue高仿音乐播放器实战项目

    项目名称:vue-fds_music 项目作者:符道胜 开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...

  6. 后端实体类接收数组_前端代码+后端API,值得一学的Vue高仿音乐播放器实战项目...

    项目名称:vue-fds_music 项目作者:符道胜 开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...

  7. eslint 配置_前端代码规范配置 (一)

    ESLint ESLint 是一个开源的 Javascript 代码检测工具,通过将 js 代码解析成抽象语法树(AST),分析并给与代码质量(如一些方法的使用方式不对)和代码风格(缩进,引号等等)两 ...

  8. c++数据结构代码整理_抄代码对自己编程提高有用嘛

    仅作学术分享,不代表本公众号立场,侵权联系删除 知乎链接:https://www.zhihu.com/question/387940895编辑:深度学习与计算机视觉 自己刚接触数据结构,完成大作业感觉 ...

  9. python如何执行代码漏洞_任意代码执行漏洞

    背景介绍 当应用在调用一些能将字符串转化成代码的函数(如php中的eval)时,没有考虑到用户是否能控制这个字符串,将造成代码注入漏洞.狭义的代码注入通常指将可执行代码注入到当前页面中,如php的ev ...

最新文章

  1. Spark ListenerBus 和 MetricsSystem 体系分析
  2. jupyter !wget 等系统命令使用技巧
  3. NB驱动层MQTT发布和订阅数据的代码实现
  4. hdu 4268 Alice and Bob(STL版)
  5. java mvc 批量插入_请教mysql spring mvc +mybatis中批量插入的问题?
  6. (双指针、二分Binary Search) leetcode 658. Find K closest Elements
  7. jquery 操作css 选择器
  8. ubuntu 安装ssh服务
  9. UIView的autoresizingMask属性
  10. HDoj-1863-畅通project-并查集
  11. elastic 索引库_使用Elastic Job Agents自动执行Azure SQL数据库索引维护
  12. 变压器绕组降低邻近效应_高功率UPS性能提升,规格/重量显著降低
  13. HikariCP 的Java数据库连接池介绍及配置
  14. 易宝php测试账号和密匙,易宝php支付
  15. SPSS数据转换插件v2.0
  16. 第十五章 项目收尾与验收
  17. [BZOJ2938] 病毒
  18. Pycharm Traceback (most recent call last):
  19. Excel常用技巧—数字和文本转换,三种方法任你选!!
  20. 初二计算机听课笔记,初二物理上听课记录20篇

热门文章

  1. 大规模细粒度分类和特定领域的迁移学习
  2. leetcode944
  3. Linux运维 第三阶段 (五) DNS(主从,rndc远程控制,子域授权,视图,压力测试)
  4. 入职五年回顾(十五) 2013年10月
  5. 2017 年全球十大突破技术:逼格很高很难懂
  6. deferred对象
  7. Access访问错误集锦:Access关键字
  8. Linux内核邮件列表发送和回复格式研究
  9. Drupal 7.31SQL注入getshell漏洞利用详解及EXP
  10. 让网站和APP更具动感的几点建议