京东门详一码多端探索与实践 | 京东云技术团队

本文主要讲述京东门详业务在支撑过程中遇到的困境,面对问题我们在效率提升、质量保障等方向的探索和实践,在此将实践过程中问题解决的思路和方案与大家一起分享,也希望能给大家带来一些新的启发

一、背景

1.1、京东门详介绍

1.1.1、京东门详业务

门店详情页简称门详,门详业务包含门店详情、列表、凑单、搜索、到店等页面,最早于2020年在京东主站APP上线,最初是作为京东到家线下优质商家以线下店模式入驻京东主站,用户可以在门详内一站式完成门店信息查看、商品浏览、配送时效确认、领券、加车、下单等完整购物流程。后续随着业务的发展,门详陆续承接了天选、小时购、药急送、前置仓等更多的业务模式场景,逐渐形成了以即时零售为特性,覆盖到家、到店场景,承接线上线下的通用综合型业务系统

1.1.2、门详业务形态

门详业务涉及到家门详(小时购、药急送)、到店门详(POP、万家);技术栈涉及京东小程序[2]、微信小程序[3]、H5、RN;页面涉及门店首页、凑单、搜索、评价、资质、列表等20+

1.2、门详业务支持过程中面临的痛点

  • 京东app和微信小程序两端门详功能差异较大
  • 因历史原因面临同时维护京东app和京购小程序两套门详业务需求
  • 业务规划需求量巨大,双端需求迭代频繁,研发资源紧张无法短时间消化
  • 双端业务场景及不同的技术栈对质量保障带来较大挑战

1.3、京购小程序业务方对门详的诉求

  • 期望将京购小程序门详功能对齐京东app
  • 新需求迭代希望快速同步到微信域
  • 期望研发需求吞吐量增加,可以快速消化更多的需求

二、技术方案

2.1、前期方案调研

前期技术方案调研方面,我们也了解了当前流行的各种多端框架像RN、Flutter、Taro、uni-app等,并从多端支持度、开发生态、前端框架支持情况、学习成本等各方面进行了调研对比;由于要支持京东APP及微信小程序,所以优先考虑支持小程序的多端框架像Taro3[1]、uni-app[10]、mpvue[11]、chameleon[12]、WePY[13]等;结合对前端框架兼容情况、京东小程序[2]的支持度及团队自身情况(团队对React比较熟悉)等因素,综合考虑最终决定采用Taro框架来进行多端化重构。

2.2、技术方案制定及实践

2.2.1、思考需要解决的问题

  • 如何更好的支持京东小程序、微信小程序、H5等多端需求?
  • 如何在改造过程中避免新需求重复开发?
  • 如何缩短研发交付周期?
  • 如何才能在开发过程中提高效率?
  • 如何在快速迭代过程中保障研发质量?
  • 如何灵活支持更多的业务场景?
  • 如何保障页面性能?

2.2.2、制定解决方案

2.2.2.1、门详业务多端化解决方案

整个方案通过前端、服务端、平台共同构建一套完整的多端化、楼层化解决方案,服务端基于PaaS化架构将门详功能拆分为多个领域服务、领域模型及扩展点,前端基于iPaas楼层、组件标准制定门详多端化、楼层化方案,管理平台通过奥德修斯(小程序交易数字化平台)与黄流数字化平台、iHub平台能力打通,进行业务、页面、楼层、组件、数据等管理及上线发布,以下是整体解决方案全景图

2.2.2.2、门详前端技术框架

前端基于Taro3[1] + React[8] + Recoil[7]为技术底座,将门详业务按照基础功能和基础组件原则拆分出网络、地址、埋点、优惠券、商卡、购物车等等50+功能点,页面标准在iPaas页面协议上增加了门详渲染引擎部分,通过iHub平台管理楼层及代码,最终由页面容器进行渲染,以下基于门详面临的痛点在门详多端化过程中的架构图及我们在实施过程中的一些方案

2.2.3、技术方案实施过程

1)业务功能归类及楼层和组件拆分

门详首页按照结构拆分成页头、列表、页尾、弹层等部分,按照楼层拆分成页面头部、门店信息、会员楼层、优惠促销、商品列表、结算条、购物车等12+楼层组件

2)多端适配过程中的差异处理

虽然多端化框架已经帮我我们解决了跨平台开发场景,但不同平台之间由于底层原理及基础能力实现方式的差异,仍然存在一些需要按照特定平台进行适配处理的工作量,我们首先梳理门详中使用到的小程序平台40+底层能力,列举并对比多端平台上的功能差异,针对平台差异制定中间适配层将API统一规范化(eg:登录、地址、埋点、路由、系统信息等)

3)开发过程中的提效方式

  • 组件化:组件封装分两层,底层是最小单元的功能组件,上层是最小可复用业务组件原则封装,有效的减少了相同和相似代码的冗余,同时也会定期通过工具jscpd[4]进行代码审计进一步找出相似代码片段进行优化

  • 楼层化:组合相关业务组件提升能力最大复用度,例如:门店信息楼层、优惠促销楼层等等,并且楼层组件按照页面schema协议开发,支持部分能力可定制化

  • MVVM模式:利用react hook[6]方式将原有页面中的逻辑及数据处理提练到View Mode层,使逻辑和UI之间清晰分离易于维护,还可以显著提高代码重用机会

4)改造过程中新需求处理

旧门详采用的京东小程序原生语言开发,新门详采用Taro+React开发,在新门详未全量发布前新需求是需要双端支持的,这样也就意味着相同需求会开发两次,经过探索我们通过混合开发模式[9]将Taro组件打包成小程序可以直接引用的原生组件,解决了新旧工程重复开发问题

2.3、门详小程序性能优化

门详在公测阶段也暴露了一些性能问题,我们按照场景划分为两类:体验性能、启动性能,下面在这里和大家一起分享下相关案例及解决思路,希望能给有相似困境的小伙伴一些新的思路

2.3.1、体验性能优化

门详首页用户操作比较频繁的就是分类切换、列表滑动等功能,也是用户反馈卡顿较为多的部分,下面针对以上两类问题进行相关案例分析:

2.3.1.1、商品列表渲染性能优化

在门详多端化改造后,我们通过问卷调研方式收集用户体验反馈,发现部分用户反馈在滚动商品列表时存在卡顿的现象。我们利用Taro的debug环境日志进行分析,发现分页加载时setData体积不断增大,耗时不断增长

debug环境日志:

setData耗时走势曲线:

经排查后发现是列表分页渲染时数据量较大导致丢帧。为了解决大范围渲染及重复渲染问题,将原有的商品列表二维数组数据结构优化为链表+递归方式进行分层嵌套平铺渲染,数据上减少多层级计算、视图上将分页加载渲染控制在单页内,以下为优化后的列表效果:

列表效果:

setData耗时走势曲线:

优化前后分屏数据渲染耗时对比:

上图左侧为列表优化前效果,可以看到分页加载请求数据时的卡顿体感比较明显,尤其是随着数据量的增大,卡顿时间越来越长。右侧为优化后效果,在加载十几页之后依然保持高效的渲染性能。经过上述优化后每屏数据渲染耗时均维持在200ms左右,在分页数据加载较多的情况下渲染依然保持高效。

2.3.1.2、分类切换时列表渲染逻辑优化

在前置仓的业务支撑过程中,发现在某些特殊场景下切换分类时等待时间较长,用户体验较差。经分析发现在分类列表加载数据时前端处理逻辑是在商品不满一屏时自动加载下一页数据,补全商品列表让用户可以看到更多的商品数据,而在接口进行轮询请求时导致用户等待时间较长

上图左侧为优化前分类切换时商品加载的逻辑,为了减少用户等待时长对分类渲染逻辑进行优化(如图右侧),调整分类点击后的处理逻辑,只请求当前分类下数据,不再进行跨一级分类接口请求。分类渲染耗时从n(接口请求次数)*250(接口请求耗时)+200ms(前端渲染耗时)减少到250ms+200ms。

2.3.2、启动性能优化

我们针对门详小程序启动过程进行分析,整理启动的每个环节及对应的耗时数据,制定优化方案,优化主要方向如下:

  • 京东小程序包压缩(将jdapkg文件进行zip压缩,文件大小从8.6MB降低到3.4MB)
  • 门详小程序模版包复用(避免多个小程序冷启动下载多次)
  • 门详小程序模版包内置进APP(减少小程序包下载耗时)
  • APP启动时进行小程序模版包预加载(减少小程序冷启动耗时)
  • 小程序引擎加载耗时优化(前置预热小程序引擎)
  • 小程序引擎启动主线程卡顿优化(逻辑层与渲染层并行处理)
  • 小程序代码构建包.jdapkg优化(引擎公共代码抽离)
  • 小程序信息接口由同步改为异步(线上平均耗时减少158ms)
  • 小程序网络库超时时间及重试机制优化
  • 门详主接口耗时优化(非首屏必要数据异步化)
  • 门详业务代码包瘦身(代码优化、分包等,包大小从3.4MB降低到648KB)

使用公共模版包,多个商家共用一个代码包,减少重复下载

优化前门详小程序平均启动耗时2227.7ms,经以上优化措施实施后,整体启动耗时减少到954ms,启动速度提升57.6%,在门详小程序启动优化过程中我们也得到了京东小程序引擎团队的大力支持,也借此机会表示衷心的感谢!

2.4、ISV共建方案及质量保障探索

2.4.1、为什么要进行共建探索呢?

对于业务侧大量的需求涌入,且有一部分并非门详通用功能属于特殊场景的个性化需求,而在研发资源紧缺的情况我们也在思考如何才能提升需求的吞吐量,为了更好的支撑业务,在与业务深度交流后发现部分业务侧也有自己的研发团队,可以自主个性化需求开发,双方沟通后达成共识在保障系统稳定性的同时,我们在楼层化的基础上对系统进行改进支持黄流ISV平台接入,将部分独立楼层开放给业务侧自主接入,具体共建流程如下:

经过系统ISV方案改造探索后门详的个性化需求等待时长明显缩短,对比前两个季度个性化需求整体承接量增长30%以上,在需求大量增长的同时也是对系统和新架构的考验,为保证系统稳定性我们对共建需求的接入、开发、上线等进行了共建流程规范制定及相关性能、质量等约束

2.4.2、如何保障研发质量?

多团队多人协作过程中我们也发现了一些问题,为了避免一些常规问题在此我们制定了相关的开发规范,并在整个需求开发上线过程中增加一些必要的校验环节,具体细节如下:

  • 统一标准规范制定(目录结构规范、git 分支规范、代码编写规范、开发规范、文件规范、上线规范等)
  • 需求评审后开发前进行前后端技术方案评审
  • 利用工具(ESLint)进行代码规范扫描及语法规范检查
  • 上线前进行code review及影响范围预估
  • 上线中checklist(重要流程、核心功能、特殊场景)检查
  • 上线后灰度切量且观察监控、异常、客诉等系统
  • 兜底方案支持线上页面、功能等一键降级

三、技术沉淀与业务赋能

3.1、技术改造过程中的能力沉淀

  • 多端化楼层化开发框架,支持ISV方式接入共建
  • 规范页面可编排楼层化协议,支持部分能力可动态配置
  • 标准化楼层组件开发模版,减少组件开发配置过程
  • 基础功能库沉淀基础API 16个、基础组件25个、业务组件50+、打包插件3个
  • 自研多端调试工具(nuclear)、发表公众号文章2篇、已进入国家专利局审核阶段专利2篇
  • 构建工具cola-cli、cola-server
  • 小程序标准化门详赋能SDK

3.2、多端化带来的收益

  • 基础能力赋能新业务(前置仓门详、到店商详、POP门详等)开发效率提升40%以上
  • 京东app上的门详新需求95%+的功能是可以直接复用到微信小程序、H5端,在有限的研发资源下大幅提升了多端需求吞吐量
  • 经过4个月的多端化改造后补齐了京购小程序中门详业务滞后2年多的需求
  • 小程序赋能20+(eg:京购小程序、京东超市小程序、小时购等)

门详多端化楼层化过程中沉淀的开发框架、基础功能库、通用开发模版,也在到店门详、到店商详、pop门详等业务中得到了较好的实践

3.3、前置仓门详快速支撑

在京东app前置仓二期建设过程中小程序门详组件及功能复用率达到95%+,基于多端化框架能力在2天内完成将前置仓门详赋能到京购小程序,业务侧提出期望将前置仓门详能力可以引入到京东超市小程序(微信),基于前期门详多端化能力建设仅用2小时就完成了置仓门详能力赋能京东超市小程序(微信),也是在这个过程中我们将门详多端化和楼层化能力与奥德修斯平台鉴权、模型管理、数据管理、可视化、配置化等能力相结合,通过脚手架与平台结合方式为业务方提供一键构建一站式赋能服务,通过这种标准化的方式既支持了京东超市小程序需求同时也扩充了黄流SDK中的标准化门详能力,一键触发5分钟既可完成整个黄流SDK赋能包的构建

四、未来展望

随着门详业务涉及的场景日益增多,通用的楼层组件逐渐也无法满足所有差异化场景,然而全部楼层都放入公共模版包中无疑是对小程序包大小的考验,基于一码多端框架和我们自研的小程序发布系统思考,可以将门详批量小程序进行分类管理,构建时按类型按需构建,将一个公共模版包拆分成多个模版,可按照差异化方式分别构建发布

在京东前端技术域iPaas2.0搭建平台建设逐渐完善同时,门详业务得益于多端化、楼层化框架,也为门详小程序支持多端可视化搭建迈出了前进的一步,为更多业务场景提供标准化门详

参考资料

[1]Taro3:https://taro-docs.jd.com/docs/

[2]京东小程序:https://mp-docs.jd.com/doc/dev/framework/-1

[3]微信小程序:https://developers.weixin.qq.com/miniprogram/dev/framework/

[4]jscpd:https://github.com/kucherenko/jscpd

[5]状态管理库对比:https://cloud.tencent.com/developer/article/1685891

[6]React hook:https://react.docschina.org/learn#using-hooks

[7]Recoil:https://www.recoiljs.cn/docs/introduction/getting-started

[8]React:https://react.docschina.org/learn

[9]原生项目使用Taro:https://taro-docs.jd.com/docs/taro-in-miniapp

[10]uni-app:https://github.com/dcloudio/uni-app

[11]mpvue:https://github.com/Meituan-Dianping/mpvue

[12]chameleon:https://github.com/didi/chameleon

[13]WePY:https://github.com/Tencent/wepy

作者:京东零售 徐宏伟

来源:京东云开发者社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/98097.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】索引

本期我们好好唠唠索引 目录 一、索引的概念 二、索引的重要性 三、对于索引的理解 3.1 MySQL与磁盘交互的基本单位page 3.2 MySQL中的数据交互过程 3.3 索引建立的过程 3.3.1 page的存储形式 3.3.2 B树的形成 3.4 为什么不用其他数据结构来建立索引 四、聚簇索引和非…

Python tkinter Notebook标签添加关闭按钮元素,及左侧添加存储状态提示图标案例,类似Notepad++页面

效果图展示 粉色框是当前页面,橙色框是鼠标经过,红色框是按下按钮,灰色按钮是其他页面的效果; 存储标识可以用来识别页面是否存储:例如当前页面已经保存用蓝色,未保存用红色,其他页面已经保存用…

【力扣】42. 接雨水 <模拟、双指针、单调栈>

【力扣】42. 接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。 目录 【力扣】42. 接雨水题解暴力双指针单调栈 示例 1: 输入:height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&…

数据结构<树和二叉树>顺序表存储二叉树实现堆排

✨Blog:🥰不会敲代码的小张:)🥰 🉑推荐专栏:C语言🤪、Cpp😶‍🌫️、数据结构初阶💀 💽座右铭:“記住,每一天都是一個新的開始&#x1…

c语言实现MD5算法

MD5加密 文章目录 MD5加密MD5介绍应用场景代码分析 (基于qt5.14.2)测试记录 MD5介绍 1。 一种单向加密算法,即对明文加密,而不能通过密文得到明文。对原数据的任何改动,哪怕是1字节,得到的MD5值都有很大的区…

vue路由及打包部署

vue路由(前端路由):URL中的hash(#号)与组件之间的对应关系。 一、安装vue路由 npm install vue-router3.5.1 二、定义路由表 路由表主要记录hash(#号)与组件之间的对应关系。主要定义在route…

FPGA:uart原理+tx发送模块+rx接收模块

文章目录 一、串口通信二、UART通信三、tx发送模块四、rx模块接收 一、串口通信 处理器与外部设备通信的两种方式: 串行通信: 指数据的各个位使用多条数据线同时进行传输。 并行通信: 将数据分成一位一位的形式在一条数据线上逐个传输。 串…

SQL Injection

SQL Injection 就是通过把恶意的sql命令插入web表单递交给服务器,或者输入域名或页面请求的查询字符串递交到服务器,达到欺骗服务器,让服务器执行这些恶意的sql命令,从而让攻击者,可以绕过一些机制,达到直…

sql server安装报错 合成活动模板库(ATL) 失败

错误 “合成活动模板库(ATL) 规则失败“ 解决办法: 进入SQL Server 2008R2安装包目录找到文件:sqlsupport_msi,安装此文件之后,再安装SQL Server,便可解决该问题。C:\SQL Server 2008R2\new\SQL Server 2008R2\2052_CH…

Java虚拟机(JVM):虚拟机栈溢出

一、概念 Java虚拟机栈溢出(Java Virtual Machine Stack Overflow)是指在Java程序中,当线程调用的方法层级过深,导致栈空间溢出的情况。 Java虚拟机栈是每个线程私有的,用于存储方法的调用和局部变量的内存空间。每当…

如何学习专业的学术用语01

问题的提出——凭啥人家写的词汇这么专业 做法一 做法二:做一个专业数据库 专门做教育技术类的

Android Ble蓝牙App(六)请求MTU与显示设备信息

前言 在上一篇文章中已经了解了数据操作的方式,而数据交互的字节长度取决于我们手机与蓝牙设备的最大支持长度。 目录 Ble蓝牙App(一)扫描Ble蓝牙App(二)连接与发现服务Ble蓝牙App(三)特性和属…

unity 之 Vector 数据类型

文章目录 Vector 1Vector 2Vector 3Vector 4 Vector 1 在Unity中,Vector1 并不是一个常见的向量类型。 如果您需要表示标量(单个值)或者只需要一维的数据,通常会直接使用浮点数(float)或整数(in…

Linux命令200例:tail用来显示文件的末尾内容(常用)

🏆作者简介,黑夜开发者,全栈领域新星创作者✌。CSDN专家博主,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 &…

【ARM】Day4 点亮LED灯

1. 思维导图 2. 自己编写代码实现三盏灯点亮 .text .global _start _start: /**********LED1,LED2,LED3点灯:PE10,PF10,PE8**************/ RCC_INIT:使能GPIOE组/GPIOF组控制器,通过RXCC_MP_AHB4ENSETR设置第[5:4]位写1,地址:0x50000A28[5:4]1ldr r0,0x50000A28 …

【深入探究人工智能】:常见机器学习算法总结

文章目录 1、前言1.1 机器学习算法的两步骤1.2 机器学习算法分类 2、逻辑回归算法2.1 逻辑函数2.2 逻辑回归可以用于多类分类2.3 逻辑回归中的系数 3、线性回归算法3.1 线性回归的假设3.2 确定线性回归模型的拟合优度3.3线性回归中的异常值处理 4、支持向量机(SVM&a…

〔012〕Stable Diffusion 之 中文提示词自动翻译插件 篇

✨ 目录 🎈 翻译插件🎈 下载谷歌翻译🎈 谷歌翻译使用方法🎈 谷歌翻译使用效果🎈 翻译插件 在插件列表中搜索 Prompt Translator可以看到有2个插件选项:一个是基于谷歌翻译 〔推荐〕、一个基于百度和deepl翻译推荐使用谷歌翻译,因为是离线翻译,所以使用时不用在乎是…

Java之SpringCloud Alibaba【四】【微服务 Sentinel服务熔断】

Java之SpringCloud Alibaba【四】【微服务 Sentinel服务熔断】 一、分布式系统遇到的问题1、服务挂掉的一些原因 二、解决方案三、Sentinel:分布式系统的流量防卫兵1、Sentinel是什么2、Sentinel和Hystrix对比3、Sentinel快速开发4、通过注解的方式来控流5、启动Sen…

vue3 基础知识

vue3创建一个项目 PS D:\code> npm init vuelatestVue.js - The Progressive JavaScript Framework√ Add TypeScript? ... No / Yes √ Add JSX Support? ... No / Yes √ Add Vue Router for Single Page Application development? ... No / Yes √ Add Pinia for sta…

电商项目part04 微服务拆分

微服务架构拆分 微服务介绍 英文:https://martinfowler.com/articles/microservices.html 中文:http://blog.cuicc.com/blog/2015/07/22/microservices 微服务拆分时机 如下场景是否需要进行微服务拆分? 代码维护困难,几百人同时开发一个模块&…