Storybook

Storybook 是一个用于展示预览组件的工具，可以方便的编写组件文档、展示多种用例、提供实施选项配置。Storybook React 教程。

概念：

• 原子设计（Atomic Design）：一种设计系统（Desing System）指导思想，主要体现在一种自低向上的分层 UI 开发思想。
  • Atomic Design 原子设计
  • Atomic Design — 原子化设计体系
  • 原子设计理论（上）
  • Atomic Design 原子设计理论精华总结
  • 示例：bradfrostdotcom-pl.netlify.app
• 组件驱动开发（CDD, Component Driven Development）：主要思想是将页面不断分解为更小粒度的组件，然后实现各个小组件然后组合实现更大的组件，这更加能够体现“单一职责”设计原则。

优点：
我认为 Storybook 比较好的地方在于，它能够让我们先实现小组件的同时让我们编写 stories 来运行各种用例，在前后端同时开工的敏捷开发时候不至于阻塞研发流程。Storybook 推荐以 CDD + TDD 的模式来开发，让我们在数据上减少对后端的依赖，让代码稳健可靠的运行。