提高开发人员速度的极限

直到五个月前，我们的仪表板运行缓慢，功能有限，并且（最糟糕的）是用Angular编写的。 我们对Angular本身没有什么特别的要求，但是我们团队中没有人有任何重要的经验。 这意味着即使要修复一个小错误也要花费大量的精力。 我们已制定了宏伟的计划，向我们的仪表板添加了很棒的功能-组织，每个用户多个应用程序，可查询的日志等等！ -但我们不相信在遗留代码之上进行构建是我们时间的最佳利用。 所以我们报废了。

我们的目标是构建新的仪表板，使我们能够快速有效地进行开发。 我们知道我们想使用React来与其他内部JavaScript项目保持一致，但是仪表板具有大量的应用程序状态，因此我们决定也使用Redux。 我们首先从Bumpers 的* BEST *🙄文章中获取了一堆指针。

像许多Redux应用程序中常见的那样，我们没有直接在/store级别上拥有所有商店文件，而是将商店分为几个子目录，每个子目录都有各自的操作，reduce和Selectors文件。 这些子目录中的每一个都与我们的模型之一相对应，例如帐户，组织，应用程序等。通过将相关代码分组在一起，开发速度大大提高。 现在，当某人想要更改“帐户”状态时，他们只需导航至/store/account即可找到该代码，而不必在大型文件中按ctrl+f将不同模型的所有代码组合在一起。

• 使用Elasticsearch管理关系— Naukri Engineering
• 在通信和项目管理工具之间玩了多年的软件乒乓球之后，GovTech 100公司转向Workast
• 成为时间推动者
• 3声哔哔声…3,2,1。 走！ 然后是“安静”
• 大揭密（魔术数字，第2部分）

旁注：我们从保险杠文章中得出的另一点是，在每个商店子目录中添加了一个终结点文件。 可以在此文件中处理API调用，然后由action文件依次调用。 这是一种很好的关注点分离，可以轻松地切换操作或API接口，而又不影响其他接口，并提供干净的存根接口进行测试。

这种分离使修改商店非常容易，但是不幸的是，添加新商店需要大量准备工作。 对于每个新商店，我们都必须创建一个新目录，添加一堆文件并编写相同的初始框架代码-所有这些工作都可以自动化！ 我们编写了一个脚手架脚本来为我们做，并将其添加到我们的package.json文件中。 我们能够通过yarn scaffold 使用Yarn运行此脚本。 我们在此脚本中添加了其他几段框架代码，因此我们可以快速创建组件，模型定义以及存储。 这使得添加新代码的过程变得非常轻松快捷。 大多数代码只需要充实一些细节，然后就可以了。 👍

为了提高开发速度，我们要做的另一件事是使用Jest进行测试。 我们认为测试是开发的重要组成部分，但是编写测试会大大减慢开发过程。 Jest的视觉输出非常棒（与python的pytest相当），但真正的关键是快照的概念。

使用Jest的快照非常简单，就像expect(testData).toMatchSnapshot() 。 第一次运行此测试时，将提示用户检查testData并确认其具有预期值。 然后，Jest创建一个具有确认数据值的快照文件。 在随后的每次测试运行中，Jest都会将testData的当前值与快照中存储的值进行比较。 如果值不匹配，控制台将显示两个值之间的差异，并询问是否应更新快照。

这比必须快1）确定最初编写测试时数据的值（尤其是结构复杂的数据），以及2）在某些情况下必须更改一堆硬编码的测试值，这要快得多。确实会发生变化（在开发的早期阶段经常发生）。 我们能够将骨架测试添加到我们的脚手架脚本中，因此每个React组件都会自动获得如下测试：

  // @流 
 从'react'导入React； 
 从'react-test-renderer'导入渲染器； 
 从'./index'导入NewComponent; 

 测试（'如预期的那样'，（）=> { 
  const component = renderer.create（）; 
  const tree = component.toJSON（）; 
  Expect（tree）.toMatchSnapshot（）; 
  }）; 

这有助于确保我们所有的组件都经过测试。 如果它只是一个简单的组件，则只需进行骨架测试即可。 如果它是一个更复杂的组件，则测试将失败并提示开发人员将其更新为更准确的测试。 这有效地消除了开发人员忘记为组件编写测试而不必做任何额外工作来测试较简单的组件的情况，这是一个巨大的优势。

旁注：Prettier是我们在 工具博客中 讨论的一种自动格式化程序 ，也为我们的开发速度带来了奇迹。 您不会再花费很多时间在间隔上，除非您不再需要这样做。

由于这些更改已与我们的工作流程集成在一起，因此我们能够越来越快地发展。 我们在惊人的12周内完成了整个仪表板项目（以及支持我们想要实现的新功能所需的相关后端更改）。 我们从这次经验中学到的关键教训是，投入最初的时间来建立强大的发展基础非常值得！ 对于这个项目，建立强大的基础需要以一种功能性的方式将代码分组在一起，并尽可能地自动化各种模式。 展望未来，我们将确保寻找在其他项目中可以做到这一点的方法！