使用 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 <your_username>.<your_scope>
最终结果可以访问这个链接。
这是组件空间，可以理解成导出组件空间，可以有多个私有或公共空间。
我们看下<Panel />组件，在线支持组件文档、测试、构建和编译，并且支持查看代码目录和文件。
$ bit init
$ bit import <your_username/<your_scope/avatar-image \
--path src/components/avatar-image
现在可以在后续的项目中直接导入组件，但是要确保项目支持打包引用资源。
例如，上面组件导入的样式文件。
你可以查看 Bit 官方文档提供的组件渲染、测试和文档。
总结
Bit 是全新的工具，让标准化管理模块化和可复用组件变得更简单。
开发人员应当关注项目需求和高质量代码交付，不应该担心其他项目或他人使用自己的组件。
译者注
-
原文有删减，因译者水平有限，如有错误，欢迎留言指正交流
网友评论