闲鱼大终端UI组件库——FishUI建设之路

背景

随着闲鱼前端架构的不断演进，一些关键技术设施需要结合业务特征逐步自建，技术方案也要拥抱社区来提升可扩展性。一方面， 闲鱼跨端开发框架kun 让前端开发者使用JS/CSS/HTML即可交付终端页面，同时兼顾了动态性和高性能，另一方面，前端UI框架也正从集团 rax 逐步转向社区 React 方案。在这个大背景下，围绕 kun 和 web 两个容器的跨端组件建设也势在必行，因此 Fish UI 应运而生，它将全面拥抱 react 生态，并借助 kun 容器的能力，为闲鱼终端开发者提供一套高易用性和稳定性的跨端（kun & web）UI组件库。

FishUI 的最大的技术创新点在于跨端，它通过跨端组件的形式对齐 kun 和 web 两个容器的体验标准，让使用者更加专注于业务逻辑而非容器差异，从而实现为业务开发提效的目标。围绕着该创新和目标，一些可预知的技术难题也随之出现，比如组件库的工程结构如何组织、分端构建如何做、开发规范是什么样等等，这些问题将在下文中一一得到解答。

整体设计

分层设计

Fish UI 作为兼容 kun 和 web 两端的组件库，包含底层的kun容器组件和上层的跨端组件，其分层结构大致如下：

其中【跨端组件】一层是 Fish UI 最上层的封装，是抹平 kun 和 web 容器差异的一层，同时也是业务开发者使用频率最高的一层。

理想情况是【跨端组件】要尽可能依赖底层【w3c规范组件】组合扩展而成，要足够丰富，而【kun 扩展组件】一层则希望尽可能做薄，因为其与kun 容器强绑定，是为了解决特定场景问题而产生的，不具备通用性。

本文后续也主要讲解围绕【跨端组件】这一层的相关建设内容。

跨端设计

FishUI 最核心的特点在于【跨端兼容 kun 和 h5】，也是与其他组件库最大的差异点。

通常情况下，业务开发者需要手动判断环境，分别实现两个容器对应的代码，比如渲染一张图片的代码如下：

通过 FishUI，我们期望的调用方式应该是这样

通过对比，可以看出 FishUI 跨端设计的核心功能在于：

• • 自动根据 window.kun 判断环境，执行对应环境代码

• • 自动抹平 kun 和 web 两端的属性差异，无需用户手动处理

• • 对外提供统一的 TS 接口声明

• • 减少模板代码量，提升代码简洁度

因此，FishUI 跨端组件的分端设计大致如下（以 image 为 例）：

技术选型

语言

我们选择了 react + typescript + moduleCSS 作为组件开发语言。

其中样式方案我们使用了 moduleCSS，主要原因是为了避免多人协作开发时存在的样式污染问题。