我们如何使用 React 和 AWS 构建 SaaS

我和Marco Zani在 2018 年夏天创办了iterspace。我们计划打造一款工具，让人们能够在合适的语境下分享清晰的反馈。有点像 Loom，但你拥有更高级的评论工具和讨论串。

当然，视觉反馈并非一个全新的想法，但现有的工具都是基于截图的。所以我们着手打造一款基于视频的产品。

建筑学

iterspace 是一个所谓的单页 Web 应用 (SPA)。大部分逻辑都在客户端实现，客户端在浏览器中运行，并将更新同步到后端视图 HTTP 请求。云端通过 WebSocket 通知应用其他用户的更新。

该应用程序的所有数据都存储在 Amazon Web Services (AWS) 云的 DynamoDB 数据库中。这为我们提供了很大的扩展空间，同时还能控制价格。

所有服务和数据存储都在 Amazon Web Services 中运行。我们使用 AWS Amplify 将客户端应用程序托管在公共互联网上，并通过 CDN 将其部署到边缘计算平台。CDN 将请求路由到 AWS S3，以获取静态资源（例如图像或视频）。

JavaScript 和 Node.js

初创公司需要做出的最深远的技术决策之一就是使用什么编程语言。

对于 iterspace，我们选择了 JavaScript 及其服务器端引擎 Node.js。在整个堆栈中使用同一种语言可以显著提高速度，因为它减少了在堆栈各部分之间切换的心理负担。

JavaScript 受到的批评是缺乏静态类型。但通过使用 JavaScript 超集 TypeScript，我们能够在前端和后端添加类型。

前端

对于 iterspace，我们选择 React 作为参考的 UI 库。

React 是一个小型库，专注于做一件事——渲染 UI。它并没有规定如何在大型应用中管理状态。因此，我们选择了 Redux 来管理应用状态，并使用 Redux Saga 来处理副作用。

我们的工作经验来自于构建一个注入品牌标识的设计系统。

对于一家初创公司来说，速度至关重要。因此，我们评估了多个组件库。必备组件包括 React、styled-component 以及用函数式方法编写的组件。我们选择了 Zendesk 的 Zendesk Garden 作为基础 React 组件库，不得不说，这个决定非常值得。

对于初创公司来说，开发速度至关重要。因此，我们开始使用 Storybook 来独立构建组件。基本上，当你需要创建一个新组件时，首先要创建一个故事。故事是一个渲染一个或多个组件的页面。
当你在新的组件文件中编写代码时，你几乎可以立即在浏览器中看到它更新。

它对您思考展示组件和容器组件有很大帮助。

后端

Iterspace 的后端服务是客户端和数据存储之间的轻量级层。它是由 Lambda Functions (Serverless) 提供的 GraphQL API 数据源。

没有 CPU 密集型处理。因此，无需始终运行服务器。

我们使用 Lerna 来管理一个包含所有 Lambda 函数代码的单一仓库，这些代码分别位于不同的包中。此外，我们还创建了通用包，以便在其他 Lambda 函数之间共享核心模型。

视频

iterspace 存储并提供屏幕录像，因此我们必须了解如何可靠地分发视频。
大多数录像来自浏览器（采用 H264 视频编解码器的 WebM），但视频也可以上传，因此我们必须支持多种格式（Mov、Mp4）。

我们使用 AWS Elemental MediaConvert 将视频编码为 WebM 和 Mp4。我们必须同时编码这两种格式，因为 WebM 播放在大多数浏览器（Chrome、Edge、Firefox）上都能播放，但在 Safari 上却不行。

结论

构建产品是一项极具挑战性的工作。它需要快速做出许多决策。尽管如此，我们仍努力尽快为客户交付价值，即使功能尚不完善。
然后，我们会收集反馈，据此调整功能，并不断迭代。
此外，我们在开发 iterspace 的同时，也使用 iterspace！而且，我们是这款产品的首批客户。

希望你喜欢🙌

如果您对构建 SaaS 和 Web 开发感兴趣，您可以考虑订阅我的时事通讯