Quinoa - Quarkus 扩展，用于轻松创建现代 UI
藜麦……说实话，我一开始并不喜欢，但后来我妻子把它做成类似沙拉的碗，配上牛油果和生三文鱼。现在我真的很喜欢它，只需要一点酱油。我们不要离题太远，我在这篇文章中不是要谈论健康食品，而是关于一个扩展，让我在 Quarkus 中愉快地编写现代 UI 代码。
| 这个扩展不是 Quarkus 的核心扩展，它是 Quarkiverse 的一部分。早期反馈和贡献将有助于该想法的成熟。 |
开始使用
创建一个新的 Quinoa 项目（包含基础的 Quinoa starter 代码）
-
使用 Quarkus CLI
quarkus create app quinoa-app -x=io.quarkiverse.quinoa:quarkus-quinoa
然后启动实时编码，并导航至 http://0.0.0.0:8080/quinoa.html
quarkus dev此处是 Quinoa 指南，您可以深入了解并使用任何基于 Node 的 Web UI 框架（如 React、Angular、Lit、Webpack、Rollup 等）来配置您的应用程序。
一些背景
与 Quarkus 一起，与 React 和 Angular 等 Web 框架交互是一种自然的需求。自 Quarkus 早期阶段以来，许多用户一直在请求顺畅的集成（#588）。这就是我为 Quarkus 创建 Quinoa 扩展的原因。
自 Quarkus 创建（3 年前）以来，许多博客文章应运而生，以帮助解决此问题，其中大多数利用了 frontend-maven-plugin。作为 code.quarkus.io 的创建者，我也面临这种情况，并且像许多其他人一样，我使用该插件填补了这一空白。它肯定完成了它的工作，并且足以满足当前的需求。不幸的是，整个过程可以更加简化和易于上手，它涉及大量的配置，一些棘手的设置来将资源复制到正确的位置并在正确的时间测试前端。实时编码需要启动两个进程和一个代理才能使其协同工作。
开始烹饪
有了这些经验，我处于一个有利的位置，可以为简化我们的生活做出贡献。我关注了所有需求、问题、建议和博客文章，并提出了一个新的扩展，用于使用 Quarkus 创建健康的现代用户界面 (UI)：Quinoa（代表 Quarkus UI with NO hAssle :)）。
Quinoa 负责隐藏 Web UI 构建/连接/实时配置的所有任务，让您可以专注于 Web 应用程序逻辑。无论您是创建全栈单页应用程序还是微服务（微前端）；事情对您来说都会变得更容易。
Node.js 拥有创建现代前端 Web 应用程序的出色工具。Quarkus 拥有广泛的生态系统，可在云端（微服务、rest、数据库、事件、云原生……）构建可靠的现代后端。Quinoa 是将两全其美结合在一起的粘合剂。
NodeJS 项目与 Quinoa 兼容的唯一先决条件是有一个 build 脚本。它应该在特定目录中生成静态文件（index.html、javascript、css 等）。由于团队可能不同，为了让每个人都满意，可以将 Web UI 放在 Quarkus 项目中（默认是 src/main/webui）或项目外（只要它在构建时可在磁盘上访问）。
配置包管理器（NPM、Yarn 或 PNPM）不是必需的（但可以），它将根据项目的 lockfile 自动检测。
Quinoa 将负责生成的 UI 静态文件。在 Quarkus 构建期间，它们将被打包到 jar 或本地二进制文件中。在运行时，它们将像 Quarkus 中的任何其他静态资源一样被高效地提供。UI 开发人员也要求启用单页应用路由，现在这只是一个 布尔值配置。
那么，实时编码呢？它是 Quarkus 的一个流行功能，大多数 NodeJS UI 框架已经有了这样的模式。Quinoa 提供了两个选项
-
委托给 UI 实时编码服务器。您可以配置 UI 服务器的端口。按照惯例，Quinoa 将调用 package.json 中的
start脚本来启动 UI 服务器进程。然后它将透明地将相关请求代理到指定的端口。 -
Quarkus 监控文件，Quinoa 在更改时触发新的 Web UI 构建（您可以为开发和生产配置不同的构建）。
无论哪种方式，在启动 Quarkus 开发模式时，您的 Web UI 将无缝提供（默认在 http://0.0.0.0:8080）。这两种都是可行的选择，让您能够同时对后端和前端进行实时编码，几乎无需任何设置！是不是很棒？
