闲鱼删除动态还是能看到,闲鱼删除了动态还能看到?

闲鱼经过近八年的发展,前端技术在整个研发体系中有着举足轻重的地位,前端有迭代速度快动态化能力强跨端适配成本低等显著优势。闲鱼前端一直使用淘系提供的基础技术和平台工具,但随着业务的不断发展,逐渐无法满足复杂、个性化的业务和技术环境。

工欲善其事,必先利其器,拥有自己的上层研发体系势在必行,于是从去年下半年开始,前端开始着手代号为「魔鱼」的技术体系建设。

魔鱼

目前魔鱼包含产研平台研发模式网关建设三大部分。

产研平台

闲鱼原有的研发流程是在集团提供的工程研发平台上进行的。大致流程如下:

  1. 1. 在研发平台创建应用,同步创建Git仓库;

  2. 2. 在研发平台创建迭代,同步创建Git分支;

  3. 3. 获取分支代码进行本地研发;

  4. 4. 提交分支代码,研发平台进行日常/预发构建部署,H5应用构建产物为CSS/JS/HTML,把HTML文档部署到Web服务器,生成Url进行测试;

  5. 5. 完成测试,研发平台进行正式发布,给出最终投放Url,并且结束迭代;

可以看到原有的研发流程主要依赖于集团研发平台提供的基本能力,由于平台定位问题,功能相对单一,很多问题还是需要团队自己想办法解决:

问题分析

脚手架及应用配置问题

研发平台提供应用创建引导,帮助初始化应用工程Git仓库和脚手架代码。但是这样创建项目的缺点也非常明显:

  1. 1. 只能用于初次创建应用,后续脚手架升级需要配合另外的升级命令或文档。如果在研发过程中对脚手架改动较大,也会对后续的升级造成一定的困难;

  2. 2. 大部分情况下,初始化工程并不能直接投入使用,还需要经过一系列手动配置,配置过程对脚手架并不熟悉的新同学来说也是相当痛苦,配置错误会导致项目无法运行,甚至对产品质量和性能造成影响。

页面管理问题

研发平台只关注研发流程,而对应用产物(页面)的管理并不是它的强项。对于闲鱼业务来说,研发构建发布仅仅是开发同学要关心的,业务同学更关心页面的管理及使用,所以衍生出了其他数据投放和管理配置平台,这样的问题是:页面发布和数据配置发布割裂,经常因为两边发布没有同步,导致线上页面和配置不一致造成故障。

解决方案

  • ? 统一模板管理:魔鱼平台集成应用创建及升级功能,预定义工程模板、提供可变配置项,支持创建差异化的工程模板,并且模板和配置后期可以在魔鱼平台进行配置调整及版本升级,彻底告别本地代码维护应用框架的做法。

  • ? 集成配置管理:魔鱼平台提供运营数据配置投放能力,从流程上管控数据配置投放和页面发布,保证线上数据的一致性,实现一站式研发、配置能力。

  • ? 场景管理模式:魔鱼平台提供了业务维度的管理模式,可以把不同应用构建的页面进行圈选,统一管理这些页面的权限、配置及发布,大型活动和部分产品链路都比较适合用这种模式管理多个页面集合。

  • ? 接管发布流程:最终的文档发布和配置数据发布都在魔鱼平台进行,保证了发布流程的一致性,也对定制化研发实现了流程闭环。

补充一个魔鱼平台整体能力图:

闲鱼删除动态还是能看到,闲鱼删除了动态还能看到?

研发模式

之前闲鱼的H5业务只有两种研发模式可选:源码开发模块搭建。复杂逻辑业务和产品链路以源码开发为主;活动和一些二级导购页面以模块搭建为主。随着业务复杂度提高、对性能体验要求的提升,需要扩展研发模式,升级技术方案。

问题分析

产品和运营结合

源码开发的页面一般以产品属性为主,运营很少能介入这类页面的配置和搭建。这类页面如果要配合某些大促活动增加一些运营属性,需要额外的开发工作,并且当活动结束后,还要把这部分代码删除,否则容易产生冗余业务逻辑。

搭建的灵活性与体验性能的平衡

闲鱼一直在使用集团提供的通用搭建平台,它基于一套标准的模块研发管理模式,并且提供整页搭建的能力,但是这个平台并不是为闲鱼量身定制的,很多功能对于闲鱼来说过渡设计,并且由于闲鱼自建商品招选体系,导致在数据投放层面无法跟搭建平台很好地融合,每个模块需要内置数据的获取和处理逻辑,当页面模块数量一多,页面的体验性能会受到较大影响,而且内置业务数据逻辑的模块也很难复用。

解决方案

源码/搭建融合方案

闲鱼删除动态还是能看到,闲鱼删除了动态还能看到?

这套方案弥补原有技术能力不足的问题,融合纯源码源码搭建纯搭建,开发同学也不再需要做二选一的选择题。

技术方案底层逻辑还是依赖集团的模块体系,这样可以最大限度地利用已有组件物料,同时在模块配置上,引入插槽(Slot)的自定义类型,结合编辑器,实现模块灵活搭建,并且可以嵌套,让模块组合更加灵活。

基于模板的研发模式

以前应用构建的最终产物是 HTML/JS/CSS,现在产研平台接管了应用创建和配置管理等工作,文档具有动态化能力,最终产物是XTPL/JS/CSS/Schema

  • ? 其中XTPL是动态文档模板,线上页面基于它实例化之后可以被CDN缓存;

  • ? Schema是对投放配置数据格式的描述,在平台编辑器解析这份描述文件,渲染出配置表单。

这种研发模式,除了上文提到了平台可以接管页面框架配置以外,还可以基于页面模板创建多个页面实例,实现一码多页,并且每个页面又具有独立的搭投能力,应用的灵活性有了大幅提升。

闲鱼删除动态还是能看到,闲鱼删除了动态还能看到?

网关建设

在导购和营销活动、大促场景下,页面数据基于运营配置,数据模型之间又有相互依赖关系,比如运营配置了一组选品id,需要发起二次请求来获取这组选品id下对应的商品数据。

在搭建场景下,模块相对独立,有完整的数据获取及消费逻辑,当多个模块搭建成一个页面之后,每个模块独立处理数据获取和渲染逻辑,导致模块渲染时机不可预期,大量并行的请求也会导致请求阻塞。

问题分析

首屏性能差

由于存在串行数据获取的逻辑,页面渲染时机延后,导致首屏渲染时间较长。解决这类方案一般有以下几种:

  1. 1. 服务端胶水层:由服务端把页面依赖的数据合并成一个接口返回,这种仅适合相对稳定的产品业务,对于搭建场景就不可用,而且这类接口没有复用性,由服务端维护胶水层也并不是一个明智的选择;

  2. 2. 前端使用SSR直出文档:这种方式相当于由前端接管胶水逻辑,一方面需要基建支持,另一方面无法做页面缓存,对于访问量大的页面,对SSR服务的压力考验也比较大,比较费资源。一些对体验要求高的核心产品页面,SSR确实是一种提升体验性能的王炸,但它还不能作为一个通用技术方案覆盖所有业务场景。

  3. 3. 实现一个轻量的网关:处理数据依赖分析、召回、补全、裁切等轻逻辑,这个方案适用于处理通用数据模型,比如商品、内容、用户等,不适用于单一产品数据模型。

组件模块复用率低

由于模块需要负责数据获取逻辑,数据跟业务的耦合度较高,导致开发了很多UI相同,数据依赖不同的模块。这对UI组件复用和维护都不友好。

解决方案

前端数据网关

为了解决首屏数据加载性能问题,针对导购营销场景,我们采用上面提到的实现一个轻量的网关的方案,顺便联合服务端,对现有闲鱼通用数据模型进行梳理及标准化制定。

动态模板渲染

针对上文提到的动态模板搭建的研发模式,我们接入集团提供的动态模板渲染引擎,当运营在魔鱼平台编辑器完成页面搭建、配置和发布之后,不需要前端介入开发就可以实现模块JS/CSS资源的动态注入,实现文档的动态配置渲染。

补充一个文档和数据消费链路图:

闲鱼删除动态还是能看到,闲鱼删除了动态还能看到?

魔鱼现状

将魔鱼率先应用到标准数据模型场景

  • ? 闲鱼业务毕竟是电商App,前端支持的业务中,导购和营销场景比较多,比如「闲鱼优品」、「手机数码」;

  • ? 闲鱼也在不断探索内容场景,比如「会玩」、「圈子」;

无论商品内容都是相对容易标准化的数据模型,通过数据网关接入后可以快速得到数据性能优化的收益;同时这类业务也是运营参与比较多,利用魔鱼的研发、搭投一体化的体验,提高研发效率和运营配置效率及体验。

业务迁移性能对比

以手机数码频道为例。这个频道在迁移之前,首页主要数据接口有2个,并且是串行依赖关系;迁移到魔鱼之后使用平台数据配置投放,利用网关的数据召回能力,把数据接口合并成1个。

上线后数据:

  • ? 首次内容绘制(FCP): 673ms –> 1s 这个数据的延长,主要是网关处理原来2个接口的依赖和召回逻辑。

  • ? 跨端首屏(sfsp): 2502ms –> 1918ms 这个数据的缩短,就是因为省下了端上数据依赖和请求处理的时间。

直观效果对比:

改版前 改版后
闲鱼删除动态还是能看到,闲鱼删除了动态还能看到? 闲鱼删除动态还是能看到,闲鱼删除了动态还能看到?

未来规划

  1. 1. 魔鱼作为前端统一研发体系,不光可以支持H5的研发,后面还可以支持端外小程序、高性能容器的业务开发,提供丰富的研发模板类型,配合组件物料实现页面快速创建;

  2. 2. 前端跟服务端紧密结合,除了进行标准化数据模型定义之外,还会接入更丰富的投放配置能力,比如人群定投、AB实验等动态投放策略;

  3. 3. 跟招商、权益、测试、埋点/监控等平台进行数据互通和工作流关联,降低多平台之间的流程操作成本。

  4. 4. 基于Schema的描述模型和配置编辑器可以作为衍生产品,给闲鱼其他的中后台系统使用,统一闲鱼的数据投放方案。

闲鱼删除动态还是能看到,闲鱼删除了动态还能看到?

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 sumchina520@foxmail.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.summeng.org/15275.html