开发者社区> 温柔的养猫人> 正文

独家下载电子书 | 前端必看!阿里这样实现前端代码智能生成

简介: 《前端代码是怎样智能生成的》正式上线,带你揭秘阿里经济体前端委员会的四大技术方向之一,前端智能化方向如何解决前端+AI的火花--智能代码的生成。
+关注继续查看

《前端代码是怎样智能生成的》正式上线,带你揭秘阿里经济体前端委员会的四大技术方向之一,前端智能化方向如何解决前端+AI的火花--智能代码的生成。

独家下载
《前端代码是怎样智能生成的》

image.png


目录
image.png

背景分析

业界机器学习之势如火如荼,「AI 是未来的共识」频频出现在各大媒体上。李开复老师也在《AI·未来》指出,将近 50% 的人类工作将在 15 年内被人工智能所取代,尤其是简单的、重复性的工作。并且,白领比蓝领的工作更容易被取代;因为蓝领的工作可能还需要机器人和软硬件相关技术都突破才能被取代,而白领工作一般只需要软件技术突破就可以被取代。那我们前端这个“白领”工作会不会被取代,什么时候能被取代多少?

回看 2010 年,软件几乎吞噬了所有行业,带来近几年软件行业的繁荣;而到了 2019 年,软件开发行业本身却又在被 AI 所吞噬。你看:DBA 领域出现了 Question-to-SQL,针对某个领域只要问问题就可以生成 SQL 语句;基于机器学习的源码分析工具 TabNine 可以辅助代码生成;设计师行业也出了 P5 Banner 智能设计师“鹿班”,测试领域的智能化结合也精彩纷呈。那前端领域呢?

这本书告诉你前端与AI究竟能开出怎样的火花。

技术方案

我们对现有的 D2C 智能化技术体系做了能力概述分层,主要分为以下三部分:
• 识别能力:即对设计稿的识别能力。智能从设计稿分析出包含的图层、基础组件、业务组件、布局、语义化、数据字段、业务逻辑等多维度的信息。如果智能识别不准,就可视化人工干预补充纠正,一方面是为了可视化低成本干预生成高可用代码,另一方面这些干预后的数据就是标注样本,反哺提升智能识别的准确率。
• 表达能力:主要做数据输出以及对工程部分接入
• 通过 DSL 适配将标准的结构化描述做 Schema2Code
• 通过 IDE 插件能力做工程接入
• 算法工程:为了更好的支撑 D2C 需要的智能化能力,将高频能力服务化,主要包含数据生成处理、模型服务部分
• 样本生成:主要处理各渠道来源样本数据并生成样本
• 模型服务:主要提供模型 API 封装服务以及数据回流

在整个方案里,我们用同一套 数据协议规范(D2C Schema)来连接各层的能力,确保其中的识别能够映射到具体对应的字段上,在表达阶段也能正确地通过出码引擎等方案生成代码。

看阿里经济体前端委员会实现设计稿自动生成代码,他们又遇到了哪些技术难点?

业务落地

在今年的双十一场景中,我们的 D2C 覆盖了天猫淘宝会场的新增模块,包括主会场、行业会场、营销玩法会场、榜单会场等,包含了视图代码和部分逻辑代码的自动生成,在可统计范围内,D2C 代码生成占据了 79.34%。目前代码的人工改动的主要原因有:全新业务逻辑、动画、字段绑定猜测错误(字段标准化情况不佳)、循环猜测错误、样式自适应修改等,这些问题也都是接下来需要逐步完善的。

愿景

未来我们希望能通过前端智能化 D2C 项目,让前端智能化技术方案普惠化,沉淀更具竞争力的样本和模型,提供准确度更高、可用度更高的代码智能生成服务;切实提高前端研发效率,减少简单的重复性工作,不加班少加班,一起专注更有挑战性的工作内容!

点击此处下载电子书

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C语言下泊松分布以及指数分布随机数生成器实现
最近实验室的项目需要实现模拟文件访问序列,要求单位时间内的数据请求次数符合泊松分布,而两次请求见的时间间隔符合指数分布。没办法只好重新捡起已经丢掉多时的概率知识。于是也就有了这篇关于在C语言下符合泊松分布和指数分布的随机数生成器的实现。 泊松分布 在实际的事例中,当某一事件,比如进站乘客数量,电话交换机接收到的通话请求以固定的瞬时速率λ独立且随机地出现时,就可以认为该事件在单位时间内发
2706 0
DL之RNN:人工智能为你写代码——基于TF利用RNN算法实现生成编程语言代码(C++语言)、训练&测试过程全记录
DL之RNN:人工智能为你写代码——基于TF利用RNN算法实现生成编程语言代码(C++语言)、训练&测试过程全记录
60 0
Web前端,让你代码整洁的原则
写Web页面就像我们建设房子一样,地基牢固,房子才不会倒。同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗?我们一起来看一张图片:   上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢?一看就是糟糕的代码的代码,让人讨厌的代码。
983 0
DL之RNN:人工智能为你写代码——基于TF利用RNN算法实现生成编程语言代码(C++语言)、训练&测试过程全记录(二)
DL之RNN:人工智能为你写代码——基于TF利用RNN算法实现生成编程语言代码(C++语言)、训练&测试过程全记录
52 0
从P4到P9, 在马云家写代码到双11前端PM
阿里妹导读:今年的双11已经是阿里资深前端技术专家舒文来阿里的第11年,从应届生到双11前端PM,他一路升级打怪,实现了岗位上从P4到P9的晋升。这第11届双11顺利结束之际,他把在阿里这些年的成长经历做一个总结和分享,希望你能在他的故事中得到些许启发。
21035 0
1170
文章
2
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新