京东 11.11 大促会场开发提效解析:前端智能化落地实践

我们做什么业务

双 11 大促刚落下帷幕,相信大家也剁手了不少东西。近年来各种大促活动纷繁层出,这些活动的背后,就有我们的身影。我们做大促业务已经第7个年头了,每年都会承接大量的会场建设需求。

图片

现状思考

会场开发需求不断增长,研发的手段也不断精进。从最初的全人工开发,到通过低代码平台(京东内部代号通天塔,下称“通天塔”)搭建,在通天塔的协助下,会场的开发效率有了大幅的提高。但是通天塔重点处理形态比较固定的楼层,目前还不能大规模搭建个性化模块。随着个性化模块数量的增长,亟需一种新的手段解决开发效率的瓶颈问题。

我们了解到 Deco 智能代码可以实现从设计稿快速生成代码,很适合个性化模块搭建的场景。在 618 大促中尝试用 Deco 搭建部分个性化会场,获得过不错的效果,所以在本次双 11 大促中大规模应用 Deco 做个性化会场模块开发。

图片 (双 11 部分会场设计稿示例)

怎么用?

事前,我们担心会不会有使用门槛,比如对设计稿有特殊的要求(还得找设计师改),事实上完全多虑了,找设计师拿设计稿后直接将楼层的画板通过插件上传到 Deco 即可。 图片 (使用演示)

跳转到 Deco 的详情页面,即可查看到整个楼层的结构样式代码。布局结构和样式基本复合手写的习惯,特别是弹性布局,基本和手写无异了。对一些瑕疵点稍作调整,就可以运行起来查看楼层的效果了。 图片

引用组件库

一般我们开发页面时,都会手动引入组件库,然后在页面中引用组件,从而构成页面。

import { xxImage, xxText } from '@xxxUI'
<View className='head' onClick={btnClick}>
  <xxImage src={url} mode='heightFix' size={300} />
  <xxText className='taro-text' >{name}</xxText>
</View>
复制代码

而在 Deco 上,使用组件的方式会有所调整。首先需要将组件库设置到 Deco 中,然后选中某个设计稿区域,点选对应的组件,就可以替换成组件了,不用额外写引用和样式。如果没有映射组件,默认转化出来的是基础的标签(div/text/image)。

图片 (使用演示)

如果需要进一步提效,就需要借助 Deco 的 AI 能力。通过训练组件库,就可以实现组件的自动识别和替换。

虽然训练组件库需要额外的工作量,但是一旦完成训练后,处理大量的会场时就可以一劳永逸了,不用逐个 import 组件和设置组件的样式,直接就可以导出替换了组件的页面了。

图片 (使用演示)

开发数据逻辑

在 Deco 上可以看到很多前端的概念,props、state、生命周期、全局变量等等,基本在代码编辑器上的操作都可以在 Deco 里面实现。既然有了这些功能,那就动动手写写代码吧。

【异步请求】

每个会场里面都有大量的数据请求,人工开发时,我们使用了很多封装的请求方法,针对不同的请求场景使用不同的请求方法,但是请求的模式相对比较固定,各种请求都有点繁复。

fetch(url)
  .then(...)
  .catch(...)
复制代码

在 Deco 里面我们可以接入已经封装的方法,按照以往的方式继续码代码。此外 Deco 给了我们一点惊喜。它支持多种形式的请求,只需点选完几个参数,就可以帮我生成请求的代码,无论是复合请求还是普通的自定义请求,都可以快速生成代码。

图片 (使用演示)

【代码提示】

另外,在对组件属性数据绑定还有在编辑器写代码时,提供了智能的代码提示功能。

Deco 的代码提示除了编辑器的代码提示以外,还可以动态展示选中节点的作用域,并将变量的数据结构和真实值展示出来,简单点选一下就可以从作用域内选择数据。对比下来,编码变得很便利,也不担心搞错数据字段了。

图片 (使用演示)

【数据上报】

最后,Deco 整合了数据上报功能,可以直接设置点击埋点和曝光埋点等,简单配置一下,数据上报也大功告成。 图片

源码!源码!

通过 Deco 完成了大部分的开发,最后就获取源码做验证测试。

Deco 提供很多方便的定制化方案,我们在 Deco 上定制了一套代码模板,可以直接输出合适的项目代码,不用做过多的二次适配工作。

另外,Deco 还支持直接生成低代码组件共建平台(京东内部代号通天塔 ihub)组件,无缝对接通天塔。每次在 Deco 上做完设计稿开发,直接输出代码合并到项目中运行验证。

图片 (使用演示)

沉淀组件

每次业务完成后都需要将新的需求沉淀下来丰富到组件库中,我们则将标准的组件样式上传到 Deco 后,定义组件的内部逻辑,就可以输出一个标准化的组件,在 Deco 上就可以完成开发闭环。 图片

不足之处

虽然 Deco 很便利,但在使用过程也发现一些不足之处。每次完成编辑后,都需要将代码下载到本地,安装环境,手动编译项目才可以获得组件。由于开发的组件比较多,每次都要重复这些步骤挺繁琐的,希望可以在后续的版本中能得到优化。

实践总结

在本次双 11 大促中,通过 Deco 搭建的数十个楼层成功上线。对 Deco 的使用,也从陌生,到熟悉,摸索出一套适合我们的接入模式。对不同的业务流程调整不同的策略,效率提升达到48%,相信随着业务合作的深入,可以带来更大的赋能。 图片

猜你喜欢

转载自juejin.im/post/7039885892353261575
今日推荐