从烹饪界汲取灵感，实现更好的前端开发

临时更新

赠书活动必须在 2020 年 12 月 5 日午夜 (GMT -5) 之前转发

封面照片由Fabrizio Magoni在Unsplash上拍摄

软件开发行业始终在交付高质量代码方面苦苦挣扎。虽然许多开发人员都有衡量质量的标准，但如何确保这些指标得到满足却依然是一个挑战，尤其是在代码库不断增长的情况下。

我们建造计算机系统的方式与建造城市的方式一样：随着时间的推移，没有计划，并且在废墟之上。

准备就绪

虽然软件开发是一个相对年轻的领域，但我们可以从一些更成熟的行业中学习，从而编写出更优秀的代码。几代以来，厨师们都推崇“事事准备”（mise en place）的思维模式，认为这是厨房成功的关键。

让厨房运转起来的系统被称为 mise-en-place

或者用不同的方式表达

Mise en place 指的是提前准备好各种食材，当您收到订单并将菜肴放在一起时，它们就已经到位了。

Mise en place 指的是准备一顿饭所需的组织和思维方式。这看起来可能需要提前做更多工作，但实际上可以帮助确保效率、一致性和质量。

这与构建我们的前端应用程序有什么关系？

许多前端技术都有组件的概念。组件是我们前端应用程序的基石，但它作为确保生产力、一致性和质量的工具，却常常被忽视。我们常常关注应用程序用户看到的屏幕，而忽略了这些屏幕的构成要素。如果不注重细节，很容易在代码库中留下一堆一次性且重复的组件。

Brad Frost 有一本名为《原子设计》的优秀著作，讲述了如何构建优秀的设计系统。在这本书（以及相关文章）中，他将设计系统（或组件库）定义为一系列层级。在这种方法论中，底层组件是原子，原子组成分子，分子组成生物体，等等（我强烈推荐 Brad 的文章/书籍，以便真正了解这种思维模式）。虽然我通常不使用相同的术语，但我欣赏底层组件和复合组件的概念，它们用于构建可复用的前端应用程序。

你可能会注意到，其中一些概念适用于我们正在讨论的“事前准备”思维模式。我们可以在应用程序中创建单个屏幕/页面之前构建组件。

我们如何将 mise en place 哲学应用到我们的代码库中？

如果您认同这种思维方式，您可能会发现，在应用程序中的标准位置之外，单独处理组件会很有帮助。最简单的做法是，为每个组件创建测试页面。这可能会带来一些挑战，例如如何确保这些页面不会被部署，如何确保其他开发人员知道在哪里找到它们，以及其他类似的事情。

值得庆幸的是，有很多工具可以单独处理组件。Storybook是我最常用的一个。

使用 Storybook，我们可以为每个组件添加“故事”。故事是一个函数，它定义了应该渲染的内容，以及如何与我们正在开发的组件的输入和输出进行交互（这些交互通常通过Storybook 插件实现）。假设我们正在构建一个组件库，其中包含按钮、文本、卡片等基础组件，以及一系列由这些组件组成的更复杂的组合。我们将完全在 Storybook 中开发这些底层组件，然后再将它们与应用程序中的实际数据连接起来。

Storybook 允许我们在标准应用程序之外运行组件，从而加快了创建组件库的过程。例如，yarn storybook可以配置为启动 Storybook，然后yarn start可以配置为运行应用程序的开发版本。

这种将开发组件的位置与构建应用程序的位置区分开来的做法，在运用“事半功倍”的思维模式时非常有用。我们可以将 Storybook 视为我们正在准备的工作区，而将应用程序屏幕视为由我们预先准备好的各种食材组成的菜肴。

这实际上对我有什么帮助？

在烹饪界，厨师可以用少量食材精心烹制出许多菜肴。食材被组合成菜肴的各个组成部分，再由这些组成部分最终变成完整的菜肴。这使得厨师能够快速制作出许多品质和一致性相似的菜肴。

让我们以“快餐休闲”餐厅 Chipotle 为例。他们提前准备好一系列餐点，随时可以组合成一顿饭。想象一下，如果每次顾客下单，准备餐点的人都需要烹饪和准备每一道菜，那需要多长时间才能完成。除了节省时间之外，这还会导致流程出现更多变化，最终导致质量下降。

这在软件开发中也同样适用。如果我们构建的组件经过测试并符合我们期望的质量标准，我们就能在更短的时间内构建出让我们对结果更有信心的界面。

假设我们需要为一个应用程序构建两个页面：产品列表和产品详情。我们希望产品详情中的相关产品看起来与产品列表完全一样。

产品列表

产品详情

我们可以构建一个列表项组件，其形式（伪代码/类似 JSX）如下：

// ListItem output - JSX like but pseudo code
<Card>
  <Flex flexDirection="row">
    <ProductImage src={imageSrc} />
    <Flex flexDirection="column">
      <Heading>{headingText}</Heading>
      <Text>{description}</Text>
    </Flex>
    <Button onClick={onClick}>Click this</Button>
  </Flex>
</Card>

一旦我们有了这个，我们就可以在 ProductList 和 ProductDetail 中重复使用它。

<ListItem headingText="Some Item" description="This is the description ..." ... />

你会注意到，虽然这个 ListItem 是一个可复用的组件，但它是由其他可复用的组件组成的。Flex / Heading / Button 等都可以是低级组件（虽然这是伪代码，但 Flex 的使用基本上是一个 Rebass Flex 组件）。

总结

尽管关于开发应用程序的好方法有成千上万种意见，但我发现，在构建前端应用程序时，应用 mise en place 哲学可以提高质量、一致性，并最终提高生产力。

我认为，如果我们变得更有组织，使用更多的预案，了解我们真正需要什么，只做我们真正需要的事情，我想我们会有更多的时间

• 德韦恩·利普马美国烹饪学院

（此文章转载自ryanlanciaux.com）