双 11 大促会场开发提效解析:前端智能化落地实践
我们做什么业务
双 11 大促刚落下帷幕,相信大家也剁手了不少东西。近年来各种大促活动纷繁层出,这些活动的背后,就有我们的身影。我们做大促业务已经第 7 个年头了,每年都会承接大量的会场建设需求。
![](https://static001.geekbang.org/infoq/9e/9e9c6e7ca993a32eb6e0699fb465572a.png)
现状思考
会场开发需求不断增长,研发的手段也不断精进。从最初的全人工开发,到通过低代码平台(京东内部代号通天塔,下称“通天塔”)搭建,在通天塔的协助下,会场的开发效率有了大幅的提高。但是通天塔重点处理形态比较固定的楼层,目前还不能大规模搭建个性化模块。随着个性化模块数量的增长,亟需一种新的手段解决开发效率的瓶颈问题。
我们了解到 Deco 智能代码可以实现从设计稿快速生成代码,很适合个性化模块搭建的场景。在 618 大促中尝试用 Deco 搭建部分个性化会场,获得过不错的效果,所以在本次双 11 大促中大规模应用 Deco 做个性化会场模块开发。
![](https://static001.geekbang.org/infoq/bc/bc9f2e6ed9d4fea8f35e7767489fb32c.png)
(双 11 部分会场设计稿示例)
怎么用?
事前,我们担心会不会有使用门槛,比如对设计稿有特殊的要求(还得找设计师改),事实上完全多虑了,找设计师拿设计稿后直接将楼层的画板通过插件上传到 Deco 即可。
![](https://static001.geekbang.org/infoq/f7/f7655bb1c6d370d29d3f2f4a9273acb2.png)
跳转到 Deco 的详情页面,即可查看到整个楼层的结构样式代码。布局结构和样式基本复合手写的习惯,特别是弹性布局,基本和手写无异了。对一些瑕疵点稍作调整,就可以运行起来查看楼层的效果了。
![](https://static001.geekbang.org/infoq/ae/ae51e45c09c148c46d0b859806065764.png)
引用组件库
一般我们开发页面时,都会手动引入组件库,然后在页面中引用组件,从而构成页面。
而在 Deco 上,使用组件的方式会有所调整。首先需要将组件库设置到 Deco 中,然后选中某个设计稿区域,点选对应的组件,就可以替换成组件了,不用额外写引用和样式。如果没有映射组件,默认转化出来的是基础的标签(div/text/image)。
![](https://static001.geekbang.org/infoq/63/63a8aa64f0ef452691de05945a72bc93.gif)
(使用演示)
如果需要进一步提效,就需要借助 Deco 的 AI 能力。通过训练组件库,就可以实现组件的自动识别和替换。
虽然训练组件库需要额外的工作量,但是一旦完成训练后,处理大量的会场时就可以一劳永逸了,不用逐个 import 组件和设置组件的样式,直接就可以导出替换了组件的页面了。
![](https://static001.geekbang.org/infoq/10/1087131261e14519d36ac17bcf41c75e.gif)
(使用演示)
开发数据逻辑
在 Deco 上可以看到很多前端的概念,props、state、生命周期、全局变量等等,基本在代码编辑器上的操作都可以在 Deco 里面实现。既然有了这些功能,那就动动手写写代码吧。
【异步请求】
每个会场里面都有大量的数据请求,人工开发时,我们使用了很多封装的请求方法,针对不同的请求场景使用不同的请求方法,但是请求的模式相对比较固定,各种请求都有点繁复。
在 Deco 里面我们可以接入已经封装的方法,按照以往的方式继续码代码。此外 Deco 给了我们一点惊喜。它支持多种形式的请求,只需点选完几个参数,就可以帮我生成请求的代码,无论是复合请求还是普通的自定义请求,都可以快速生成代码。
![](https://static001.geekbang.org/infoq/e1/e1e8d52a85587ec29ac3692bb0fbe372.gif)
(使用演示)
【代码提示】
另外,在对组件属性数据绑定还有在编辑器写代码时,提供了智能的代码提示功能。
Deco 的代码提示除了编辑器的代码提示以外,还可以动态展示选中节点的作用域,并将变量的数据结构和真实值展示出来,简单点选一下就可以从作用域内选择数据。对比下来,编码变得很便利,也不担心搞错数据字段了。
![](https://static001.geekbang.org/infoq/a7/a74180d07e3503f837acc80d1fd61338.gif)
(使用演示)
【数据上报】
最后,Deco 整合了数据上报功能,可以直接设置点击埋点和曝光埋点等,简单配置一下,数据上报也大功告成。
![](https://static001.geekbang.org/infoq/3b/3b29f976d8ef6c61fc936d7e2044eb4e.png)
源码!源码!
通过 Deco 完成了大部分的开发,最后就获取源码做验证测试。
Deco 提供很多方便的定制化方案,我们在 Deco 上定制了一套代码模板,可以直接输出合适的项目代码,不用做过多的二次适配工作。
另外,Deco 还支持直接生成低代码组件共建平台(京东内部代号通天塔 ihub)组件,无缝对接通天塔。每次在 Deco 上做完设计稿开发,直接输出代码合并到项目中运行验证。
![](https://static001.geekbang.org/infoq/58/589d5bf8a9cff0c825e435f1e2375143.gif)
(使用演示)
沉淀组件
每次业务完成后都需要将新的需求沉淀下来丰富到组件库中,我们则将标准的组件样式上传到 Deco 后,定义组件的内部逻辑,就可以输出一个标准化的组件,在 Deco 上就可以完成开发闭环。
![](https://static001.geekbang.org/infoq/f1/f190321caf925a1e8e6d9a1eebd084df.png)
不足之处
虽然 Deco 很便利,但在使用过程也发现一些不足之处。每次完成编辑后,都需要将代码下载到本地,安装环境,手动编译项目才可以获得组件。由于开发的组件比较多,每次都要重复这些步骤挺繁琐的,希望可以在后续的版本中能得到优化。
实践总结
在本次双 11 大促中,通过 Deco 搭建的数十个楼层成功上线。对 Deco 的使用,也从陌生,到熟悉,摸索出一套适合我们的接入模式。对不同的业务流程调整不同的策略,效率提升达到 48%,相信随着业务合作的深入,可以带来更大的赋能。
![](https://static001.geekbang.org/infoq/4d/4dd77eb30d9889ff677043874f3f8a1d.png)
评论