11 月 19 - 20 日 Apache Pulsar 社区年度盛会来啦,立即报名! 了解详情
写点什么

闲鱼的统一跨端 API 方案 —— Uni API

  • 2021-07-14
  • 本文字数:3019 字

    阅读完需:约 10 分钟

闲鱼的统一跨端 API 方案 —— Uni API

随着 C 端流量红利的逐渐消失,端外投放已成为业务寻求增长的重要抓手之一。而不同 App 上存在不同应用场景、不同时期诞生的前端容器:


  1. 基于浏览器的 Webview 容器(h5

  2. 基于客户端渲染衍生的 React Native、Weex 容器

  3. 基于自绘渲染的 flutter 容器

  4. 平台开放能力的小程序容器


业务在端外进行跨端时,就需要前端同学对投放目标环境逐一评估和适配。在初期阶段,前端侧通常通过同一业务针对不同目标环境维护多套实现的方式进行支持,这使得工作量成倍增加。效率提升空间下,催生了跨端方案

问题定义

在跨端业务的前端代码中,通常存在大量的跨端 JS API 调用的重复逻辑:

if (isH5) {  if (isXianyu) {   // 闲鱼    webXianyuToast();  }else if (isTaobao) { // 淘宝    webTaobaoToast();  } else if(isAlipay){ // 支付宝    webAlipayToast()  }  // ...} else if(isWeex)// ...
复制代码


这些调用从开发到上线通常需要经历的路径:

  1. 和业务同学确定需要投放的目标环境。如 H5(支付宝、淘宝、天猫等)

  2. 向目标容器维护者询问 API 调用方式

  3. 在不同环境下调试、开发

  4. 测试同学使用不同机型在不同 App 上适配


每一步都是比较耗时的体力活。假想,能够满足可用性、易用性、丰富性、可扩展性,使得业务直接开发如下代码,正常测试后即可上线。跨端 API 解决方案应该解决什么问题,提供什么能力呢?

import toast from 'uni-toast'
toast()
复制代码


  1. 可用性:适配业务常投放的 Webview、小程序、Wap 等前端容器和 App。并最大化保障 API 能力使用,调用 APP 定制能力 -> 调用容器通用能力 -> Wap 环境模拟能力 -> 返回支持度信息,避免调用异常

  2. 易用性:让不同环境的 API 调用有可靠、可快速调试支持度的统一入口

  3. 丰富性:所支持的目标环境、 API 集合足够多,满足绝大部分业务诉求

  4. 可扩展性:随着业务的发展,能够支持更多 App 、API;随着前端技术的发展,能够支持更多形态的容器

方案设计 & 实现

整体设计

在项目起步阶段,了解到不止是闲鱼,整个阿里经济体前端支撑跨端业务也有相同的问题。于是,跨端 API 项目站在经济体的的视角,以共建的方式进行推进。针对上述问题的方案设计:


null


我们将跨端 API 整体方案定义为规范、SDK 和配套设施三个部分:

• 规范作为跨端 API 抹平标准,使得对上层业务只感知一套成为可能。

• SDK 遵循规范,对不同环境调用底层 API 进行抹平。通过自定义构建、分端构建等工程能力,透出可定制、可扩展的跨端 API 产物;

• 配套设施通过 API 文档、CANIUSE 工具提供快速检索能力,一码多端调用示例提供快速试用能力;

促成规范

跨端 API 规范的意义是:

  1. 向上为 SDK 层 API 设计提供参考标准,提高业务侧使用时的确定性、合理性;

  2. 向下为 Native 层 JSAPI 设计提供参考标准,减缓底层分化趋势;


规范能否普遍推广和保持生命力取决于 自身合理性 **和 **上下游认可度,为保障以上两点,邀请了经济体各现有跨端方案作者成立了跨端 API 规范小组,从以下四个方面制定了跨端 API 规范:


null


  • 确定范围:什么样的 API 应该算作跨端 API。

跨端 API 应该具备 跨端属性和高频属性:跨端属性可通过各容器支持度客观反映,高频属性一方面通过各方案的调用统计作为依据,一方面通过跨端规范小组成员逐个投票判断


  • 环境探针:跨端 API 核心在于根据不同环境调用相应实现,精确的环境感知尤为重要。

环境判断涉及到经济体内、外的标准容器、特殊容器,在环境探针规范中通过 容器识别协议、端识别协议、系统识别协议、识别次序约定 的组合机制覆盖了全场景;


  • 标准 API 定义:标准 API 模型是真实 API 的 interface,也是所有 API 的骨骼。

通过标准 API 合集进行分析,API 之间的差异主要体现在:方法命名、调用方式、出入参结构、返回错误码 四个部分,这四部分加上 出入参扩展机制 就定义了标准 API 模型;


  • 扩展机制:标准 API 合集未覆盖的场景,通过定制、扩展能力支持。

基于标准 API 扩展新的端容器实现,或者扩展一个全新的 API;

SDK 实现

有了规范作为实现依据和指导之后,我们开始进行进行 SDK 实现。在整个过程中,主要面临了以下挑战:


实现巨大的维护工作量:55+ API 在 8 容器、30+ APP 上的适配和长期维护,且 API 和环境数量均无收敛趋势 


【工程】多场景产物输出:多场景使用 -> 多形态产物如日常业务开发期望的使用方式是window.uni.toast();跨端基础物料开发期望的是 import toast from 'uni-toast' 。多场景的使用使得产物需要多形态输出 


工程方案的可定制性:站在经济体视角,场景不只是面向闲鱼自身业务。业务侧场景通常只需要投放方案所支持容器环境中的一部分,使用整个方案会引入不必要的冗余。所以方案需要支持从全集中定义构建出子集的能力


应对上述挑战的关键解法是: 分层按端适配 API。API 差异分布在容器层、APP 层,SDK 设计时,也按照分层进行抹平。容器层抹平了通用 API 差异,APP 层基于容器层进行定制。按端适配的设计带来了天然的扩展性,在支持一个新端时,只需实现对应的 API 适配集合,其余环境判断、挂载 API、多维度输出包的部分就交给工程和 uniapi-core 完成了。


null


开放方案扩展能力,降低中心化维护工作量。官方优先保障高频 APP、容器的 API 维护,当业务跨端投放目标环境未适配时,可通过共建的方式按照规范进行适配;另外,建立 APP 适配维护认领机制,使得维护多端适配具备长效性。


自定义构建能力。原子化 API 的设计 + 组合机制可以使整个方案具备了自定义构建能力。原子化 API:将指定容器、APP 上的 API 适配作为最小单元,进行无副作用的实现;组合机制:通过配置提取所需 API 及目标投放环境,以代码模板的方式自动组合 API 进行构建、发布;


null


拥有全环境的 API 原子化实现,便能构建出任意支持度的跨端 API 方案。目前已输数个 BU 级定制包。

配套设施建设

规范和 SDK 满足了可用性、丰富性、可扩展性诉求。在易用性,跨端 API 提供复杂 API 的查询、调试能力,建设了内部、开源站点:文档(支持度信息细致到参数、APP 粒度)、CAN I USE 工具、一码多端调用示例等

null

业务接入后

在接入跨端 API 方案后,跨端业务的工作流有了以下优化:

  1. 中心化的容器能力信息维护,使得产品、开发同学不再逐个环境询问能力,而是通过统一入口快速查询评估

  2. 统一多端适配 API 的 SDK,使得开发同学不再逐个环境拼凑、调试、开发 API,而是像标准 API 一样直接使用

  3. 统一维护 SDK,免去测试同学针对不同机型、不同环境下容器能力使用的工作量

从 SDK 1.0 release 开始,闲鱼会玩社区、端外分享承接页等业务就开始陆续进行试点和落地。此外,方案 SDK Uni API 已在阿里经济体内 10+ BU 应用,逐渐成为经济体前端开发的基础设施。

展望

• 抹平不是终点,上层适配应对分化永远是中间态方案,一套底层标准 API 才是最优解。「跨端 API 调用规范」为「容器 API 标准」提供来自上层使用侧的输入,使得新容器 API 在设计时能够有所参考,避免不必要的分化

• 开源社区版本(https://universal-api.js.org[1])建设(由跨端 API 小组、Rax 等团队共同建设)。目前 Uni API 开源版本已支持阿里系、微信、字节系、百度等小程序和 h5 容器,预期后续持续扩展 API 和支持容器等丰富度


所以在端技术仍在日益发展的背景下,下一代的跨端方案,是由底层的 Fuchsia OS、HarmonyOS 等多端操作系统统一,还是依旧通过上层适配实现呢,你怎么认为呢?


References

[1]https://universal-api.js.org: https://universal-api.js.org/


本文转载自:闲鱼技术(ID:XYtech_Alibaba)

原文链接:闲鱼的统一跨端 API 方案 —— Uni API

2021-07-14 13:001633

评论 1 条评论

发布
暂无评论
发现更多内容

【安全漏洞】CVE-2021-42287&CVE-2021-42278 域内提权

H

网络安全 信息安全 漏洞

【Java 进阶训练营】 JVM 知识总结

wgl

Netflix系统架构

俞凡

架构 微服务 netflix 大厂实践

Linux之which命令

入门小站

Linux

HarmonyOS(鸿蒙)——单击事件的四种写法

李子捌

28天写作 21天挑战 鸿蒙系统 12月日更

HDZ城市行深圳站 | AIoT时代,如何抓住智联生活的战略机会点?

华为云开发者联盟

AIOT HarmonyOS 华为云IoT 智联生活 PLC-IoT

1个通用工具平台+多个热点场景工具套件,助力开发者快速构建应用

华为云开发者联盟

云计算 低代码 开发工具 devcloud 应用构建

这一期总结

张老蔫

28天写作

HarmonyOS(鸿蒙)——双击事件

李子捌

28天写作 21天挑战 鸿蒙开发 12月日更

模块三-架构文档

撿破爛ぃ

「架构实战营」

儿童教育有感-说话用词不当

wood

28天写作

程序员做技术管理需要懂哪些方面?

Seven的代码实验室

程序员 技术管理

前端CI/CD上如何保证依赖安装速度达到优解?

梁龙先森

前端 构建脚本

🍃【Spring专题】「原理系列」SpringMVC的运行工作原理(补充修订)

洛神灬殇

spring springmvc 12月日更 流程解析

数据管理典范!「山东城商行联盟数据库准实时数据采集系统」入选2021中国大数据应用样板案例

DataPipeline数见科技

大数据 数据同步 数据融合 数据迁移 数据管理

Dubbo 框架学习笔记十二

六维

dubbo 12月日更

100% 展示 MySQL 语句执行的神器-Optimizer Trace

程序员历小冰

MySQL 28天写作 12月日更

模块四-reids存储方案

撿破爛ぃ

「架构实战营」

kali系统之复现漏洞分析与审计

网络安全学海

黑客 网络安全 安全 信息安全 渗透测试

华为云GaussDB新产品特性亮相DTC2021,重磅新品开源预告

华为云开发者联盟

数据库 华为云 GaussDB 同城双集群 内存引擎

什么是 AQS 及源码分析

Ayue、

AQS

[架构实战营] 模块三作业

Geek_0ed632

「架构实战营」

【CSS 学习总结】第五篇 - CSS 变量 var

Brave

CSS 12月日更

荐书📚——《剑指Offer》专项突破版

宇宙之一粟

推荐书籍 12月日更

linux动态链接的程序如何在其他系统上运行

SkyFire

动态链接 装载器

Gin-Vue-Admin 使用gin+vue进行极速开发的全栈开发基础平台【gva第一节】

坚果

Go 28天写作 Vue 3 12月日更

Linux 命令 less 全知全会

hedzr

Linux less

Kubernetes 集群部署 Metrics Server 获取集群 Metric 数据

zuozewei

Kubernetes 性能监控 12月日更

从渔夫和游客说到晒太阳的狗狗派

mtfelix

28天写作

在线上传图片二维码识别解析

入门小站

工具

Spring核心原理之 IoC容器中那些鲜为人知的细节(3)

Tom弹架构

Java spring 源码

闲鱼的统一跨端 API 方案 —— Uni API_语言 & 开发_闲鱼技术_InfoQ精选文章