vanjs-org/van
Van
Van es un framework de UI reactivo en JavaScript diseñado para construir interfaces de usuario con enlace de estado y actualizaciones automáticas del DOM sin un DOM virtual. Funciona como un framework frontend sin compilación (buildless), permitiendo la creación de aplicaciones reactivas utilizando funciones estándar de JavaScript que se ejecutan directamente en el navegador sin un paso de compilación.
El framework incluye un gestor de estado reactivo que utiliza objetos basados en proxy para rastrear dependencias y activar actualizaciones de UI dirigidas. Proporciona una herramienta de renderizado del lado del servidor para generar HTML estático y un proceso de hidratación del lado del cliente correspondiente para adjuntar interactividad. Para aplicaciones de múltiples vistas, incluye un router del lado del cliente para gestionar la navegación y las transiciones de estado.
El proyecto cubre una amplia gama de capacidades, incluyendo composición declarativa del DOM, enlace de estado a propiedad y renderizado de listas reactivas. Soporta gestión de estado avanzada a través de objetos de estado derivados, actualizaciones por lotes y serialización de estado. Adicionalmente, el framework soporta la generación de elementos SVG y MathML.
El entorno de desarrollo soporta verificación de tipos estática y autocompletado a través de la integración con TypeScript.
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.
