vanjs-org/van
Van
Van is a reactive JavaScript UI framework designed for building user interfaces with state binding and automatic DOM updates without a virtual DOM. It functions as a buildless frontend framework, allowing the creation of reactive applications using standard JavaScript functions that run directly in the browser without a compilation step.
The framework includes a reactive state manager that uses proxy-based objects to track dependencies and trigger targeted UI updates. It provides a server-side rendering tool for generating static HTML and a corresponding client-side hydration process to attach interactivity. For multi-view applications, it includes a client-side router to manage navigation and state transitions.
The project covers a broad range of capabilities including declarative DOM composition, state-to-property binding, and reactive list rendering. It supports advanced state management through derived state objects, batched updates, and state serialization. Additionally, the framework supports the generation of SVG and MathML elements.
The development environment supports static type checking and autocomplete via TypeScript integration.
Features
- Reactive UI Frameworks - A framework for building interactive user interfaces that automatically synchronize with state changes.
- Declarative UI Composition - Offers a framework for building reactive user interfaces using declarative functional composition and direct DOM updates.
- UI Component Composition - Uses standard JavaScript functions to declaratively compose the user interface without a compilation step.
- Reactivity Dependency Graphs - Tracks dependencies between state and UI elements to ensure only the necessary nodes are updated.
- Single Page Applications - Provides a framework for building multi-view applications with client-side navigation and dynamic content updates.
- Data-to-UI Bindings - Synchronizes JavaScript object properties with visual element content in real-time.
- State-to-UI Mapping - Synchronizes reactive state objects with UI properties to automatically update element attributes.
- Reactive State Systems - Implements granular dependency tracking to trigger targeted UI updates when state values change.
- Proxy-Based Reactivity - Utilizes JavaScript proxies to intercept property mutations and trigger automatic UI updates.
- User Event Handlers - Allows assigning handler functions to element properties to respond to user interactions like clicks and inputs.
- Direct DOM Mapping - Bypasses the virtual DOM to update real DOM nodes directly when state changes.
- Buildless DOM Composition - Enables building user interfaces and layouts directly in the browser without a compilation or bundling step.
- Buildless - Enables building reactive user interfaces directly in the browser without any compilation or build step.
- Client-Side Routers - Includes a client-side router to manage navigation and view state transitions without reloading the page.
- Element Creations - Provides tag functions for programmatically generating HTML elements with properties and children.
- Property Bindings - Synchronizes application state with DOM element properties dynamically.
- UI State Synchronization - Ensures DOM elements automatically synchronize and update whenever the underlying reactive state changes.
- Buildless Frameworks - Offers a reactive development environment that runs directly in the browser without a compilation step.
- Reactive State Managers - Provides a proxy-based state manager to synchronize application data across UI elements automatically.
- Client-Side Hydration - Enables attaching reactive state bindings to pre-rendered static HTML for immediate interactivity.
- Partial DOM Updates - Optimizes performance by mutating existing DOM elements during state updates instead of regenerating subtrees.
- Isomorphic Component Definitions - Provides abstract object definitions that allow components to run identical code in both server and client environments.
- List Rendering - Implements reactive list rendering that updates only modified items in the DOM.
- Server-Side Rendering with Hydration - Implements a full workflow for generating initial HTML on the server and hydrating it on the client.
- Server-Side Renderers - Generates static HTML strings on the server to optimize initial page load and SEO.
