🥇第一个让你可视化你的 React/NodeJS 应用的框架🤯

想象奖品

名字叫 Wasp Studio

这是派对诡计吗！？

一张图片值一千个代币

让计算机帮助我们

想象奖品

想象一下，你正在开发一个全栈应用，现在想要实现一个新功能。这个功能很复杂，于是你拿出纸笔，或者使用tldraw 工具，开始绘制应用当前的结构图，从数据库到服务器，再到客户端。

但是，如果你有一个工具可以帮你可视化整个全栈应用程序，那该有多酷啊！而且，如果这个工具有潜力做更伟大的事情，比如立即为你在整个堆栈中添加有用的功能，或者与人工智能和大型语言模型配对生成代码，那又会怎样呢？

嗯，这个想法已经成为现实，它被称为wasp studio。点击这里查看：

名字叫 Wasp Studio

首先，Wasp 是一个功能强大的全栈 React、NodeJS 和 Prisma 框架。它在 GitHub 上的 Stars 数量刚刚突破 10,000，并且已用于创建超过 50,000 个项目。

它为什么特别？因为它使用配置文件和自带的编译器来帮你管理一系列功能，比如身份验证、定时任务、路由和邮件发送，从而节省大量时间，让你专注于更有趣的事情。

Wasp 的中央配置文件（作为应用程序的一组指令）和编译器的组合还允许 Wasp 通过单行命令为您执行一系列复杂而有趣的任务，例如：

• 全栈部署 →wasp deploy
• 使用 Docker 启动开发数据库 →wasp start db
• 搭建整个示例应用程序的脚手架，例如 SaaS 启动器 →wasp new
• 为您提供整个全栈应用程序的可视化示意图→wasp studio

如果您想亲自尝试一下，您只需要做的是：

1. 使用以下方式安装 Waspcurl -sSL https://get.wasp-lang.dev/installer.sh | sh
2. 使用 TypeScript 搭建一个新的 To Do 应用程序wasp new -t todo-ts
3. 然后要获得下面屏幕截图中的可视化工具，请运行wasp studio

让我们快速分析一下这里看到的内容：

• 中间蓝色的主要 App 组件显示了应用程序的名称、我们正在使用的数据库及其 Auth 方法
• 左侧黄色实体向我们展示了我们定义的数据库模型
• 最左边的红色和绿色操作和查询向我们展示了作用于数据库实体的服务器操作
• 右侧的路由和页面向我们展示了我们的 React 组件所在的位置以及它们是否需要授权（用🔒表示）

如果您想知道这在更复杂的应用程序中会是什么样子，那么这就是它在Open SaaS（我们的免费、开源 SaaS 样板启动器）上运行时的样子。

这样做的好处是，我们可以概览所有数据库实体以及它们所依赖的服务器功能（又称“操作”）。在上图的左上角，你甚至可以看到一个 cron 作业，dailyStatsJob它每小时运行一次（0 * * * *）。

例如，这使得开发后端逻辑变得轻而易举，特别是如果你不是一个经验丰富的后端开发人员。想想看，实现这一点的代码就像这样简单：

job dailyStatsJob {
  executor: PgBoss,
  perform: {
    fn: import { calculateDailyStats } from "@src/calculateDailyStats"
  },
  schedule: {
    cron: "0 * * * *" 
  },
  entities: [User, DailyStats, Logs, PageViewSource]
}

是的，这就是你在服务器上获取异步任务所需的全部步骤。现在你的calculateDailyStats函数将每小时运行一次——无需第三方服务 🙂

这是派对诡计吗！？

好吧。你可能会想，可视化工具很酷，但它真的有用吗？还是只是个花哨的“派对小把戏”？说实话，目前它还只是个“派对小把戏”。

但这是一个派对小技巧，潜力无限。让我来解释一下。

当然，您可以以当前的形式使用它来更好地了解您的应用程序，或者规划一些新功能，但将来您将能够使用它来做更多的事情，例如：

• 只需点击几下即可添加新的身份验证方法
• 通过服务器操作快速搭建功能性客户端组件
• 立即为您的整个应用添加新的全栈功能，例如 Stripe 支付
• 轻松与大型语言模型 (LLM) 协作以动态生成特征！

再次强调，这一切之所以能够实现，是因为有一个中央配置文件，它就像是你应用的一组“指令”。有了这个文件，Wasp 才能真正了解你的应用是如何构建的，因此它可以轻松地以可视化的形式向你展示你的应用。它还能让你以令人兴奋的新方式更轻松地构建应用的新功能。

看看下面 Wasp 配置文件中的另一个代码片段。这足以让你的 Web 应用获得全栈身份验证！这是因为 Wasp 编译器会帮你管理这些样板代码。

app todoVisualize {
  title: "todo-visualize",

  auth: {
    userEntity: User,
    methods: {
      usernameAndPassword: {}, 
      google: {},
    },
  }
}

entity User {=psl
  id          Int     @id @default(autoincrement())
  tasks       Task[]
psl=}

一张图片值一千个代币

现在我们对 Wasp 的工作原理有了一些了解，让我们更深入地探讨 Wasp 的潜力，wasp studio并将其与 LLM 结合起来作为未来的用例。

目前，AI 辅助代码生成的最大制约因素之一是上下文。我们都知道，法学硕士（LLM）喜欢产生幻觉，但他们的“记忆力”也很差。因此，如果你尝试让他们为你的应用构建功能，为了确保新功能能够兼容，你必须不断“提醒”他们应用的工作原理、结构和依赖关系。

但是使用 Wasp 的配置文件（本质上只是全栈应用程序及其功能的高级抽象），我们为 LLM 提供了成功为手头的应用程序构建新功能所需的上下文。

这种方法非常有效，因为我们不仅为 LLM 提供了它所需的上下文，而且 Wasp 的编译器还承担了为我们编写大部分样板文件的责任（谢谢，朋友），为 LLM 提供了更简单的编写任务，例如：

• 修改 Wasp 配置文件
• 要在服务器上运行的函数
• 使用 Wasp 代码的 React 组件

从这个意义上讲，法学硕士 (LLM) 需要掌握的上下文知识少得多，而且它的记忆力很差也是可以原谅的，因为 Wasp 可以确保所有东西都很好地粘合在一起！

为了进一步说明这一点，让我们再次看一下上面介绍的授权码：

auth: {
  userEntity: User,
  methods: {
    usernameAndPassword: {}, 
    google: {},
  },

考虑到这段代码会在整个堆栈中提供身份验证。因此，您不仅可以在服务器上获得所有为您生成和管理的身份验证逻辑，还可以在客户端获得可用的 UI 组件和身份验证钩子！

动图

另一方面，如果没有 Wasp 提供的抽象，我们最终只能依赖 LLM，因为它的记忆力很差，容易产生幻觉，一遍又一遍地为我们编写一堆样板，就像下面这个 JWT 中间件一样：

LLM 非常擅长独立编写重复的样板代码。但期望他们将这些代码作为集成式全栈应用程序的一部分来编写，意味着我们面临更多可能的错误。

而使用 Wasp，只需要几行代码。如果人类很容易编写，那么对于法学硕士来说也超级容易编写。

顺便说一句，这不仅为我们省去了很多麻烦，还可以为我们节省很多钱，因为AI 生成的 Wasp 应用程序使用的令牌（即输入和输出文本）比同类工具少约 10-40 倍，因此它们以极低的价格生成代码。

让计算机帮助我们

随着技术的不断进步，编程将变得更容易被专业知识较少的用户所接受，因为更多的专业知识将嵌入到我们的工具中。

但这意味着我们需要抽象，以便我们人类能够轻松地使用这些工具。

就像上面提到的法学硕士（LLM）的例子一样，我们可以构建工具，让人工智能一遍又一遍地为我们编写所有样板代码，但问题是，当它们可以做其他更有用的事情时，我们是否应该让它们这样做？法学硕士擅长快速产生大量新想法。为什么不构建一些工具，让人工智能在这方面帮助我们呢？

这正是我们为未来所做的规划wasp studio。一个可视化的界面，让你可以拼凑出应用程序的新功能，无论是否借助 LLM 的帮助，然后快速对这些不同的想法进行 A/B 测试。

不仅如此，我们还拥有一个可供使用的抽象层，能够轻松地与技术水平较低的用户进行协作。借助这些工具，即使是产品经理也能参与其中，构建新功能并交由开发人员审批。

Wasp 及其功能集的强大之处在于，它能让我们获得更易于阅读、调试和维护的代码，无论是对人还是机器而言。结合可视化界面，我们可以快速迭代整个堆栈中的新功能，将其用作我们自己的规划和编排工具，或者更轻松地调试和监督 LLM 可能为我们完成的工作。

这是对 Web 开发未来的一个非常令人兴奋的展望，这些新工具将会带来许多新的利用方式。

您认为这样的工具可以有哪些用途wasp studio？您认为在人工智能与人类协作领域还有哪些其他发展即将到来？请在下方评论区留言告诉我们，感谢您的阅读！