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

简介: 《前端代码是怎样智能生成的》正式上线,带你揭秘阿里经济体前端委员会的四大技术方向之一,前端智能化方向如何解决前端+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 项目,让前端智能化技术方案普惠化,沉淀更具竞争力的样本和模型,提供准确度更高、可用度更高的代码智能生成服务;切实提高前端研发效率,减少简单的重复性工作,不加班少加班,一起专注更有挑战性的工作内容!

点击此处下载电子书

相关文章
|
7天前
|
前端开发
高可用前端布局代码学习,又快又好看
高可用前端布局代码学习,又快又好看
13 1
|
21天前
|
前端开发 安全 程序员
【程序员交友】祈澈姑娘:假装文艺与代码齐飞的前端妹子
【程序员交友】祈澈姑娘:假装文艺与代码齐飞的前端妹子
19 0
|
21天前
|
前端开发 Java UED
通用分页【上】之前端代码
通用分页【上】之前端代码
9 0
|
26天前
|
前端开发 JavaScript Java
Docker打包前端vue代码推送镜像到远程仓库
Docker打包前端vue代码推送镜像到远程仓库 Docker打包前端vue代码推送镜像到远程仓库 业务场景:📝1.将前端代码www包解压后放在本地临时目录,然后创建一个dockerfile📜 2.登陆自己远程仓库📒3.构建镜像🔖4.给镜像打tag📖5.推送镜像到远程仓库🖊️最后总结 业务场景: 需要将本地前端代码推送到远程镜像仓库 📝1.将前端代码www包解压后放在本地临时目录,然后创建一个dockerfile
33 1
|
26天前
|
监控 前端开发 JavaScript
使用JavaScript实现实时报警功能的办公电脑上网监控软件:前端代码
在今天的数字化时代,监控软件已成为许多组织和企业必不可少的一部分,用于保护数据和确保系统的正常运行。本文将介绍如何使用JavaScript编写前端监控软件,包括实时报警功能的实现。我们将探讨一些关键的代码示例,以展示如何构建这样的系统。最后,我们还会讨论如何自动将监控到的数据提交到一个网站。
103 4
|
1月前
|
前端开发 芯片
【芯片前端】保持代码手感——一对多的握手拆分模块
【芯片前端】保持代码手感——一对多的握手拆分模块
|
1月前
|
前端开发 芯片
【芯片前端】保持代码手感——握手型同步fifo的进一步拓展
【芯片前端】保持代码手感——握手型同步fifo的进一步拓展
|
1月前
|
前端开发 芯片
【芯片前端】保持代码手感——握手型同步FIFO设计
【芯片前端】保持代码手感——握手型同步FIFO设计
|
1月前
|
前端开发 芯片
【芯片前端】保持代码手感——握手协议ready打拍时序优化
【芯片前端】保持代码手感——握手协议ready打拍时序优化
|
1月前
|
存储 前端开发 芯片
【芯片前端】保持代码手感——异步FIFO全解析
【芯片前端】保持代码手感——异步FIFO全解析
推荐文章
更多