闲鱼前端组件库的建设

背景

闲鱼经过这些年发展已经变成了一个业务丰富，数量众多且功能复杂的产品；而且业务高速发展，需求井喷，需要开发同学能够快速做出响应。

同时这些产品线与闲鱼的设计风格有很多的共性，但各自不同的定位也导致了更多的差异性；

制定一套各产品业务线通用的规范，并在各端提供一套灵活配置的组件物料库，得到一些稳定且高复用性的内容对当前阶段的闲鱼前端来说是有极大的业务和技术价值的。

设计

组件库定位

在确定了要做组件库后我们对前端业务一段时间内的设计稿进行了收集，分析发现各个业务线有较大差异，尤其是在营销活动场景，为了实现更好的营销效果往往需要新颖视觉和交互。在设计组件时如果为了满足所有的场景则势必会导致较大的使用成本。所以最后我们确定定位：该组件库解决80%的产品线业务。

需求分析

从上面的分析可以看出UI规范是实现该组件库的一个十分关键的基础，为此我们建立了包括客户端和设计师的虚拟小组，进行跨端的设计语言统一。

对于组件库的目标整理如下

1. 提升效率：不同业务线、不同项目之间工作有大量重复的内容，通过与设计师达成的UI规范为基础建设满足各业务线的组件，减少重复建设。

2. 提高质量：许多重复被踩的坑，光靠文档效率低下，沉淀组件代码最佳实践。

3. 统一的交互体验：提供跨端的一致交互体验。

4. 解决兼容问题：减少重复的兼容性问题和测试的兼容成本。

结合现有的集团能力分析得出基础的能力拓扑图一

实现分析

下图是我们在建设前期分析的实现上述组件库的关键技术点，后面我将围绕这个思维导图进行具体的分析

关键点

整体架构

• 单包

把所有的组件看成一个整体，一起打包发布。

单个仓库，单个包，统一维护统一管理，比如Antd。