网易严选多端组件库OSSA正式开源

·  阅读 5582
网易严选多端组件库OSSA正式开源

摘要

经过三年的积累和沉淀,网易严选多端组件库 —— OSSA,正式开源啦~。诚挚邀请对多端有诉求的团队进行试用和交流,同时热烈欢迎对开源多端组件库任意之一感兴趣的同学参与到OSSA组件库的建设中来~🙌

背景

1. 为什么是多端?

为了适应业务的发展,网易严选前端主站团队在业务迭代过程中,先后上线了微信小程序、字节小程序以及支付宝小程序。另外还有还有其他业务线需要同时维护小程序端和H5端。在综合考虑用户体验、研发效能之后,我们决定将一部分业务使用多端框架Taro进行开发(框架选型不是本文的重点,在此不详细展开)。

2. 为什么自己做组件库?

在选定Taro框架之后,从保证网易严选视觉风格统一以及提升开发体验的角度,我们便开始寻找一款合适的基础组件库。在2019的时间节点,Taro生态下可供选择的组件库还很有限。当前时间点开源的组件库如下表所示。在调研对比之后,我们发现现有组件库的视觉风格与网易严选现有风格差异较大,不符合设计部门的要求。综合考虑之后,我们决定新建一套自己的基础组件库。

组件库starslast commit特点
taro-uiGitHub Repo starsGitHub Repo Last CommitTaro官方维护,React生态
nutuiGitHub Repo starsGitHub Repo Last Commit京东维护,Vue生态
nutui-reactGitHub Repo starsGitHub Repo Last Commit京东维护,React生态
taroifyGitHub Repo starsGitHub Repo Last Commit社区维护,React生态,基于Vant UI
mp-coloruiGitHub Repo starsGitHub Repo Last Commit社区维护,React生态
tardGitHub Repo starsGitHub Repo Last Commit京东商羚前端团队维护,React生态
taro-qn-componentsGitHub Repo starsGitHub Repo Last Commit数云前端团队维护,React生态,PC
taro-color-uiGitHub Repo starsGitHub Repo Last Commit社区维护,React生态,基于Color UI

OSSA组件库

特性

  • 基于 Taro 开发的 UI 组件,支持React生态
  • 一套组件可以在 微信小程序支付宝小程序字节小程序H5 多端适配运行
  • 30+ 个高质量组件,覆盖移动端主流场景
  • 使用 TypeScript 编写,提供完整的类型定义
  • 支持按需引入
  • 完善的自动化测试用例

架构设计

OSSA.drawio (1)

OSSA的整体架构设计如上图所示。需要说明的是,我们在准备开始的时候,并没有选择真正的从0到1。首先,Taro官方提供了通过Taro创建UI组件库的模版👍,通过该模版我们可以快速的创建组件库。其次,我们的核心诉求是符合我们设计规范并且好用的基础组件。所以综合考虑下,我们结合团队内部诉求,在官方模版的基础上改造之后进行组件库的开发。

monorepo

目前OSSA包括基础组件、demo,后续还会有官网、业务组件库以及其他基于Taro的物料等。为了方便项目管理,我们采用monorepo的形式管理项目。提到monorepo,首先想到的应该就是lerna,但是lerna有好长一段时间都没有在维护了(最近又开始有commit),在调研了一些开源项目之后,我们决定使用pnpm workspace来进行monorepo的管理。

编译/打包

OSSA在编译打包这一块,目前是使用的官网组件库模版提供的能力。目前会通过rollup编译输出cjsesm两种格式的文件,另外也会通过tsc直接编译一份组件代码进行输出。在使用时,我们发现目前的esm格式的包,在Taro项目中编译时,组件库并没有被tree shaking,这意味着,虽然输出了esm的包,但是我们的组件库还是不支持开箱即用的按需引入,在尝试过在rollup编译阶段进行各种优化之后,我们觉得应该是组件的一些写法具有副作用,导致tree shaking失败。我们将在后续对组件库的迭代中进行更新。

为了支持按需引入,我们暂时推荐在Taro项目中使用bebel插件babel-plugin-import进行处理。需要在babel.config.js中添加如下配置:

plugins: [
  [
    'import',
    {
      libraryName: 'ossaui',
      customName: (name) => `ossaui/lib/components/${name.replace(/^os-/, '')}`,
      customStyleName: (name) => `ossaui/dist/style/components/${name.replace(/^os-/, '')}.scss`
    },
    'ossaui'
  ]
]
复制代码

部署/发包

由于pnpm目前还没有lerna一样完善的发包功能,官方推荐搭配changesets共同使用。通过changeset也可以实现交互式的发包流程。通过配置Github actions就可以做到自动触发发布流程。

规范

为了组件库的长远健康发展,在确定开发组件库的初期,我们便成立了组件评审委员会,并制定了组件新增的流程及规范,新增组件的流程如下图所示。从图中可以看出,在确认了需要新增一个组件之后,首先需要委员会的设计同学进行交互及视觉的设计。在视觉和交互通过评审之后,才会进入正式的开发,开发完成之后还需要各方的验证及走查才能正式入库。

image-20220722141159393

在组件开发层面,除了通过eslintstylelint来保证编码风格统一,另外还制定了详细的命名及样式书写规范。为了保证质量,目前组件库的demo使用cypress进行了完善的用例测试。

组件

目前OSSA开源的仅包含基础组件库部分,我们对基础组件按照基础、输入、输出、反馈以及导航这几类进行了划分。具体组件不在此一一列举,具体大家可以扫描DEMO二维码进行体验

微信小程序:

H5:

除了基础组件,我们在业务开发过程中,特别是在电商领域也积累了一些业务组件。此外网易严选前端团队在其他业务上的实践也积累了一些基于Taro的多端物料,我们将在后续完善之后,一并开源,敬请大家期待~🥳。

后续规划

OSSA组件库后续将重点在以下几个方面进行迭代,希望对多端以及对OSSA感兴趣的同学可以一块参与OSSA的建设

  1. **更加完善的组件测试用例。**作为可持续高质量迭代的OSSA组件库,目前已针对H5端全覆盖E2E用例,我们将持续性的丰富我们的用例集和用例质量,以保证OSSA高质量发展。我们将在之后的迭代中完善OSSA全端的测试用例。

  2. 扩充基础组件库。目前OSSA已有30+组件,虽然已经能够满足日常开发的诉求,但是还是有些场景没有覆盖到,后续我们将在完善现有基础组件的基础上,对基础组件库进行扩充。

  3. 开源业务组件库及物料。我们在多端上踩了很多坑,总结了一些经验,也沉淀了一些业务相关的组件和物料,为了让大家少踩坑,也为了反哺社区,我们后续会将业务组件和物料也逐步开源。

  4. OSSA以及Taro社区的建议。我们会积极收集来自社区的声音,集合到OSSA后续规划中,同时我们也非常欢迎社区同学能积极输入。OSSA期待大家共同建言献策。

写在最后

本组件库的开发得益于Taro团队所提供的生态,部分组件库的设计灵感来源于Taro UI组件库,特此感谢。

本组件库能够开源,离不开以下同学的贡献:

  • 蔡文姬

  • 山下

  • sven

在此一并感谢。

最后,欢迎大家star😆,以及进群交流。

Github:


早早聊大会 2022.8.27(本周六) 09:00 ~ 23:00,低代码专场...报名戳:www.zaozao.run/conf/c49,直播送书:

  • 微软中国 CTO 韦青领衔撰写《实战代低码》
  • 大史新书《前端跨界开发指南 JavaScript 工具库原理析解与实战》

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改