如何设计前端来处理多个后端版本

Question

在我的公司，我们使用 Spring Boot 来实现后端 API，并使用 React 来实现前端，包括 Web 界面和 Android/iOS 应用程序。

由于我们的产品是企业软件，客户实际上必须付费才能获得最新的后端 API 来部署在自己的服务器上。但是，我们的移动应用程序会在 App Store 上定期更新。这会导致最终用户设备上的移动应用程序可能是较新版本，而客户计算机上的后端 API 是较旧版本的情况。我们计划向后支持最多 3 个次要版本，这意味着 FE 5.4 将支持最多后端 5.2。

后端确实有一个端点来返回当前版本号。然而，当我们添加新功能并可能在后端 API 中引入重大更改时，我对我们的前端实现如何保持与旧 API 版本的向后兼容性有点一无所知。

我完全理解这个问题可能没有任何完美的解决方案。我希望如果你经历过这种痛苦，你可以分享你的经历，包括你尝试过的事情、你采取的最终方法以及需要注意的潜在陷阱。

我确信我自己和其他遇到这个问题的人都会非常感激:)。

Answer 1

您的解决方案将类似于使用功能切换的任何前端解决方案，但我已经可以想象它不会很漂亮。

基本上，在您的代码中，您将有很多if/else语句或某种形式的包装器，它们对每个 UI/逻辑/功能都执行相同的操作，这是版本升级时的重大更改。

我建议，对于您拥有的每一层（UI、逻辑、API 调用），您应该开始根据后端返回的版本进行切换。你最终会得到很多看起来冗余的代码和很多看起来像这样的代码。（如果您只支持两个版本。switch如果您有更多版本，请使用）

render() {
    {version === "1.0.0" ? <VersionA /> : <VersionB/>}
}

但是，您可以编写一个实用程序方法，根据版本包装并返回不同的组件。通过这样做，您可以更轻松地删除将来不再需要支持的组件。

const versionSwitcher = (version, ...Components) => {
   switch (version) {
      case "1.0.0":
          return Components[0];

      case "1.1.0":
          return Components[1];
   }
}

当然，这会增加所有层的复杂性，但考虑到您的情况，我认为它并不简单。最好的做法是尝试保留自己的viewModel响应，并且永远不要将 API 的响应直接传递到组件中。这减少了 API 和组件之间的耦合，并使这变得更容易一些。