暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / 网易严选多端组件库OSSA正式开源

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

严选技术产品团队 2022-08-08
351





经过三年的积累和迭代，网易严选多端组件库 —— 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的整体架构设计如下图所示。

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

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 规范

为了组件库的长远健康发展，在确定开发组件库的初期，我们便成立了组件评审委员会，并制定了组件新增的流程及规范，新增组件的流程如下图所示。从图中可以看出，在确认了需要新增一个组件之后，首先需要委员会的设计同学进行交互及视觉的设计。在视觉和交互通过评审之后，才会进入正式的开发，开发完成之后还需要各方的验证及走查才能正式入库。
在组件开发层面，除了通过eslint、stylelint来保证编码风格统一，另外还制定了详细的命名及样式书写规范。为了保证质量，目前组件库的demo使用cypress进行了完善的e2e测试。

2.7 组件

目前OSSA开源的仅包含基础组件库部分，我们对基础组件按照基础、输入、输出、反馈以及导航这几类进行了划分。具体组件不在此一一列举，具体大家可以扫描DEMO二维码进行体验：
  • 微信小程序：
  • H5:
除了基础组件，我们在业务开发过程中，特别是在电商领域也积累了一些业务组件。此外网易严选前端团队在其他业务上的实践也积累了一些基于Taro的多端物料，我们将在后续完善之后，一并开源，敬请大家期待。

3. 后续规划

OSSA组件库后续将重点在以下几个方面进行迭代，希望对多端以及对OSSA感兴趣的同学可以一块参与OSSA的建设。
  1. 更加完善的组件测试用例。作为可持续高质量迭代的OSSA组件库，目前已针对H5端全覆盖E2E用例，我们将持续性的丰富我们的用例集和用例质量，以保证OSSA高质量发展。我们将在之后的迭代中完善OSSA全端的测试用例。
  1. 扩充基础组件库。目前OSSA已有30+组件，虽然已经能够满足日常开发的诉求，但是还是有些场景没有覆盖到，后续我们将在完善现有基础组件的基础上，对基础组件库进行扩充。
  1. 开源业务组件库及物料。我们在多端上踩了很多坑，总结了一些经验，也沉淀了一些业务相关的组件和物料，为了让大家少踩坑，也为了反哺社区，我们后续会将业务组件和物料也逐步开源。
  1. 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/#/




本文由作者授权严选技术团队发布



严选前端组件开放源代码小程序
文章转载自严选技术产品团队，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论