推出全新 Front-End Framework
Source: Dev.to
请提供您希望翻译的具体文本内容，我将为您翻译成简体中文。
介绍
WebForms Core — 将 Server‑Command/Client‑Execution 引入前端
前端生态长期被状态驱动和组件化框架所主导。虽然这些方法功能强大，但在以表单为中心、企业级和指令驱动的应用中，它们常常会引入不必要的复杂性。
WebForms Core 的创建正是为了挑战这一假设。
最初作为 Server‑Command/Client‑Execution 技术推出，WebForms Core 侧重于统一不同后端语言的 UI 逻辑，同时保持前端轻量。随着 版本 2 的发布，这一愿景迈出了重要一步。
在此次更新中，WebForms Core 引入了两项突破性功能 — WasmBack 和 FrontBack — 使得 WebForms 类不仅可以在服务器上运行，还可以在 WebAssembly 和 直接在客户端 上运行。于是，WebForms Core 发展为真正的分布式 UI 执行模型，并通过全新的 Commander/Executor 架构形式化。
Commander/Executor 架构将前端从状态和组件依赖中解放出来，转变为指令驱动模型。
本文将探讨 WebForms Core 如今在前端的工作方式，新 FrontBack 机制如何实现客户端执行，以及为何这种方法代表了一种构建基于 JavaScript 的网页界面的根本性新方式。
Source: …
如何在前端使用 WebForms Core
此 WebForms 类使用 JavaScript 编写，运行在前端，与在服务器或 WebAssembly 中运行的其他 WebForms 类不同。
注意 – WebForms Core 包含两部分：
• Commander – 面向所有编程语言的 WebForms 类。
• Executor – 一个前端库，称为 WebFormsJS（实际文件名web-forms.js）。
WebFormsJS 只需放在 HTML 页面<head>中；完成初始配置后，你只需调用 WebForms 类的函数即可。
请 不要 将其与在 Node.js（服务器端）中使用的WebForms.js类混淆。
1. 添加 WebForms 类文件
从下面的仓库复制 WebForms 类文件到你的项目中：
- (链接到仓库)
2. 创建视图（HTML）文件
下面是一个最小的 HTML 页面示例，加载 WebFormsJS 并在页面加载时调用 FrontBack。FrontBack 调用指向包含 UI 逻辑的模块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using WebForms Core</title>
<script src="/path/to/web-forms.js"></script>
</head>
<body>
<button id="Button1">Click me!</button>
<script>
// FrontBack receives the load event and the path to the main module.
window.addEventListener("load", (event) => {
FrontBack(event, "/script/module/main.js");
});
</script>
</body>
</html>为什么采用这种方式？
在典型的服务器端场景中，你会使用exportToHtmlComment的输出渲染页面，WebFormsJS 会自动提取并执行 Action Controls。由于本例使用的是静态页面，我们在load事件中手动触发FrontBack。
3. 编写主模块（/script/module/main.js）
通过 FrontBack 执行的模块必须导出一个 PageLoad 函数，该函数接收事件参数。若需要，还可以在事件参数后传入其他参数。
// /script/module/main.js
import { WebForms, HtmlEvent } from "./WebForms.js";
export function PageLoad(evt) {
const form = new WebForms();
// 为按钮注册前端点击处理器。
form.setFrontEvent("Button1", HtmlEvent.OnClick, "/script/module/change-color.js");
// 返回 WebFormsJS 将要处理的响应。
return form.response();
}4. 编写点击处理器模块（/script/module/change-color.js）
当用户点击按钮时，会执行此模块。它演示了多个 WebFormsJS 功能：
- 向
<body>添加一个新的<h2>标签。 - 设置其内部文本。
- 更改文本颜色。
- 延迟后更改背景颜色。
// /script/module/change-color.js
import { WebForms, InputPlace } from "./WebForms.js";
export function PageLoad(evt) {
const form = new WebForms();
// 向 body 添加 <h2> 并设置内容。
form.addTag("", "h2");
form.setText("", "New H2 Tag");
form.setTextColor("", "orange");
// 2 秒后更改 body 背景颜色。
form.setBackgroundColor(InputPlace.tag("body"), "lightgreen");
form.assignDelay(2000);
return form.response();
}运行示例后，点击 Click me! 将会：
- 插入一个文本为 New H2 Tag 的
<h2>元素。 - 将该文本颜色设为橙色。
- 两秒后，将页面背景颜色改为浅绿色。
获取最新的 WebFormsJS 脚本
可以从官方仓库下载最新版本的 web-forms.js：
- （下载链接）
结论
WebForms Core 的 FrontBack 机制展示了如何通过命令驱动的架构取代传统的以状态为中心、组件繁重的前端模型。将 UI 逻辑迁移到可在客户端（或 WebAssembly）执行的可复用 WebForms 类后，开发者可以获得：
- 统一代码 跨服务器、WebAssembly 和客户端。
- 减小捆绑体积 – 浏览器中仅需轻量级的 WebFormsJS 执行器。
- 清晰的分离：应该发生什么（Commander）与 如何执行（Executor）。
在下一个企业或表单密集型应用中尝试一下，体验更精简、更易维护的前端工作流。
FrontBack 和 WasmBack：分布式 UI 执行框架
随着 FrontBack 和 WasmBack 的引入，WebForms Core 超越了最初的服务器中心模型，成为一个完整的分布式 UI 执行框架。通过采用 Commander/Executor 模式，它提供了一种统一的方式来一次性定义 UI 行为，并在服务器、WebAssembly 和浏览器之间执行。
不同于依赖虚拟 DOM、组件树或响应式状态管理的传统前端框架，WebForms Core 采用 命令导向的方法。UI 变化被表达为显式的、可序列化的命令，并由轻量级的前端执行器执行，使客户端保持简洁且可预测。
该模型在表单驱动的应用、企业系统以及后端与前端逻辑一致性至关重要的项目中尤为强大。同时，新的 FrontBack 能力为现代客户端交互打开了大门，而不牺牲架构的清晰性。
WebForms Core 旨在彻底取代任何前端框架。这项技术引入了一种强大的替代范式——一种优先考虑控制、可移植性和实现透明度的范式。