首发于众安前端

对不起,我们来晚了 —— 基于 React 的组件库 Zarm 2.0 发布

是的,大家可能很疑惑:“都2020年了,怎么现在还发布组件库呢?”...

确实,对于前端组件库的大家庭来说,我们迟到了,但也请各位可以抽出几分钟看看一位初来乍到的新人的自我介绍:

Zarm是什么

​Zarm 是众安科技基于 React、React-Native 研发的一款适用于企业级的移动端UI组件库。(官网|github|演示地址 推荐在手机上浏览)

Zarm 的取名,灵感来源于众安保险秉承的理念:做有温度的保险。Zarm = za + warm,za代表众安,warm有“温暖的”意思,以重合的a字母为中心,各取左右两部分。追求极致的用户体验,致力于做有温度的组件库也是zarm项目发起的初衷。

Zarm的发展历程:起初,zarm的前身还只是一个个人项目,2018年后慢慢在众安健康险事业部推广使用。2019年初,众安宣布直营产品品牌化的战略方向 ,这意味着各大BU的产出页面都有可能投放到直营渠道;为了规范了众安系产品基础组件的视觉及交互,整体提升众安系产品的用户体验,保障产品体验的一致性,因此,在众安技术委员会的发起下,Zarm项目诞生了;经过各个BU团队优秀设计师们的努力下,数月后终于敲定了视觉和交互规范,Zarm的前端代码的实现采取自由认领的方式,全公司活跃的前端er们迅速推进,最终趋于稳定,用于生产环境;为了让业务同学和设计、前端的认知形成统一,Zarm形成Axure元件库、项目模板规范等 帮助业务同学快速完成高质量的产品原型;三者相辅相成,最终实现了降低整条工作链路上人力成本和沟通成本的目标。

Zarm经历了两年多的业务沉淀,服务过十个事业部中近百项目,这使得我们相信除了在众安内部,zarm一定也有它的用武之地。


Zarm的优势

  • 组件多。Zarm目前开源了50个组件,基本覆盖常见的通用组件,并仍在持续更新迭代中。

  • 规范多:
    拥有完整统一的设计规范。
    样式命名采用了BEM的规范,内部实现使用了Css Variables + SCSS Mixins,这使得样式维护的工作变得优雅简洁。
    遵循严格的代码规范,基于airbnb的lint封装的eslint规则以及基于stylelint实现的样式规范。

  • 依赖少体积小,极少的依赖三方库,Gzip压缩后,全量组件只有60kb左右的大小。
  • 支持按需加载,zarm 默认支持基于 ES module 的 tree shaking。

  • 扩展性好,我们提供了内置的基础组件,可以方便地基于现有组件实现二次开发。
    比如我们的Popup组件就是所有弹层类组件的基础,Modal、Toast、Loading、ActionSheet、Picker、Select等都是基于 Popup 组件实现。再比如PickerView组件就是滑动选择类组件的基础,而Picker组件就是简单的将Popup和PickerView结合而成。相信你也可以基于这些基础组件开发出更丰富的业务组件~
  • Zarm也会密切关注官方的更新,在发布的正式版中,我们已去除在React17中不再常规使用的生命周期,更新为最新的生命周期。
  • 响应及时,目前在内部开源的情况下,已有接近3000次的commit,在及时响应issue的同时,我们也保持着快速的迭代。后续也会有官方讨论群,只要有问题,我们一定及时跟进,不会让问题石沉大海。
  • 稳定性好,Zarm使用Jest + Enzyme做单元测试。单元测试覆盖率超过80%,并且在持续攀升中。

  • 友好的typescript支持,都2020年了,再不用ts的话世界末日真的就要来了。
  • 样式使用css变量,支持一键换肤,自定义皮肤。

Zarm的未来

在不久的未来,我们会推出:

  • 桌面端组件库 Zarm-Web。
  • hpaPaaS 无代码建站平台(名字暂时保密)。
    ......

对不起,我们来晚了

在各个前端团队或自己研发、或使用第三方组件库的时代,我们推出Zarm组件库的时机可能有些晚。但是我们也是抱着后来者居上的决心,希望能在组件库领域开辟一块属于Zarm的疆土。

在如今这个前端变化多端的时代,大家也不妨在开发新项目时尝试下新的组件库,说不定比目前使用的好呢~

最后,非常感谢你的阅读,也非常欢迎有兴趣的同学加入我们共建更好的Zarm!


​Github开源地址​

github.com/ZhongAnTech/

​请给Zarm一个star!

​欢迎提出你的issue和PR!

​扫描二维码加入官方讨论群


编辑于 03-26

文章被以下专栏收录