【译】选择Bit.dev构建组件库的15个理由

原文地址：15 Reasons to Build Your Component Library in Bit.dev 作者：Jonathan Saring 如果传统的组件库像CD音乐专辑，那么Bit.dev就像组件库的iTunes或Spotify。

图1

2019年的时候，UI组件库在普及度上有了巨大的飞跃。当然这并不多么令人惊奇，因为像Uber、Airbnb、Booking等等公司都在通过共享的UI组件来保证其产品在视觉体验上的一致性。

复用UI组件能让我们保证UI的一致性，由此不但可以减少用户的困惑，还能够提高所有产品的关键指标。由于我们不在需要不断地编写相同的代码，这就极大的加快了产品的迭代。随着不断的积累，共享组件也将有助于标准化团队之间的规范。

Bit.dev是一种快速、动态化、协同式构建团队组件库的解决方案。其允许我们逐步提取、收集和复用应用程序中已有的组件，帮助团队减少工作量，替代工具链中的其它工具，并通过共享组件极大地提到前端开发的效率和质量。

接下来，让我们快速了解一下在Bit.dev上构建共享组件所带来的优势，以帮助团队在短时间内获得模块化组件库。

1. 渐进性创建组件库

图2

Bit.dev生态系统中的一大优势在于，其能够使我们渐进性开发组件，并将可复用的组件收集到平台中。

相比于单单将关注点聚焦在交付共享组件上而停止一个较长开发周期的项目，使用Bit.dev我们依旧可以保证应用程序的开发进度，同时提取可复用的组件以供重用。这也是一个将新功能和版本逐渐引入到项目中很好的方案。

我们可以高效、无缝的打包并导出可复用组件到团队在平台上的组件集合中。这意味着我们可以在短时间内就拥有一个组件库，并随着项目迭代而不断的扩展（开始使用）。

2. 无模板，无配置

Bit.dev可以帮助我们完成建立一个组件库所有的基础工作，而无需我们去费心费力。

例如，无需为组件定义package.json文件，因为其CLI工具将自动为组件生成package.json文件；无需为组件定义构建和测试用例的配置，其允许我们在不同的项目中能够直接使用相同的配置环境去创建组件并收集到平台中，等等。Bit.dev让我们将重心集中在组件的建设上，而不是去关注组件库的基础配置。

3. 有效的组织和细化组件

图3

)

Bit.dev负责组织和细分组件，以便我们能够在相关的使用场景中非常容易的找到所需组件。以下是一些关键功能，允许我们开箱即用：

• 强大的语义搜索
• 自动生成组件标签
• 智能过滤组件大小、依赖、上下文等
• 能够以项目、团队或任何其他方式分组

4. 版本控制：有意义的更新和混合组件

图4

组件库以单版本软件包的形式使用，其允许我们可以通过语义化版本控制对每个组件进行版本控制和更新。

这意味着可以将不同版本的不同组件混合在一起。不同的团队可以通过更新特定功能版本的组件来保持独立性，而不必依赖于组件库的整体发布。

不同的团队不必在各自的应用程序中引入冗余的更新。例如，如果仅仅需要滑块组件的新特性，那么在更新时就不会同步更新其它组件也不会将其它组件的依赖项添加到应用程序中，从而减少了冲突的可能性。

通过语义化版本控制，团队可以精细的控制每个组件的更新和特定版本的使用。在为组件库添加共享组件的同时，也能保证组件各自的独立性。

5. 编写代码，生成文档

图5

我们无需创建、维护相关工具链以及用于展示组件的平台。

每个共享在平台上的组件，都会被自动分析、提取对应的API，并显示在组件页中。同时，还会展示组件的示例以及在线编辑的能力，便于每个开发人员在使用之前进行轻松的尝试。

这意味着我们有一个公共的平台，可直接用来组件的托管、共享、记录、展示以及开箱即用。

6. 内置组件注册表

img

Bit.dev减轻了用于管理共享组件的工具链，我们无需将相关组件发布到NPM上，也能够通过NPM或Yarn直接从平台下载安装组件，这仅需要简单配置一下注册域即可。

7. 重用组件，保持项目独立性

我们可以通过CLI工具提供的bit import命令将任意组件引入到任意一个已提交到git仓库的项目中。若对该组件进行了修改，可通过tag命令简单的共享一个新版本。

这意味着在重用组件的同时，也能够保证应用程序在开发中的独立性。这相比通过拉取组件库，在进行修改、提交的过程要简单得多，同样也简化了使用方式。

8. 完美同步Git仓库

img

当更新组件时，可以向每个使用过该组件的项目发出拉取请求。我们可以通过了解哪些项目采取了更新，哪些项目没有采取，这样就可以更好的控制更改并在整个代码库中进行同步。

另外，可以在一个操作中更新组件以及组件的依赖，这提高了我们对组件更新的控制能力，而不受限于组件的使用规模。

9. 提高UI/UX一致性

img

当在平台上共享复用组件时，需要确保使用者在不同环境下都能够得到一致的体验。

一致的UI/UX意味着用户可以更加轻松有效的浏览以及使用产品，同时对产品品牌产生熟悉感、安全感和满意感。但是随着应用程序规模的不断增大，这个挑战将变得非常有难度。而Bit.dev就是一种通过无限复用组件来确保UI/UX一致性的强大方案。

10. 提高应用程序的开发效率

img

当我们在平台上轻松找到并使用现有组件时，可以节省以下时间：

A）无需编写重复代码

B）通过跨存储库的简单更新进行组件维护

通过Bit.dev我们能够非常简单的从依赖组件的项目中搜索、使用和修改组件。而无需去浏览冗长的文档，无需去研究代码库或担心兼容问题。随着团队中更多组件的共享，就能逐步节省更多的开发时间。

11. 降低贡献代码和反馈的门槛

深入到整个组件库中对某个组件进行PR是一件非常耗时的事情，仅仅切换环境可能就需要耗费一天的时间。

但当组件位于Bit.dev中时，可以简单地通过bit import将离散的组件引入到任意项目中，并修改共享新版本，这意味着任何人都能够在短时间内去贡献代码。

另外，可以在任意一个组件上建立讨论，以便协同更新工作。而且，这不仅仅针对开发人员，随着组件的可视化，还可以邀请设计、产品等其他角色进行讨论。

12. 更好地采用共享组件

img

在传统组件库中，随着不断的扩展，很难实现共享组件。其主要原因是前端开发人员不想将应用程序的开发和组件库的开发相结合，不想安装整个组件库并获取整个库的更新。

通过使用Bit.dev可以轻松使用所需的组件，而不会失去独立性。我们可以根据需要去修改更新共享组件，而不会影响其UI一致性，同时能够得到设计人员和基础架构团队的快速反馈。而他们也只会获得实际使用的组件的更新，并不会收到任何影响。

若能使组件更容易被搜索到并采用，这意味着更多的团队和应用程序将开始使用相同的组件，并采用相同的设计系统。

13. 团队新成员快速上手

当组件已经模块化为一个可复用的集合时，团队新成员就可以更加容易的上手，了解团队有什么并开始构建。

例如，当使用某个应用程序时，我们可以向团队新成员介绍平台上现有的共享组件。在那里，他们可以很轻松地熟悉哪些组件模块是团队或公司在使用的。

14. 让设计参与开发合作

目前为止，大多数UI工具都是专注于UI设计，而不是代码。这是错误的，因为代码才是最终的UI表现，用户真正看到的界面是由代码生成的。因此，每个团队应该在组件代码上进行沟通和协作，而不仅仅设计元素。

Bit.dev平台上的共享组件就是实际代码的托管，同时会将代码可视化。因此，设计师和开发（产品、运营等等）可以通过可视化的方式在真实代码上进行协作。想到若将Bit.dev与Invision DMS或者Figma等工具集成时会是一件多么令人兴奋的事情。

15. 减少应用程序体积，提高性能

img

Bit.dev还有一个实用的功能就是允许我们在选择众多共享组件前，通过组件包的大小进行过滤筛选。

当仅使用应用程序允许大小的共享组件时，可以有效的减少应用程序的总大小。使得用户获得更快、更流畅的体验，从而为产品带来更好的反馈。

我们的社区博客文章即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3adw9c4thi808