网易严选多端组件库OSSA正式开源
网易严选多端组件库OSSA正式开源
以下文章来源于严选技术产品团队 ,作者严选技术
严选技术产品团队.
网易严选技术产品团队致力于分享电商业态下的技术干货。这里是网易严选技术产品团队的官方对外窗口,不定期推送技术文章、团队活动、招聘信息等内容。
经过三年的积累和迭代,网易严选多端组件库 —— OSSA,正式开源啦。诚挚邀请对多端有诉求的团队进行试用和交流,同时热烈欢迎对开源、多端、组件库任意之一感兴趣的同学参与到OSSA组件库的建设中来。
1. 背景
1.1 为什么是多端?
为了适应业务的发展,网易严选前端主站团队在业务迭代过程中,先后上线了微信小程序、字节小程序以及支付宝小程序。另外还有还有其他业务线需要同时维护小程序端和H5端。在综合考虑用户体验、开发效能之后,我们决定将一部分业务使用多端框架Taro进行开发(框架选型不是本文的重点,在此不详细展开)。1.2 为什么自己做组件库?
在选定Taro框架之后,从保证网易严选视觉风格统一以及提升开发体验的角度,我们便开始寻找一款合适的基础组件库。在2019的时间节点,Taro生态下可供选择的组件库还很有限。当前时间点开源的组件库如下表所示。在调研对比之后,我们发现现有组件库的视觉风格与网易严选现有风格差异较大,不符合设计部门的要求。综合考虑之后,我们决定新建一套自己的基础组件库。2. OSSA组件库
2.1 特性
- 基于Taro开发的 UI 组件,支持React生态
- 一套组件可以在微信小程序、支付宝小程序、字节小程序、H5多端适配运行
- 30+ 个高质量组件,覆盖移动端主流场景
- 使用 TypeScript 编写,提供完整的类型定义
- 支持按需引入
- 完善的自动化测试用例
2.2 架构设计
OSSA的整体架构设计如下图所示。
2.3 monorepo
目前OSSA包括基础组件、demo,后续还会有官网、业务组件库以及其他基于Taro的物料等。为了方便项目管理,我们采用monorepo的形式管理项目。提到monorepo,首先想到的应该就是lerna,但是lerna有好长一段时间都没有在维护了(最近又开始有commit了),在调研了一些开源项目之后,我们决定使用pnpm workspace来进行monorepo的管理。2.4 编译/打包
OSSA在编译打包这一块,目前是使用的官网组件库模版提供的能力。目前会通过rollup编译输出cjs和esm两种格式的文件,另外也会通过tsc直接编译一份组件代码进行输出。在使用时,我们发现目前的esm格式的包,在Taro项目中编译时,组件库并没有被tree shaking,这意味着,虽然输出了esm的包,但是我们的组件库还是不支持开箱即用的按需引入,在尝试过在rollup编译阶段进行各种优化之后,我们觉得应该是组件的一些写法具有副作用,导致tree shaking失败。我们将在后续对组件库的迭代中进行更新。为了支持按需引入,我们暂时推荐在Taro项目中使用bebel插件babel-plugin-import进行处理。需要在babel.config.js中添加如下配置:2.5 部署/发包
由于pnpm目前还没有lerna一样完善的发包功能,官方推荐搭配changesets共同使用。通过changeset也可以实现交互式的发包流程。通过配置Github actions就可以做到自动触发发布流程。2.6 规范
为了组件库的长远健康发展,在确定开发组件库的初期,我们便成立了组件评审委员会,并制定了组件新增的流程及规范,新增组件的流程如下图所示。从图中可以看出,在确认了需要新增一个组件之后,首先需要委员会的设计同学进行交互及视觉的设计。在视觉和交互通过评审之后,才会进入正式的开发,开发完成之后还需要各方的验证及走查才能正式入库。2.7 组件
目前OSSA开源的仅包含基础组件库部分,我们对基础组件按照基础、输入、输出、反馈以及导航这几类进行了划分。具体组件不在此一一列举,具体大家可以扫描DEMO二维码进行体验:- 微信小程序:
- H5:
3. 后续规划
OSSA组件库后续将重点在以下几个方面进行迭代,希望对多端以及对OSSA感兴趣的同学可以一块参与OSSA的建设。- 更加完善的组件测试用例。作为可持续高质量迭代的OSSA组件库,目前已针对H5端全覆盖E2E用例,我们将持续性的丰富我们的用例集和用例质量,以保证OSSA高质量发展。我们将在之后的迭代中完善OSSA全端的测试用例。
- 扩充基础组件库。目前OSSA已有30+组件,虽然已经能够满足日常开发的诉求,但是还是有些场景没有覆盖到,后续我们将在完善现有基础组件的基础上,对基础组件库进行扩充。
- 开源业务组件库及物料。我们在多端上踩了很多坑,总结了一些经验,也沉淀了一些业务相关的组件和物料,为了让大家少踩坑,也为了反哺社区,我们后续会将业务组件和物料也逐步开源。
- OSSA以及Taro社区的建议。我们会积极收集来自社区的声音,集合到OSSA后续规划中,同时我们也非常欢迎社区同学能积极输入。OSSA期待大家共同建言献策。
4. 写在最后
本组件库的开发得益于Taro团队所提供的生态,部分组件的设计灵感来源于Taro UI组件库,特此感谢。本组件库能够开源,离不开蔡文姬、山下、sven同学的贡献,在此一并感谢。最后,欢迎大家star,以及进群交流。- Github:https://github.com/NeteaseYanxuan/OSSA
- 微信交流群:
5. 参考文档
-
Taro:https://docs.taro.zone/docs
-
基于 Taro 开发第三方多端 UI 库:https://docs.taro.zone/docs/ui-lib
-
bebel插件babel-plugin-import:https://github.com/umijs/babel-plugin-import
- changesets:https://pnpm.io/using-changesets
- Taro UI:https://taro-ui.jd.com/#/
漫思