#介绍

Zess（发音为 /zɛs/）是一个基于编译器的 JavaScript 框架，专注于构建基于标准 HTML、CSS 和 JavaScript 之上的用户界面。与传统的专注于运行时的框架不同，Zess 将其主要工作转移到编译阶段。通过静态分析和编译时优化，它将声明式组件转换为精简高效的命令式代码。这带来了更少的运行时开销、更快的首屏加载速度，以及接近原生水平的用户体验性能。

#为什么选择 Zess

• 极致性能。通过编译器深度优化生成的精简代码，配合高效的 Signal 响应式系统，实现接近原生应用的流畅体验。
• 完备的类型安全。内置完整的 TypeScript 类型支持，提供从开发到构建的全流程类型检查，显著提升代码健壮性。
• 极速开发体验。基于 Vite 构建系统，提供毫秒级的热更新和高效打包能力，大幅提升开发效率。
• 低学习成本。API 设计参考主流 JavaScript 框架，学习曲线平缓，开发者可以快速上手并熟练使用。

接下来，我们将围绕这些核心优势进行详细介绍，带您深入了解 Zess 的技术特点与使用价值。

#极致性能

传统的 JavaScript 框架通常将组件渲染逻辑放在运行时执行。这意味着在组件初始化和更新时，框架不仅需要遍历组件树、执行渲染函数，还需要通过虚拟 DOM 技术创建虚拟节点树，然后进行复杂的 diff 算法比出新旧虚拟 DOM 树的差异，最后才将差异部分渲染到真实 DOM 中。这种运行时渲染方式带来了较高的运行时开销，尤其是在组件树较大时，虚拟 DOM 的 diff 过程会成为性能瓶颈，导致应用响应延迟。

而 Zess 则不同。它将组件渲染逻辑转移到编译阶段，通过静态分析和优化，生成精简的命令式代码。这些代码直接操作 DOM，避免了运行时的遍历和执行，从而大大减少了运行时开销。

同时，Zess 还内置了高效的 Signal 响应式系统。当组件的状态发生变化时，Signal 会自动触发相关组件的重新渲染。这使得组件的更新过程更加高效，避免了不必要的渲染。

Zess 的性能优势主要基于以下两项技术实现：

• JSX 编译器。Zess 的 JSX 编译器（@zessjs/compiler）不采用 React 中递归生成 createElement 的方式，而是将 JSX 直接编译为命令式的原生 JavaScript 代码，从而减少不必要的运行时函数调用（仅保留与 Signal 响应式系统交互所必需的部分）。在实现上，编译器借助 meriyah 和 astring 等工具提升解析与代码生成效率，编译性能优于传统 Babel。同时，它作为插件集成在 Vite 中，可直接复用 Vite 的 TypeScript 处理能力，降低编译开销，并融入其插件生态。

• Signal 响应式系统。Zess 的 Signal 响应式系统（@zessjs/core）采用现代细粒度响应式方案，通过依赖追踪机制，在状态变化时直接定位并更新受影响的具体界面部分，而非重新渲染整个组件。这种方式最大限度地减少了不必要的渲染操作，显著提升了应用运行效率，带来更快的响应速度和更流畅的用户体验。

#完备的类型安全

Zess 提供开箱即用的 TypeScript 支持，深度集成 TSX 语法，将类型系统与组件开发无缝结合。框架内置完整的类型定义覆盖所有 API、组件和工具函数，确保从代码编写到编译构建的全流程类型安全。这种端到端的类型检查不仅能实时捕捉潜在错误，还能提供智能代码提示和自动补全，显著提升开发效率与代码可靠性。

通过严格的类型约束，Zess 帮助开发者在编码阶段即可发现并修复大部分类型相关错误，有效减少运行时异常，让应用更加稳定健壮。同时，完善的类型文档使团队协作更加顺畅，大幅降低维护成本。

import { render, useSignal, type Component } from '@zessjs/core'

const Counter: Component = () => {
  const [count, setCount] = useSignal(1)
  const increment = () => setCount((count) => count + 1)

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  )
}

render(() => <Counter />, document.getElementById('app')!)

#极速开发体验

Zess 深度集成 Vite 构建系统，为开发者提供极致的开发体验。借助 Vite 的原生 ES 模块支持和轻量级开发服务器，Zess 实现了毫秒级的热更新响应——无论是修改组件样式还是调整业务逻辑，变更都能在瞬间呈现在浏览器中，几乎消除了传统构建工具带来的等待时间。

得益于 Vite 丰富的插件生态系统，Zess 项目可以轻松集成各类开发工具，如 CSS 预处理器、代码质量检查、性能分析等插件，无需复杂配置即可扩展构建流程。这种开放的架构让团队能够根据项目需求灵活定制开发环境，保持高效的个性化工作流。

在生产构建阶段，Zess 充分利用 Vite 的高效构建引擎，通过智能的代码分割和 Tree-shaking 技术，生成高度优化的生产代码，确保应用加载性能最大化。

这一完整的快速开发闭环，从编码调试到构建部署，让开发者能够专注于创意实现而非环境配置，大幅提升整体开发效率和迭代速度。

+

#低学习成本

Zess 在设计上注重开发者的上手体验，通过借鉴主流框架的通用模式和约定，显著降低了学习门槛。对于已经熟悉 React、Solid 等现代前端框架的开发者来说，Zess 的 JSX 语法和组件化开发方式几乎无需额外学习，可以快速将现有知识迁移到 Zess 项目中。

对于前端开发新手，Zess 提供了清晰直观的 API 设计和详尽的文档支持。框架避免了过度复杂的概念，采用符合直觉的组件编写方式，让初学者能够快速理解核心概念并开始构建应用。

这种设计使得团队在引入 Zess 时，无论是已有技术栈的迁移还是新成员的加入，都能以最小的学习成本快速投入开发，有效提升团队的整体效率。

#与其它 JavaScript 框架的区别

#与 React 的区别

React 是当前最流行的前端框架，其虚拟 DOM 机制为开发带来了便利，但运行时进行虚拟 DOM 差异比对不可避免地会产生性能开销。Zess 与 React 的区别主要在于：

1. 编译器驱动：Zess 将核心工作从运行时转移至编译时。通过静态分析生成高度优化的代码，直接操作真实 DOM，减少了浏览器的运行时计算负担。
2. 无虚拟 DOM 与细粒度更新：Zess 摒弃了虚拟 DOM，转而采用基于 Signal 的响应式系统。状态变化时，框架能精确定位并更新依赖该状态的特定 UI 部分，实现了高效的细粒度更新，避免了不必要的组件树遍历。
3. 卓越的运行时性能：这一架构使 Zess 在处理高频状态更新、复杂交互界面时具备显著性能优势，能够提供更流畅的用户体验。

#与 Svelte 的区别

Svelte 是一款创新的编译器优先框架，通过编译时优化实现高效性能。Zess 虽然同样采用编译器驱动的理念，但在开发范式上有着显著区别：

1. JSX 开发范式：与 Svelte 采用模板语法不同，Zess 基于 JSX 进行开发。JSX 允许开发者使用完整的 JavaScript 表达能力来构建界面，逻辑与视图自然融合，无需学习额外语法规则。
2. 符合主流的 API 设计：Zess 的 API 设计更接近 React 等主流框架的编程模型，对现有前端开发者更加友好，有效降低了学习成本和迁移难度。
3. 内置高性能流程控制组件：Zess 提供了如 <For>、<Switch>、<Show> 等内置组件，专门优化常见的流程控制场景。这些组件经过编译器深度优化，能够实现比传统 JavaScript 语句更高效的渲染性能。

#与 Solid 的区别

Solid 是一个创新且高性能的编译型响应式框架，其出色的设计理念和性能表现是 Zess 的重要灵感来源与参考对象。尽管两者在响应式模型和编译思路上有相似之处，但 Zess 在具体实现路径上做出了不同的选择，主要区别体现在：

1. 不同的 JSX 编译策略：Zess 的编译器将 JSX 直接转换为命令式的 DOM 操作函数调用。相比于 Solid 将 JSX 编译为字符串模板再通过 innerHTML 及后续克隆过程进行解析的方式，Zess 的策略避免了模板解析和节点克隆的开销，虽然生成的代码体积可能略有增加，但减少了运行时通过 DOM 树获取并操作节点的成本，执行路径更短，并且生成的代码结构更符合开发者的直觉。同时，Zess 使用 Meriyah 和 Astring 进行代码解析与生成，这一方案在编译速度上相比 Solid 采用的 Babel 工具链通常更具优势。
2. 更精简的运行时与 API 设计：Zess 在保证核心 API 与 Solid 的开发者体验相近的同时，着重对运行时实现进行了精简。它移除了非必要的抽象层，优化了内部实现逻辑，使得 Zess 的运行时库体积更加轻量，在保持强大功能的前提下实现了更优的包大小。

#尝试 Zess

进入快速开始了解如何使用 Zess 快速创建一个项目。