作者 | D2 前端技术论坛
狼叔和卓风即将在第十五届 D2 前端技术论坛上(12月19日)做《前端智能化实践:P2C 从需求文档生成代码》主题分享。这个 Topic 是 D2 多样化专场中最具有争议的,也是所有评委最想听的。据说在预审阶段,10 位评委中有 9 位给这个分享投了票。在试讲阶段,也得到了现场评委的认可,表示这个主题非常前沿,具有一定的前瞻性。
那么,为什么这个 Topic 具有如此大的吸引力呢?小编以为有以下几点。
- 有 2 位嘉宾共同一起演讲,他们的分工是怎样的?
- P2C (PRD to Code)是什么?这个事儿好像业界第一次听说,真的有用吗?
- P2C 有什么可提前爆料的黑科技没?
- P2C 和之前的 Imgcook 主张的 D2C(Design to Code)有啥差别?同一个团队,这 2 个概念之间是颠覆还是继承关系?
- 狼叔之前一直活跃于 Node/Serverless 社区,现在转战智能化领域,是什么原因?有怎样的思考?
下面我们提前采访一下狼叔和卓风,先介绍一下这两位分享嘉宾。
(左:狼叔 右:卓风)
狼叔,Node.js 技术布道者,Node 全栈公众号运营者,曾就职于去哪儿、新浪、网秦,做过前端、后端、数据分析,是一名全栈技术的实践者。已出版《狼书(卷1) 更了不起的 Node.js》《狼书(卷2) Node.js Web 应用开发》。入职阿里的三年时间,主要是在优酷 PC/H5 端从 0 到 1 的落地 Node.js 全栈,使用 SSR 对 Web 页面进行优化和重构,建设 SSR 应用的容灾、发布、灰度等能力,是集团内第一大 QPS 的 SSR 应用。在支撑好业务的同时,与组内同学一起孵化出开源框架 egg-react-ssr。2020 年到淘宝技术部,开启前端智能化的旅程,目前负责 P2C,和卓风是搭档。
卓风,入职阿里的八年时间,主要是在淘宝负责天猫、聚划算大促及日常营销业务产品的落地,曾负责面向天猫、淘宝、聚划算等商家的搭建产品建设和淘系智能 UI 体系建设和业务落地,相关产品和体系已陆续在向集团落地。近 1 年投身到前端智能化领域,致力于 Service to Code 体系建设,推动服务端智能出码的落地,目前相关体系具备一定雏形,在团队内业务范围进行闭环试验。
专访内容
Q1:双嘉宾的分工
有 2 位嘉宾共同演讲,你们的分工是怎样的?
2 个人一起演讲是因为在 P2C 过程中,需要由多个部分组成,而这些组成部分分别由狼叔和卓风负责,二人以交互式的演进方式,一是希望降低理解成本,二是 D2 大会也希望能有一些新的创新形式。二位嘉宾都是爱说爱笑的,应该会大家呈现一场不一样感受的分享,非常值得期待。
Q2:P2C 的定位:需求即代码
P2C 是什么?这个事儿好像业界第一次听说,真的有用吗?
在前端智能化的探索过程中,甄子提出了 P2C,即 PRD to Code。站在整个研发链路上,集合现有优势,做到需求即代码的这个最终目标。通过我们近一年的探索,证实这套方案在频道业务上是可以落地的。
- 我们需要了解 PD 的痛点。
- PD 的目标是什么?
- PD 要做什么?是频道,页面,模块,会场,还是啥?
- PD 要将做的东西投放到哪里,典型的业务场景有哪些?
OKR 的核心目标分解和关键结果。围绕目标进行拆解,并及时反馈,所以 OKR 才被认为是一种高效的协作方式。那么 PD 围绕的业务目标是什么?PD 出的需求方案是否有传承或复用?PD 是否能够更简单的工作,降低沟通成本,省出时间,做更多商业模式上的创新?
这是一张核心的 P2C 大图。P2C 的最终目标是需求即代码,其中 2 个拆解目标分别如下。
- 1)让 PD 能够做 0 标注,找到标注过程中样本。
- 2)让开发做到 0 投入,在 AI 和逻辑点提高出码准确率。
这 2 个核心目标论证是可行的,P2C 背后设计的技术体系也非常庞大的,从业务能力接入到研发能力到商业化、 Pipcook 基建等分层上,其复杂度也是可想而知的。
这里面还有很大的探索空间。未来针对于流量场,是否有定式?能否成为商业 OS,也是非常值得期待的。里面有D2C、S2C、P2C、C2C 等这些概念,先不细讲,留在分享中。
Q3:爆料“以图搜图”黑科技
P2C 有什么可提前爆料的黑科技没?
这里先放一个以图搜图,一个极小但非常实用的功能。从图片或设计稿出码,大家见得多了,那么能不能通过相似性来快速生成呢?
P2C 站在 PD 的视角,已经解决了很多问题。我举个例子,以图搜图是 P2C 的一个工具功能。大家只要有图就能搜索到对应模块。搜到模块,就能找到对应的开发者,对应业务来说是很方便的。
这还只是工具。假设你去截任意活动的一张页面图片,假定你的模块库里有相似模块,通过以图搜图可以直接生成具体页面,是不是很酷?PD 如果想仿制,贴一个竞品页面地址就搞定了,它可以让前端打开无数想象。放这个目的是为了让大家能够有点体感,即使是很小的一个功能也能解决很多问题。
但是,挖掘 PD 脑子中的业务逻辑,做需求即代码,需求即生成,这才是更高级的做法,具体 P2C 方案会在第十五届 D2 前端技术论坛(12月19日)上做分享《前端智能化实践:P2C 从需求文档生成代码》。
Q4:P2C vs D2C,为什么做 P2C ?
P2C 和之前的 Imgcook 主张的 D2C(Design to Code)有啥差别?同一个团队,这 2 个概念之间是颠覆还是继承关系?
Imgcook 是目前业内最好的利用 D2C(Design to Code,即设计稿出码)能力智能出码的工具,它使用计算机视觉、深度学习等智能化手段,可以一键根据设计稿进行代码生成。
2019 年 Imgcook 借助核心的 D2C(Design to Code,即设计稿出码) 能力,将模块智能出码水平提升到 79%,而分析发现未能智能出码的部分均是从视觉稿中获取不到代码信息的,比如多态逻辑、交互逻辑、数据服务逻辑,需要借助分析 PD(产品经理) 的原始 PRD(产品需求文档)才能获取到这部分代码信息,于是提出了 P2C(PRD to Code) 概念,希望通过 PRD、视觉稿(Design)结合的方式,来进一步提升出码水平。本次分享通过详细讲解 P2C 的整个探索和产研过程,希望为大家在前端智能化领域的开拓创新起到一个参考。
今年双十一会场承接了 90.4% 的新模块代码智能生成,代码可用率达到 79.26%(对比去年升级设计稿智能检查能力,视觉稿无需人工辅助调整)。得益于 D2C 的研发提效,今年并没有出现往年借调资源投入会场开发的情况。相比传统模块开发模式,使用设计稿生成代码技术后编码效率(模块复杂度和研发耗时比值)提升 68%,固定人力单位时间模块需求吞吐量增加约 1.5 倍。
最新文档请查收:
使用 Imgcook 开发天马模块:https://www.imgcook.com/docs?slug=tianmAImgcook.private
使用 Imgcook 开发天马组件:https://www.imgcook.com/docs?slug=tianma-component.private
使用 Imgcook 生成无障碍属性:https://www.imgcook.com/docs?slug=accessible.private
使用 Imgcook 支持自定义组件:https://www.imgcook.com/docs?slug=comp-to-code
更多请查看官方文档:https://www.imgcook.com/tutorial
从研发效率上看,Imgcook 已经做得非常好了。它是提效,不是无开发。这点是需要注意的。AI 是要用机器替代人工,否则 AI 是做得不够的。
本身 D2C 解决的是设计师和开发者之间的提效。能够让 AI 通过设计稿生成代码,这是减少了开发者的工作量。但有很多业务逻辑其实是在 PD 脑子里的,如果想让需求快速交付,就需要站到整个研发链路上看,从需求到生成代码,能否缩短交付时间,甚至是需求即代码?
从纯前端的角度讲,单一角色确实很难解决这个问题。我们可以看到前端智能化是 AI 和前端的融合,在全链路的思考里,是融合多个职能角色的。在做 D2C 的时候,甄子团队整合了 AI 和前端,在做智能 UI 的时候,甄子团队整合了算法,在做设计系统的时候,甄子招了设计,在做 AI 基建时,甄子招了知名大佬 Yorkie。目前整个团队横跨多个角色,是最适合做这种创新型探索项目的。
Q5:狼叔因何“出圈”?
狼叔之前一直活跃于 Node/Serverless 社区,现在转战前端智能化领域,是什么原因?有怎样的思考?能行么?
在今天,Node/Serverless 已经不能不放到一起谈了。Node.js 在十一年的稳定增长后,已经变成了主流选择。所有云计算厂商都爱 Node.js,也就导致在 Serverless 大潮中,Node.js 依然是宠儿。我们能看到的是语言慢慢的被基建取代,已不再有往日的重要地位,并且 Serverless 端渲染等新生物,解决实际问题,但这部分其实已经划归了基础架构组来做。它能够拿到成绩,未来几年也会持续落地和增长。
对狼叔而言,开源 ykfe/egg-react-ssr 和 ykfe/ssr,已经完成了 Serverless 端渲染相关的探索,他需要更多的探索空间,这时候选择前端智能化也是必然的。AI 目前能够解决的问题确实是有限的,广义问题确实不适合 AI 来接,但针对特定场景,具备特征和 Pattern 的是可以替代人工的。从目前的实践来看,确实也是做到了的。
到前端智能化团队,狼叔最大的挑战有 2 个,1)掌握 AI 能做什么,2)站在产研链路上去看待 P2C。这其实是很有挑战的,之前做的事儿无非是提效,搞来搞去还是前端的某一个领域,做深或做广。今天要跨角色去思考提效,这个事儿对格局要求明显是很高的,这其实才是最吸引狼叔的点。
狼叔表示,虽然一把年纪,但还是能够坚持学习,在一个多样化的团队里,跟不同职位的小伙伴们一起成长,一起创造、探索,是非常快乐的事儿。不确定一定能够颠覆什么,但折腾的过程一定是值得享受的,对每个人的成长都是极为有利的。预告一下,《狼书(卷3):Node.js 高级技术》预计年前可以出版,今年5 月份已交付,已经在走出版流程。
专访小结
关于前端智能化,狼叔曾说过:”面对未知我们太弱了,是思维方式的束缚,是事推事的磨砺,是无比强大的内心。能看出趋势很难,能找对方法很难,能带着一群人去疯狂更难。方向对了,还怕路远吗?“
最后,狼说和卓风说要致敬前端智能化的领路人,前端世界摸爬滚打 20 年,最早的腾讯 3-3,创过业当过CEO/CTO,到今天成为行业(前端智能化)领导者和开拓者。他就是了不起的甄焱鲲(花名:甄子)。
欢迎大家来观看第十五届D2前端技术论坛,来听狼叔和卓风的分享,一起来领略前端智能化的无限可能。
关注「Alibaba F2E」
把握阿里巴巴前端新动向