Gea
A compiler-first reactive UI framework that transforms standard JavaScript classes and functions into efficient, surgical DOM updates without a virtual DOM or complex hooks.
Gea is a compiler-first reactive JavaScript UI framework designed to make building web applications straightforward and performant. By leveraging a vertically integrated compiler and runtime, it allows developers to write standard, idiomatic JavaScript—using classes for stores and components—while offloading the complex reactivity wiring to build-time analysis. This approach eliminates the need for a virtual DOM, dependency arrays, hooks, or framework-specific directives, resulting in exceptionally small bundle sizes and high runtime efficiency.
At its core, Gea uses deep Proxy-based stores to track state. Any direct property mutation or array method call is automatically captured and batched via microtasks, ensuring surgical DOM patches that only update the necessary elements. The framework's reactivity system works with standard JavaScript semantics: objects and arrays are passed by reference, enabling natural two-way data flow for complex state, while primitives follow pass-by-value rules.
Some of the key features are:
- Compiler-First Design: The Vite plugin analyzes JSX at build time to generate targeted DOM updates, effectively making the framework runtime disappear in many production scenarios.
- Zero-Concept API: No signals, hooks, or custom primitives are required; developers simply use ES classes, getters, and standard functions.
- Proxy-Based Stores: Deep reactivity allows direct state mutation, supporting nested objects and standard array methods without requiring special state wrappers.
- Tree-Shaken Routing: A built-in client-side router is included but only adds to the final bundle when explicitly imported.
- Accessible UI Primitives: Provides headless UI components built on Zag.js, covering common requirements like menus, dialogs, and tooltips.
- Native Mobile Support: Includes primitives for mobile-specific interactions, such as pull-to-refresh, infinite scroll, swipe gestures, and iOS-style view management.
- Type Safety: Full prop autocompletion and type checking are supported using standard TypeScript declarations, without needing custom framework plugins.
Gea operates by transforming your component templates into efficient HTML string updates. During the build process, the Vite plugin identifies data dependencies within your JSX and wires them to surgical update functions. At runtime, the browser simply executes these direct DOM mutations. This allows the framework to achieve near-zero baseline overhead, with production hello-world builds often shipping as little as 121 bytes of brotli-compressed JavaScript.
Some common use cases include:
- Performance-Critical Web Apps: Building SPAs where minimizing the JavaScript payload and runtime overhead is a primary requirement.
- Interactive Dashboards: Managing complex, nested state structures efficiently using the proxy-based store system.
- Cross-Platform Mobile Web: Developing fluid, mobile-first web applications using the built-in view management and gesture handling tools.
- Rapid Prototyping: Leveraging the no-build browser path to quickly build and iterate on widgets without complex configuration.
Comments
0Markdown is supported.