使用 React 和 Bit 进行原子化设计: 简化复杂 UI

使用 React 和 Bit 进行原子化设计: 简化复杂 UI

如何分解 UI 复杂性，轻量级管理，创建组件目录和组件组合

问题

当前前端开发世界趋于复杂，每次都会出现新框架、工具、技术和用户需求，为了跟上这些最新趋势，我得刷业内新闻和 tweet。在变化如此快速的环境中找到方向略显困难。在大环境中落地的方式之一是通过标准或设计系统来组织代码。

原子化设计

原子化设计系统，能够识别继承关系、重点、类型以及每个组件的角色。

组件通过不同方式复合组装应用整体结构。

• 原子

• 分子

• 模块

• 模板

• 页面

原因

设计系统出现的原因是我们开始淹没在大型项目中大量的组件中。

在大型系统中，有一两百个组件，不可能知道每一个组件。

起源

Brad Frost 提出原子化设计系统，为了让大家更自如了解和深入阅读这方面的文章，这里提供一本专门介绍系统的书。

示例 UI

我没找到让我完全满意的 UI 示例，下面是一张最接近要求的示例。

我不会精确还原每一个像素，亦或是实现完全一样的布局。

这里的目标是展示如何分割组件。

组件分解

我不认为一开始就能确定最终的结果，相信还有更好的方式可以解耦 UI 组件，但目的是一致的，

让组件更易于管理。这里采用自上而下的方法:

• 一个控制台页面

• 两套模板，头部和工作区

• 多种模块，工具，时间，地图

• 更多的分子，工具按钮，温度信息，订阅信息

• 更多的原子，标签，图标，链接，标题...

目录

解耦每个组件，然后在线创建在线分类会让后面开发人员更容易查找和使用。

Bit

Bit 是一个支持组件即服务的在线平台，可以在线托管存在组件，支持组件查找，组件版本号，独立运行，

并且支持不同项目的组件集成。

Bit 解决了管理组件系统这个通用问题，并且将开发人员从持续造轮子解脱，提高开发效率。

下面是推送至 Bit 的示例渲染组件，更多信息可以观看这个视频。

结果

最后，我创建 15 个组件，可以组合成上面的示例 UI 界面。

最终的界面没有放在这里，因为超出本文的界限。

组件经过分类可以在线访问，全部代码放在这个仓库。

开发完成后，创建自己的组件目录变得十分简单。

只需要在 bitsrc.io 上注册，输入下面的简单命令就可以实现

# Navigate to the project directory and initialize Bit
$ cd project_dir
$ bit init
$ bit login
# Add the components to the local scope
$ bit add src/components/atoms/*
$ bit add src/components/pages/*
# Check if all components are added
$ bit status
# Tag the version and upload the components to Bit
$ bit tag --all 1.0.0
$ bit export .

最终结果可以访问这个链接。

这是组件空间，可以理解成导出组件空间，可以有多个私有或公共空间。

我们看下组件，在线支持组件文档、测试、构建和编译，并且支持查看代码目录和文件。

$ bit init
$ bit import 

现在可以在后续的项目中直接导入组件，但是要确保项目支持打包引用资源。

例如，上面组件导入的样式文件。

你可以查看 Bit 官方文档提供的组件渲染、测试和文档。

总结

Bit 是全新的工具，让标准化管理模块化和可复用组件变得更简单。

开发人员应当关注项目需求和高质量代码交付，不应该担心其他项目或他人使用自己的组件。

译者注

• 原文链接

• 原文有删减，因译者水平有限，如有错误，欢迎留言指正交流