前言
希望这个移动组件库能够对您有所帮助。 今天的前端早读文章由京东@杨小LU贡献分享。
正文从这里开始~~
随着前端的发展，组件库层出不穷。 完整的组件库可以极大地提高开发效率，让开发者只关注业务逻辑，而不必考虑基础组件的复用性、扩展性、稳定性。 。 面对众多的组件库，如何选择？ 本文将从多个角度对流行的移动组件库进行比较和分析。 希望对大家有所帮助。
背景
自.x发布以来，用户越来越多，包括集团内部和外部开发者，京东集团内累计应用的项目数量已超过200+。 NutUI也逐渐增加了主题定制、国际化等能力。 NutUI在不断添加组件、扩展能力的同时，也注重“组件粒度”的完善。 组件库就像一座建筑，组件是它的基础。 其重要性不言而喻。 因此，在2022年初，我们完成了主流组件库的差异比较，向优秀组件库学习，找出不足，快速补充各个组件粒度的能力。
从主流元件库中精心挑选了六款型号进行对比分析：
初步了解
首先我们从技术栈、开源时间、组件数量、Npm下载量、Star数等方面对上述组件库进行初步了解：
（注：npm下载统计截止时间为：2022年6月20日）
从上表不难发现，React技术栈的移动组件库相对较少，而Vue技术栈的组件库相对较多。
虽然 NutUI 组件库在组件数量方面排名第一，但在 Npm 下载量和 Stars 方面仍远远落后于一流组件库。 这也促使我们后期更加注重组件品质、开发经验和口碑。 前一阶段主要目的是完成功能，满足集团业务发展。
元件比较
为了让NutUI更加健壮，NutUI中的每个组件都对应了其他组件库的组件，并从组件的使用文档、功能点、API等角度进行一一分析，找出不足并加以改进及时。
使用文档
从组件的“简介”、“引入方法”、“代码演示”、“API”和“FAQ”等方面对组件进行描述。 其中，在组件代码演示中，每个示例都包含自主开发的在线代码调试，方便用户更直观、快速地了解组件。
从“简介”、“引入方法”、“代码演示”、“API”、“主题定制（CSS变量配置）”、“常见问题解答”等方面对组件进行描述，并与其他组件库的显示内容进行对比最全面的。 Vant目前不提供组件的在线代码调试功能，用户只能在项目中体验。
从“简介”、“示例”、“API”、“FAQ”四个方面来描述该组件。 其中，Ant的每个示例都包含多个Demo演示。 用户在使用的时候需要对它们进行排序。 没有比这更直观的示例或代码演示了。
从“简介”、“示例”和“API”三个方面描述该组件。 每个示例都包含在线代码调试。 与其他组件库不同的是，每个组件的使用文档都增加了该组件问题的快速入口，非常人性化。
从“简介”、“示例”和“API”三个方面描述该组件。 Mand的文档描述非常简单，在Demo示例中很难看到一行字。
从“简介”、“示例”和“API”三个方面描述该组件。 每个示例均包含自主开发的UI在线代码调试。 与其他组件库不同，每个示例都添加了折叠功能。
组件文档描述是用户了解组件的重要方式之一。 以上组件库各有优缺点。
相比之下，NutUI 对每个例子的解释还是不够的。 该问题将在后续版本中逐步改善。
另外，组件对外暴露的API可以判断该组件是否满足当前的业务场景。 接下来我们看一下各个组件库暴露的API。
应用程序编程接口
我们先看一组数据：每个组件库中所有组件暴露的API数量
从上面的数据可以看出，Vant的组件API暴露最多。 虽然NutUI的组件数量比Vant多，但每个组件的平均API数量却没有Vant多。 可见NutUI在组件暴露的API数量上是不够的。 必须依次比较每个组件以找到缺失的 API。
当然，不能盲目添加API。 对于相同的组件但不同的设计思想，没有必要添加一些API，需要三思而后行。
一般能力
仅仅关注每一个组件是不够的，还要放大格局，关注组件库的通用能力，尽可能满足开发者的需求。
坚果用户界面
在过去的一年里，NutUI不断扩展组件功能，包括智能提示插件、自研在线编辑器、主题定制、在线主题定制、国际化等。
为开发者提供的福利，包括智能提取API、自动补全等，提升开发者体验。
它允许用户在开发阶段切换不同主题风格的皮肤，也允许开发者直接修改指定组件的风格，以满足不同设计风格的移动业务场景。
凡特
Vant对内承载有赞所有核心业务，对外服务超过10万开发者。 是业界主流的移动组件库之一。 Vant还具有主题定制、在线主题预览工具、国际化等能力。
蚂蚁
Ant 5.0版本是一次彻底的重新设计，带来了全新的设计体验和100%重写的组件代码实现，更换了新的标识，进入了新的篇章。 Ant具有主题定制和国际化的能力。 同时，它还具有在线编辑的能力，但比较隐蔽（在线体验）。
Vue 发布时间不长，尚不支持国际化、主题定制等能力。 我相信这些功能将在不久的将来添加。 Vue虽然没有自主开发的在线编辑器，但是已经成功集成到在线编辑器中。
曼德
Mand默认提供了一套基于滴滴金融业务设计规范的UI主题，同时也支持主题定制功能。 主题定制功能的设计思路与Vant一致。
为 和 提供组件高亮功能，同时还为单机提供辅助插件。 还自主研发了UI在线调试工具。 用户可以使用组件或更改 CSS 变量来完成主题定制。
不难看出，在线调试工具、国际化、主题定制、插件等能力已经成为一个组件库不可或缺的能力。
特征
我们来看看各个组件的内部实现逻辑。
图标 图标
Icon作为UI构成中的重要元素，在一定程度上影响着UI界面的整体风格。 对于组件库来说，添加大量图片会严重影响包大小。 如何处理大量的图标成为组件库设计的一大难题。 从上图可以看出，6个组件库实现方式分为2种：
NutUI、Vant、组件库都是基于图标库实现的，最终渲染为字体。 图标的大小（使用font-size）、颜色、阴影、旋转等都可以通过CSS直接控制，使用起来简单方便。
NutUI 和 Vant 在使用上存在差异。 生成自定义Icon文件后，NutUI将下载的文件放入与NutUI组件开发相同的仓库中，而Vant将下载的文件放入新的仓库中。 ，生成@vant/icons包。
Vant的处理方式方便用户单独使用，而且Vant的衍生品也可以重复使用。 然而，对于组件开发者来说，一旦现有的图标不满足并且添加了新的图标，就需要重新发布和版本化。 从这个角度来说，NutUI的处理方式会更加方便。
两种加工方法都有各自的优点和缺点。 您可以根据组件库的框架和规划进行选择，扬长避短。
Ant和组件库中的图标是独立的NPM包，如果要使用需要单独安装。 最终以SVG形式呈现。 Mand直接使用svg--来渲染SVG图标。
SVG 也可以使用 CSS 进行控制，更好的是，您还可以控制 SVG 特定的属性，例如笔划。 不仅如此，SVG是真实的矢量图像，可以保证在任何情况下不失真。 但就兼容性而言，它不如Icon Font的渲染形式。 即使在 IE6 下，图标字体也能正常呈现。
包装/构建工具
6个组件库分别使用Vite、Gulp进行封装，其中以Vite使用最多。 Vite作为新一代的前端构建工具，在生产中也使用了作为打包工具，而Mand则直接用于打包，可见其非常重要。
CSS 变量
CSS 变量是自定义属性。 它们包含的值可以在整个文档中重复使用。 通过自定义属性标签设置值（例如：--main-color: black;），通过var()函数获取值（例如:color: var(--main-color);） .通常的最佳实践是定义在root伪类下：root
:root {
--main-bg-color: white;
}Vant、Ant、使用丰富的 CSS 变量来组织样式。 通过覆盖这些 CSS 变量，您可以实现自定义主题和其他效果。
生态建设
事实上，组件库的开发者，同时也是组件库的产品经理，希望组件库能够覆盖更多的业务场景，支持更多的技术栈，拥有更多的能力，所以各个组件库都在不断的开发探索组件库的可能性，并让它继续繁殖成更多的产品。
坚果用户界面
经过不断努力，NutUI团队目前已经拥有6款针对不同场景的衍生产品。
同时，为了给开发者提供更高效、便捷的开发方式，NutUI 与 Taro 的结合不仅可以让开发者在一处编码、多终端运行、流畅自如地开发小程序。 开发过程中还可以使用更美观、更方便、组件更丰富的组件库。 我把NutUI和Taro结合的比较完美。 Taro 官方使用 NutUI 作为 Vue 技术栈的推荐组件库。 现在开发者将可以使用NutUI无缝开发H5和多终端小程序。 NutUI提供了70+组件，涵盖了日常业务开发中用到的大部分组件。
赞
Zan服务于SaaS产品的设计系统。目前官网维护了3个组件库。
有2个组件库由社区团队维护
蚂蚁
蚂蚁的生态建设非常全面。 主要用于企业级中后端产品的开发。 目前维护的产品很多，但大部分产品还是用在PC端，相比之下移动端产品较少。
官网致力于打造企业级的设计体系，有很多可见的产品。不过，大部分移动产品仍在等待上线。 已发布3款移动产品。
曼德
Mand是滴滴出行针对金融场景开发的Vue组件库。 它有3个移动产品。
终于
通过将NutUI与其他组件库进行比较，我们不仅发现了它的缺点，也发现了它的闪光点。 NutUI组件能力的缺失从年初就开始了，现在已经接近尾声。 相信开发者会慢慢体会到NutUI的变化。
最后，希望这篇文章能够对您有所帮助。 一个组件库要想成功，需要在各个方面都很完美。 NutUI也将取长补短，不断完善，为开发者带来极致的体验。 欢迎加入NutUI大家庭，让它发挥更大的价值~
如果您在开发过程中遇到问题，可以随时提出issue，NutUI团队的同学会认真对待并解决问题。 如果你有好的组件，无论是业务组件还是通用组件，都可以向 NutUI 组件库提交 PR。 欢迎大家参与共建。
