Wasp——一种无需样板代码即可开发全栈 JavaScript Web 应用程序的语言

Wasp是一种全新的编程语言，它能用更少的代码开发全栈 Web 应用。

Wasp 是一种简单的声明式语言，它使开发 Web 应用程序变得容易，同时还允许您使用 React、Node.js 和 Prisma 等最新技术。

在这篇文章中，我们将与您分享为什么我们认为 Wasp 可能对 Web 开发产生重大影响，它的工作原理，我们目前所处的位置，以及未来的计划！

为什么是黄蜂？

你知道如何使用 React，熟悉 HTML/CSS/…，知道如何在后端编写业务逻辑（例如使用 Node），但是当你想要构建一个真正的 Web 应用程序并将其部署供其他人使用时，你会被所有的细节和额外的工作淹没——响应式 UI、正确的错误处理、安全性、构建、部署、身份验证、在客户端管理服务器状态、管理数据库、不同的环境……

Jose Aguinaga 在他的博客文章“2016 年学习 JavaScript 的感受”中，以一种有趣的方式描述了 Web 应用程序开发的意想不到的复杂性，这篇文章在 6 年后仍然具有现实意义。

我们开发 Wasp 的原因是，尽管我们都是经验丰富的开发人员，并且使用各种技术（JQuery -> Backbone -> Angular -> React、自定义脚本/makefile -> Grunt -> Gulp -> Webpack、PHP -> Java -> Node.js 等）开发过多个复杂的 Web 应用程序，但我们仍然觉得构建 Web 应用程序比它应该的要难，因为过程中涉及大量的样板代码和重复性工作。

我们的主要发现是，虽然技术栈不断快速发展，但应用程序的核心需求大多保持不变（身份验证、路由、数据模型 CRUD、ACL 等）。

这就是为什么大约两年前我们开始考虑将 Web 应用程序规范（它应该做什么）与其实现（它应该如何做）分开的原因。

这促使我们萌生了将常见的 Web 应用程序功能和概念提取到一种特殊的规范语言（Wasp）中的想法，而实现细节仍然通过现代技术栈（目前是 React、Node.js、Prisma）进行描述。

我们开发 Wasp 的愿景是创造一种强大而简洁的语言，让您能够以尽可能人性化的方式描述您的 Web 应用。我们希望尽可能地让上图中的冰山顶部看起来赏心悦目，同时让底部看起来更小。

使用这种语言，只需几个词，您就可以指定页面及其路由，指定您想要的身份验证类型，定义基本实体/数据模型，描述基本数据流，选择要部署的位置，在 React/Node 中实现具体细节，然后让 Wasp 负责连接、构建和部署所有内容。

以下是描述简单全栈 Web 应用程序部分代码的 Wasp 代码示例：

app todoApp {
  title: "ToDo App" /* visible in tab */
}

route "/" -> page Main
page Main {
  component: import Main from "@ext/Main.js"  /* Import your React code. */
}

auth { /* full-stack auth out-of-the-box */
  userEntity: User,
  methods: [ EmailAndPassword ],
}

entity User {=psl
  id          Int     @id @default(autoincrement())
  email       String  @unique
  password    String
psl=}

点击此处查看完整示例。

为什么还要使用特定领域语言（DSL），框架不是已经可以解决这个问题了吗？

框架（例如 Ruby on Rails 或 Meteor）给了我们很大的启发。但是，我们希望更进一步——通过设计一种专门针对 Web 应用领域的语言（DSL），我们可以消除大量样板代码，并提供更简洁、更轻松的开发体验。

另一方面，我们并非试图用 Wasp 取代一切，也不认为这样做有意义——恰恰相反，Wasp 就像 React 和 Node.js 代码之间的“粘合剂”，它能帮你省去繁琐的工作，同时又能让你灵活地编写自己的代码。大部分代码仍然使用 React 和 Node.js 编写，而 Wasp 则作为整个应用程序的骨干。

DSL 的另一个好处是，它允许 Wasp 在构建时了解 Web 应用程序的需求，并在生成最终代码之前对其进行推理，而这正是我们特别兴奋的地方。

例如，在生成要部署到生产环境的代码时，它可以根据对 Web 应用程序的理解选择最合适的架构，并将其部署到无服务器架构或其他类型的架构（甚至是组合架构）。另一个例子是，只需在 Wasp 中定义一次数据模型逻辑，即可在整个技术栈中重用该逻辑。

DSL 为优化、静态分析、可扩展性和无与伦比的人体工程学开辟了可能性。

它是如何运作的？

Wasp 编译器将 .wasp/React/Node.js 源代码编译成 React/Node.js 目标代码。
目前 Wasp 仅支持 JavaScript，但我们计划很快添加 TypeScript 支持。
技术说明：Wasp 编译器是用 Haskell 实现的。

虽然目前仅支持 React 和 Node.js，但我们计划在未来支持多种其他技术。

生成的代码是人类可读的，可以轻松检查，如果 Wasp 的功能过于局限，甚至可以将其移除。如果不移除，您也无需查看生成的代码——它由 Wasp 在后台自动生成。

Wasp 通过 Wasp CLI 使用 - 要在开发中运行 Wasp 项目，您只需运行wasp start。

Wasp 现在在哪里？它将要去哪里？

我们的宏伟愿景是将尽可能多的 Web 应用程序领域知识转移到 Wasp 语言本身，从而赋予 Wasp 更强大的功能和更大的灵活性。

最终，由于 Wasp 对 Web 应用程序的需求有着如此深刻的理解，我们可以在其基础上生成一个可视化编辑器——允许非开发人员与开发人员一起参与开发。

此外，Wasp 不会局限于特定的技术，而是支持多种技术（React/Angular/…，Node/Go/…**。

Wasp 目前处于 Alpha 阶段，一些功能还不完善或缺失，有些问题我们尚未解决，其他问题可能会随着我们的进展而改变，但您可以尝试使用它并构建和部署 Web 应用程序！

Wasp 目前支持的功能：
✅ 全栈身份验证（邮箱和密码）
✅ 页面和路由
✅ 模糊客户端和服务器之间的界限——定义服务器端操作和查询，并在客户端代码中直接调用它们（RPC）！
✅ 服务器端操作和查询的智能缓存（自动缓存失效）
✅ 使用 Prisma.io 定义实体（数据模型）
✅ 前端访问控制列表 (ACL )
✅ 导入 NPM 依赖项

即将推出的功能：
⏳ 后端访问控制列表 (ACL)
⏳ 一键部署
⏳ 更多身份验证方式（Google、LinkedIn 等）
⏳ 实体与其他功能更紧密的集成
⏳ 主题和布局
⏳ 支持显式定义的服务器 API
⏳ 内联 JS — 能够将 JS 代码与 Wasp 代码混合使用！
⏳ TypeScript 支持
⏳ 服务器端渲染
⏳ 可视化编辑器
⏳ 后端支持多种语言
⏳ 功能更丰富、工具更完善的 Wasp 语言

您可以访问https://wasp-lang.dev/docs查看我们的代码库并进行尝试-> 我们一直在寻找关于如何改进 Wasp 的反馈和建议！

我们还在Discord上有一个社区，在那里我们讨论与 Wasp 相关的事情——加入我们，看看我们在做什么，分享你的观点，或者获得 Wasp 项目的帮助。