我们杀死了怪物：WebForms Core 2.0 发布，前端恐怖时代的终结

发布: 19小时前 (2025年12月25日 GMT+8 06:28)

17 min read

Source: Dev.to

引言：现代噩梦的解剖

网页开发的世界已经偏离了正轨。前端曾经是一个用于展示信息的简单工具，如今却演变成了一个怪物。它用沉重的框架、无尽的工具链、数十兆字节的 node_modules，以及令人头晕的状态管理复杂性，把开发者榨干。

在 Elanat，我们已经斩杀了这个怪物——不是通过另一个竞争工具，而是通过一次革命性的范式转变。WebForms Core 2.0 是对现代框架（如 React 和 Angular）乃至混合解决方案（如 Blazor Server）未能回答的问题的最终答案。

WebForms Core 技术的第 2 版已经发布，C# 中的 WebForms 类已与 WebFormsJS 库保持一致。

PHP 的 WebForms 类也已对齐至第 2 版，我们很快会更新其他语言（Python、Go、Java 等）的 WebForms 类，使其与 WebFormsJS v2 对齐。

≈ 99 % 性能保证

在本次发布中，我们不仅测试了新功能，还对所有 WebForms Core 功能从头到尾进行了彻底评估，修复了遇到的任何 bug（大多数都是小问题）。我们采用了回归测试模型：每完成一轮修正后，就重新测试每个系统功能，以确保新更改不会破坏之前已正常工作的部分。在测试性能的同时，我们还根据识别出的需求添加了若干新功能。

WebForms Core vs. Front‑end Frameworks (React, Vue, Angular)

WebForms Core 的第 2 版已经通过提供全新且多样的功能，在传统前端框架上取得了显著优势。唯一的限制是相较于这些框架，生态系统和开发者社区规模较小，因此资源、插件和公开文档没有 React 或 Vue 那么丰富。我们将通过组织文档和创建各种模块包来尽快弥补这一点。

WebForms Core 是最全面的全栈开发平台，也是 服务器驱动 UI 思想的卓越实现。

如何使用 WebForms Core 技术？

需要两个步骤：

客户端 – 将 WebFormsJS 脚本添加到你的 HTML 页面中。
```

```
获取脚本的地址：

服务器端 – 为你的编程语言导入 WebForms 类。

获取类的地址：

操作方法 – 在服务器端创建 WebForms 类的实例，并使用其强大的功能。

WebForms form = new WebForms();
form.AddTag("", "h3");
form.SetTextColor("", "lightblue");
form.SetText("", "Hello World!");
form.AddState("#state1");
Write(form.Response());

为什么当前模型已经过时？

几乎整个网络今天都基于两种模型：

模型	描述
数据流 (JSON/HTML)	原始数据被发送，客户端必须决定如何处理。
差异流 (Virtual DOM)	在内存中比较结构（diff），以应用更改。

WebForms Core 2.0 通过引入 命令式指令流 消除了这些耗时、资源密集的步骤。服务器不再发送整套数据或用于比较的 HTML，而是发送 直接指令。

在 Blazor Server 中，服务器必须维护客户端 DOM 的副本并执行繁重的 diff 计算。
在 WebForms Core 中，服务器是无状态的，只需说一句：“把 Main 标签的颜色改为绿色。” 就这么简单！这带来了几乎为零的延迟、极低的带宽消耗以及惊人的服务器可扩展性。

WebForms Core 2 中最重要的功能

1. 主页面（Master Pages）和 Service Worker

也许版本 2 最惊艳的部分是 Master Pages 系统。通过在客户端结合 Service Worker 和 routeAlias，应用的主布局会被永久缓存。当用户点击链接时，系统识别该层已经在内存中，发送 Post‑Back 头部，服务器只会传输针对 “ 部分的命令。

这样你就拥有了服务器的强大功能，同时拥有原生应用的速度。

2. WasmBack 与 FrontBack

我们打破了编程语言的边界。

WasmBack – 允许 Rust、C++、Go、C# 等语言直接在浏览器（WebAssembly）中使用 WebForms 类。
FrontBack – 对于 2 % 需要纯客户端逻辑的场景，你再也不必编写混乱的 JS 代码。FrontBack 让 JS 模块生成 WebForms 命令。

WebForms Core 现在成为了一个“Web 操作系统”，能够使用所有语言进行交流。

3. 从服务器对 DOM 进行单元测试

前端单元测试通常脆弱且慢。WebForms Core 让你编写服务器端测试，断言服务器将要发出的确切 DOM 命令，使测试具有确定性、快速且易于维护。

4. 智能表单提交：仅发送真正改变的内容

传统框架会盲目重新发送整个表单负载，迫使服务器重新验证、解析和处理用户根本未触碰的数据。

WebForms Core 2.0 引入 Smart Form Submissions。只有 实际改变 的字段会被传输到服务器。这不是表面的优化，而是 感知状态的协议特性。

框架会跟踪初始状态和当前状态，计算校验和，确保未改变的数据永不重新发送。

结果

请求负载大幅缩小
服务器处理更快
明确识别真实的用户意图
为安全的大规模企业表单奠定基础

这才是第一次真正正确的表单提交方式。

5. TriggerEvent：对用户交互的编程控制

使用 TriggerEvent，服务器可以执行任何 DOM 事件——click、input、submit、change 或自定义事件——而无需用户交互。

这使得

完全自动化的 UI 流程
无需客户端脚本的复杂编排
服务器驱动的 UX 逻辑保持确定性且可测试

服务器不再是被动响应 UI。
服务器在主动编排 UI。

6. 自定义 DOM 事件：扩展浏览器的事件模型

WebForms Core 2.0 允许开发者 在服务器上定义全新的 DOM 事件，并无缝绑定到客户端元素。这些自定义事件表现得像一等的浏览器事件：

可以被触发
可以被监听
可以通过指令管道传递
可以与原生事件组合使用

这实际上 使用服务器逻辑扩展了浏览器的事件系统——这是主流框架所不具备的功能。

7. 异步指令执行：无阻塞 UI 且不增加复杂度

Async Commands 可以使用 async/await、延迟执行或独立运行——而不会打乱执行顺序或破坏 UI 完整性。

重操作被隔离
轻量 UI 更新保持即时
没有竞争条件
没有回调地狱

这是真正的 异步 UI 编排，由服务器控制且具确定性。

8. 自动 Gzip：把带宽视为一等公民

框架原生支持

对外发送数据的 Gzip 压缩
对进来的表单数据和文件上传的自动解压

透明适用于

Action Controls
表单提交
文件上传
大容量负载

开发者无需编写 任何额外代码。

9. JavaScript 模块，无依赖混乱

WebForms Core 2.0 完全拥抱 ES Modules：

原生 type="module" 支持
动态加载与懒加载
自动依赖解析
与服务器指令的无缝协同

这样即可在保持代码整洁的同时，利用现代 JavaScript 的模块化优势。

ic 异步加载

安全检测方法是否存在
从服务器命令直接调用

您可以获得现代 JavaScript 功能，无需将控制权交给客户端框架。

10. 智能模板与深度替换引擎

智能模板 提供

任意位置的占位符（文本、属性、标签名）
深度遍历替换
部分且精确的更新
可从 HTML、JSON、XML 或 INI 获取外部模板

模板成为 活的结构，从而实现

大规模 UI 重用
超高速更新
零重新渲染

WebForms Core 2.0 — 技术参考（功能列表）

Version 2 的 WebForms Core 技术包含了全新、更强大且更丰富的功能。以下是完整的功能列表。

1. 架构

1.1 命令执行模型

优化预运行队列系统
动态命令队列管理
防止并发请求冲突
有序命令执行
防抖延迟

1.2 异步 & 运行时模型

完全异步的 WebFormsJS 架构
异步操作控件
可 Await 的服务器命令
异步缓存与会话访问
命令之间的异步延迟
异步 JavaScript 模块加载
异步 FrontBack 执行
异步 WasmBack 响应处理

1.3 布局 & 渲染策略

主页面（Master Pages）架构
通过 Post‑Back 头部进行局部渲染
布局缓存
跨路由复用缓存布局
Body onload 路由检测
Post‑Back 时跳过布局渲染
合并 HTML + ActionControl 响应
注释模式渲染

2. 通信

2.1 HTTP & PostBack

PostBack / GetBack / TagBack
Action Control 数据提交
提交按钮支持
表单提交检测
表单头部注入（form=true）
仅变更表单提交
序列化事件数据传输
SendBack（非 URL 编码负载）
与 GraphQL 兼容的传输
GET 编码优化

2.2 WebSocket

基于命令的 WebSocket 响应
WebSocket 表单检测
优化的数据传输
混合 HTML + Command 响应
WebSocket 失败时重试

所有功能均为原生、确定性实现，无需外部库。

WebForms Core 2.0 – 功能概览

1. Ket Logging

队列安全的 WebSocket 执行

2. Server‑Sent Events (SSE)

原生 SSE 支持
从 View / Controller / Model 广播 SSE
SSE ExportToLineBreak
SSE 重试与重新连接处理
SSE 控制台日志
SSE 配置选项
无需中间件依赖的 SSE

3. 网络优化

自动 GZIP 数据压缩（客户端 → 服务器）
自动 GZIP 文件压缩（客户端 → 客户端）
小型命令负载
跳过未改变的数据传输

4. DOM 与 UI 命令

4.1 DOM 选择

高级标签选择器
多标签选择 (*)
跨输出的 Query‑All 支持
深层 DOM 遍历
外部 HTML 标签提取

4.2 DOM 操作

替换（文本 / 属性 / 值）
基于占位符的替换
深层替换遍历
更新结构
增加 / 减少数值
追加 / 插入 / 删除操作
反射（属性与子节点继承）
HTML 部分注入
基于模板的渲染

4.3 UI 状态与交互

TriggerEvent（人工 DOM 事件）
自定义 DOM 事件
窗口级事件绑定
元素到达事件
滚动到底部事件
InputPlace（窗口 / 元素）
自动加载器系统
防止闪烁
请求期间的交互锁定

5. 状态、存储与安全

5.1 状态管理

客户端缓存管理
客户端会话管理
添加 / 插入缓存值
添加 / 插入会话缓存值
可 await 的存储操作
带变量的 FormatStorage
模板存储
将变量注入存储

5.2 完整性与验证

校验和生成
SHA‑256 哈希支持
服务器端校验和验证
哈希存储与查找
HasHash 条件检查
检测已执行操作的控制
防止重复提交
数据完整性校验

5.3 安全控制

安全配置选项
XSS 缓解层
模块执行限制
方法存在性验证
浏览器能力检测
不支持特性的日志记录

6. 运行时扩展与跨平台

6.1 WasmBack

在 WebAssembly 中执行 WebForms
共享 WebForms 类（服务器 & WASM）
在 WASM 响应中检测 Action‑control
多语言支持（C#、Rust、Go、C++）
将 WASM 命令应用到 HTML

6.2 FrontBack

无服务器的 WebForms 执行
基于 JavaScript 的 WebForms 类
前端页面加载时执行
在 JS 中生成 HTML 与 Action‑control
前端 / 服务器混合场景

6.3 JavaScript 模块

原生 ES‑module 支持（强制 type="module"）
动态模块加载
模块方法发现
将 JavaScript 函数分配给 DOM 事件
从服务器调用自定义 JS 函数

7. 工具、测试与诊断

7.1 测试

集成单元测试工具
DOM 相等性断言
深层 DOM 比较
表单值断言
属性与类比较
非阻塞测试报告
回归测试策略

7.2 日志与调试

控制台消息注入
结构化日志系统
错误分类
网络错误检测
重试日志
浏览器支持日志

7.3 可靠性与控制

重试机制
最大重试次数
重试间隔控制
请求队列管理
带 ID 的间隔分配
删除间隔支持

8. Fetch 与外部资源

InputPlace 升级用于 HTML 获取
外部 HTML 模板获取
JSON 获取（嵌套键）
XML 获取（XPath）
INI 获取（键 / 行索引）
事件获取（evt）
转义获取（@@）
位置属性访问（href、pathname、host、…）

9. Progressive Web App (PWA)

Service‑worker 集成
路

e‑alias 配置

增强的离线能力
一次性布局获取
缓存布局重新激活
类原生应用的导航

这些功能使 WebForms Core 2.0 成为最强大的全栈开发基础设施，彻底消除服务器与客户端之间的界限。

注意： 上述列表适用于版本 2。早期版本也引入了强大的功能，为这项技术铺平了道路。

为什么这是一次革命？

想象一下，一个花了多年时间掌握复杂 JavaScript 框架的开发者，突然意识到只用他们的 C#（或任何流行的编程语言）知识，就能构建实时、PWA 就绪、高性能的应用。这就是 “技术” 变成 “魔法”。

前端怪兽已死。 范式转变：一次编写，随处控制。

为什么 WebForms Core 脱颖而出

无与伦比的 DOM 操作
完整的事件管理
高级状态管理
强大的模板系统
服务器端管理，客户端重负载处理
前所未有的全面性——一站式打包
改变我们对前端/后端的思考方式
基于服务器驱动的离线性能

引言：现代噩梦的解剖

WebForms Core vs. Front‑end Frameworks (React, Vue, Angular)

如何使用 WebForms Core 技术？

为什么当前模型已经过时？

WebForms Core 2 中最重要的功能

1. 主页面（Master Pages）和 Service Worker

2. WasmBack 与 FrontBack

3. 从服务器对 DOM 进行单元测试

4. 智能表单提交：仅发送真正改变的内容

5. TriggerEvent：对用户交互的编程控制

6. 自定义 DOM 事件：扩展浏览器的事件模型

7. 异步指令执行：无阻塞 UI 且不增加复杂度

8. 自动 Gzip：把带宽视为一等公民

9. JavaScript 模块，无依赖混乱

10. 智能模板与深度替换引擎

WebForms Core 2.0 — 技术参考（功能列表）

1. 架构

1.1 命令执行模型

1.2 异步 & 运行时模型

1.3 布局 & 渲染策略

2. 通信

2.1 HTTP & PostBack

2.2 WebSocket

WebForms Core 2.0 – 功能概览

1. Ket Logging

2. Server‑Sent Events (SSE)

3. 网络优化

4. DOM 与 UI 命令

4.1 DOM 选择

4.2 DOM 操作

4.3 UI 状态与交互

5. 状态、存储与安全

5.1 状态管理

5.2 完整性与验证

5.3 安全控制

6. 运行时扩展与跨平台

6.1 WasmBack

6.2 FrontBack

6.3 JavaScript 模块

7. 工具、测试与诊断

7.1 测试

7.2 日志与调试

7.3 可靠性与控制

8. Fetch 与外部资源

9. Progressive Web App (PWA)