#Introduction

Zess (pronounced /zɛs/) is a compiler-based JavaScript framework for building user interfaces on top of standard HTML, CSS, and JavaScript. Unlike traditional runtime-focused frameworks, Zess shifts the majority of its work to the compile stage. Through static analysis and compile-time optimizations, it transforms declarative components into lean, efficient imperative code. This results in reduced runtime overhead, faster initial page loads, and a user experience that approaches native-level performance.

#Why Choose Zess

• Extreme Performance. Deeply optimized, lean code generated by the compiler, combined with an efficient Signal reactive system, delivers a smooth experience comparable to native applications.
• Comprehensive Type Safety. Built-in full TypeScript support provides type checking throughout the entire development-to-build process, significantly enhancing code robustness.
• Lightning-Fast Development Experience. Built on the Vite build system, it offers millisecond-level hot updates and efficient bundling capabilities, greatly improving development efficiency.
• Low Learning Curve. The API design draws inspiration from mainstream JavaScript frameworks, featuring a gentle learning curve, allowing developers to get started and become proficient quickly.

Next, we will delve into these core advantages in detail, giving you an in-depth understanding of Zess's technical characteristics and value.

#Extreme Performance

Traditional JavaScript frameworks typically execute component rendering logic at runtime. This means that during component initialization and updates, the framework not only needs to traverse the component tree and execute render functions but also uses Virtual DOM technology to create a virtual node tree, then performs complex diff algorithms to identify differences between the old and new Virtual DOM trees, and finally renders the differing parts to the real DOM. This runtime rendering approach incurs significant runtime overhead, especially with large component trees, where the Virtual DOM diffing process can become a performance bottleneck, causing application response delays.

Zess, however, is different. It moves component rendering logic to the compilation stage, generating lean imperative code through static analysis and optimization. This code directly manipulates the DOM, avoiding runtime traversal and execution, thereby greatly reducing runtime overhead.

Furthermore, Zess includes a built-in, efficient Signal reactive system. When a component's state changes, the Signal automatically triggers re-renders of the dependent components. This makes the component update process more efficient, avoiding unnecessary renders.

Zess's performance advantages are primarily based on the following two technical implementations:

• JSX Compiler. Zess's JSX compiler (@zessjs/compiler) does not adopt React's approach of recursively generating createElement calls. Instead, it compiles JSX directly into imperative native JavaScript code, reducing unnecessary runtime function calls (only retaining parts necessary for interaction with the Signal reactive system). In implementation, the compiler utilizes tools like meriyah and astring to enhance parsing and code generation efficiency, offering better compilation performance than traditional Babel. Simultaneously, integrated as a plugin within Vite, it can directly leverage Vite's TypeScript processing capabilities, reducing compilation overhead and integrating into its plugin ecosystem.

• Signal Reactive System. Zess's Signal reactive system (@zessjs/core) employs a modern, fine-grained reactive approach. Through a dependency tracking mechanism, it directly locates and updates the specific parts of the interface affected by state changes, rather than re-rendering the entire component. This method minimizes unnecessary rendering operations, significantly improving application runtime efficiency, resulting in faster response times and a smoother user experience.

#Comprehensive Type Safety

Zess provides out-of-the-box TypeScript support, deeply integrating TSX syntax to seamlessly combine the type system with component development. The framework includes complete type definitions covering all APIs, components, and utility functions, ensuring type safety throughout the entire process from code writing to compilation and building. This end-to-end type checking not only catches potential errors in real-time but also provides intelligent code hints and auto-completion, significantly boosting development efficiency and code reliability.

Through strict type constraints, Zess helps developers discover and fix most type-related errors during the coding phase, effectively reducing runtime exceptions and making applications more stable and robust. Additionally, comprehensive type documentation facilitates smoother team collaboration and significantly lowers maintenance costs.

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')!)

#Lightning-Fast Development Experience

Zess is deeply integrated with the Vite build system, providing developers with an exceptional development experience. Leveraging Vite's native ES module support and lightweight development server, Zess achieves millisecond-level hot update responses—whether modifying component styles or adjusting business logic, changes are instantly reflected in the browser, virtually eliminating the waiting times associated with traditional build tools.

Thanks to Vite's rich plugin ecosystem, Zess projects can easily integrate various development tools, such as CSS preprocessors, code quality linters, and performance analysis plugins, extending the build process without complex configuration. This open architecture allows teams to flexibly customize their development environment according to project needs, maintaining efficient, personalized workflows.

In the production build stage, Zess fully utilizes Vite's efficient build engine, generating highly optimized production code through intelligent code splitting and Tree-shaking techniques, ensuring maximum application load performance.

This complete rapid development loop, from coding and debugging to building and deployment, allows developers to focus on creative implementation rather than environment configuration, greatly enhancing overall development efficiency and iteration speed.

+

#Low Learning Curve

Zess prioritizes developer onboarding experience in its design, significantly lowering the learning barrier by drawing on common patterns and conventions from mainstream frameworks. For developers already familiar with modern frontend frameworks like React or Solid, Zess's JSX syntax and component-based development approach require almost no additional learning, allowing quick knowledge transfer to Zess projects.

For newcomers to frontend development, Zess offers clear, intuitive API design and comprehensive documentation support. The framework avoids overly complex concepts, adopting an intuitive component authoring style that enables beginners to quickly grasp core concepts and start building applications.

This design ensures that when introducing Zess, whether for migrating an existing tech stack or onboarding new team members, teams can ramp up quickly with minimal learning costs, effectively boosting overall team efficiency.

#Differences from Other JavaScript Frameworks

#Differences from React

React is currently the most popular frontend framework. Its Virtual DOM mechanism brings convenience to development, but the runtime diffing of the Virtual DOM inevitably incurs performance overhead. The main differences between Zess and React are:

1. Compiler-Driven: Zess shifts core work from runtime to compile time. Through static analysis, it generates highly optimized code that directly manipulates the real DOM, reducing the browser's runtime computational load.
2. No Virtual DOM & Fine-Grained Updates: Zess abandons the Virtual DOM in favor of a Signal-based reactive system. When state changes, the framework can precisely locate and update the specific UI parts that depend on that state, achieving efficient fine-grained updates and avoiding unnecessary component tree traversal.
3. Superior Runtime Performance: This architecture gives Zess a significant performance advantage when handling high-frequency state updates and complex interactive interfaces, enabling a smoother user experience.

#Differences from Svelte

Svelte is an innovative compiler-first framework that achieves high efficiency through compile-time optimizations. While Zess also adopts a compiler-driven philosophy, it has significant differences in development paradigm:

1. JSX Development Paradigm: Unlike Svelte's template syntax, Zess is based on JSX for development. JSX allows developers to use the full expressive power of JavaScript to build interfaces, where logic and view naturally blend without needing to learn additional syntax rules.
2. Mainstream-Aligned API Design: Zess's API design is closer to the programming model of mainstream frameworks like React, making it more friendly to existing frontend developers and effectively reducing the learning cost and migration difficulty.
3. Built-in High-Performance Control Flow Components: Zess provides built-in components like <For>, <Switch>, and <Show>, specifically optimized for common control flow scenarios. These components are deeply optimized by the compiler, enabling more efficient rendering performance than traditional JavaScript statements.

#Differences from Solid

Solid is an innovative and high-performance compiled reactive framework, whose excellent design philosophy and performance are an important inspiration and reference for Zess. Although the two share similarities in their reactive model and compilation approach, Zess has made different choices in its specific implementation path. The main differences are:

1. Different JSX Compilation Strategy: Zess's compiler transforms JSX directly into imperative DOM operation function calls. Compared to Solid's approach of compiling JSX into string templates and then parsing them via innerHTML and subsequent cloning processes, Zess's strategy avoids the overhead of template parsing and node cloning. While the generated code size might be slightly larger, it reduces the cost of runtime node acquisition and manipulation via the DOM tree, has a shorter execution path, and produces code structure that aligns better with developer intuition. Furthermore, Zess uses Meriyah and Astring for code parsing and generation, a solution that often offers advantages in compilation speed compared to the Babel toolchain used by Solid.
2. Leaner Runtime & API Design: While ensuring a developer experience similar to Solid's core APIs, Zess focuses on streamlining the runtime implementation. It removes non-essential abstraction layers and optimizes internal logic, resulting in a lighter-weight runtime library for Zess, achieving a better bundle size while maintaining powerful functionality.

#Try Zess

Head over to Quick Start to learn how to quickly create a project using Zess.