Home es

Wiki de documentación de eQuantic.UI

🌐 Esta página en: English · Português · Español · Français · Deutsch

Bienvenido al wiki oficial de eQuantic.UI, un framework C# para desarrollo de interfaces ultrarrápido: los componentes se escriben una sola vez en C# y se realizan como DOM + CSS en la web (mediante compilación a TypeScript y Reconciliación Inteligente) y como píxeles de GPU en nativo (mediante el motor propietario Photon: Metal/Vulkan, sin WebView, sin Skia).

Pruébalo primero

ui.equantic.tech/playground: escribe un componente en C#, pulsa Run y mira cómo se renderiza. No es una simulación: el mismo eqc que usa tu build compila el fragmento en el servidor y el resultado se monta en la página, así que lo que ves es lo que el framework hace de verdad. Nada que instalar.

El resto del sitio está en ui.equantic.tech, y es a su vez una aplicación eQuantic.UI que consume los paquetes publicados, una prueba permanente de que el build de quien lo usa funciona sin más que nuget.org.

Cómo leer las marcas de versión

Una funcionalidad lleva la versión en la que salió: Desde 0.2.0-preview.7 bajo un encabezado, o una columna Desde cuando las filas de una tabla tienen edades distintas. Si una sección no tiene marca, es anterior a las marcas, no anterior a la funcionalidad.

Se derivan de git, nunca se escriben de memoria:

c=$(git log --diff-filter=A --format=%h -- path/to/File.cs | tail -1)   # el commit que lo añadió
git tag --contains $c --sort=v:refname | head -1                        # la primera versión que lo lleva

Cada marca se escribe dos veces, y es deliberado. La línea en cursiva es para quien lee esto en GitHub; el comentario HTML a su lado es el mismo hecho en una forma que una máquina puede filtrar, y aquí es invisible:

*Desde **0.2.0-preview.20***  <!-- eq:since 0.2.0-preview.20 symbol="class InView" src="src/eQuantic.UI.Primitives" -->

symbol es aquello DE LO QUE se derivó la versión, para que la siguiente persona pueda volver a ejecutar los dos comandos de arriba contra lo mismo en lugar de fiarse del número. src acota la búsqueda cuando el nombre no es único, y note sustituye a symbol cuando ningún símbolo concreto fija la respuesta.

Dónde está la marca es lo que cubre:

• Bajo un encabezado, cubre esa sección, hasta el siguiente encabezado del mismo nivel o superior.
• Antes de cualquier encabezado, cubre la página entera, que es como una página que no existía en una versión anterior lo dice. Storage, Analytics, Markdown y Mermaid lo hacen hoy.

El sitio las lee; un test rompe el build cuando el comentario y la línea en cursiva no coinciden. Las marcas escritas dentro de una frase o en una celda de tabla son solo prosa, y todavía nada filtra por ellas.

📌 Navegación

🏁 Empieza aquí

• Primeros pasos - Tres comandos y sin Node: instala la plantilla, crea una aplicación, ejecútala. Lo que te da la plantilla, y a dónde apuntar un feed de preview.

🏗️ Arquitectura y conceptos

• Visión general de la arquitectura - El mapa: un vocabulario, dos clases de destino, las capas y las dos pipelines, Server Actions, routing y por dónde seguir leyendo.
• Componentes write-once - LA arquitectura: un vocabulario, dos realizadores, la misma clase en web y en nativo.
• Superficie declarativa - Escribir sin new: la superficie de factories, tus propios componentes sumándose a ella automáticamente, [UiFactory], y el único filo cortante.
• Arquitectura de paquetes - Diseño de paquetes autocontenidos y gestión de artefactos.
• Componentes - El catálogo de componentes: acciones, superficies, navegación, overlays, el ListView con reciclado, la cuadrícula Spreadsheet.
• Estilos - Estilos tipados en C#: un motor, CSS atómico en la web, pintura por GPU en nativo, más la vía de escape de bajo nivel a HTML.
• Localización - Multi-idioma a la manera de .NET: las costuras ya entregadas (SdkStrings, la mano de cultura de Photon) y el diseño del Track L.
• Analytics y GTM - Analytics como una capacidad que la aplicación toma por constructor, con Google Tag Manager como un instalador y no como la interfaz.
• La arquitectura, medida - El índice de docs/ del repositorio: la auditoría de arquitectura, la auditoría de paridad con Flutter, los planes en marcha.

📱 Funcionalidades write-once

• Motor Photon - El motor GPU nativo: núcleo SDF normativo, texto e iconos reales en cada plataforma (CoreText, DirectWrite, el layout de texto de Android), backends Metal + Vulkan, los shells de macOS/iOS/Android/Windows.
• Design System - Tokens tipados, el motor de estilos ATÓMICO (estilos sin CSS), theming IAppTheme/Material 3, densidad y los peldaños de tipografía densa.
• Capacidades - Cámara, ubicación, fotos, biometría, red: servicios tomados por constructor, realizados según el host, y nulos donde el host no los tiene.
• Almacenamiento - Una sola firma sobre el almacén propio de cada plataforma (localStorage, NSUserDefaults, SharedPreferences) y por qué los secretos son un tipo aparte que el navegador no puede proporcionar.
• Formularios - Un formulario es un MODELO, no un control: valores, flags, reglas, errores y el único envío en vuelo viven en Primitives, así que el mismo C# corre en el servidor, en el gemelo del navegador y en una ventana nativa.
• Editor de código - El MODELO de editor sobre el que se construye un IDE: documentos por líneas, resaltado incremental para cinco lenguajes y cualquiera que registre una aplicación, undo que fusiona una ráfaga de tecleo, y el controlador detrás de cada comando de edición.
• Markdown - Markdown renderizado como el design system: un solo parser en cada lado (SSR, Photon, gemelo del navegador), con el tema del propio IAppTheme de la aplicación.
• Mermaid - Diagramas de flujo y de secuencia dibujados por el propio design system, sin mermaid.js; las cercas ```mermaid en Markdown se renderizan de forma nativa.

⚙️ Motor de compilación

• Compilador (CSharpToJs) - Cómo convertimos C# en TypeScript eficiente.
• Funciones de C# compatibles - Matriz detallada de funciones del lenguaje y APIs compatibles.
• Resolución de tipos externos - Cómo resuelve el compilador las clases definidas en archivos externos.
• Flujo de build - Cómo funciona la pipeline de compilación con cero dependencias externas.

⚡ Runtime y rendimiento

• Runtime (TypeScript) - Detalles sobre el reconciliador, la gestión de estado y el ciclo de vida de los componentes.
• Rendimiento y optimización - Keyed Diffing, seguimiento de listeners con WeakMap y otras optimizaciones.

🔌 Servidor e integración

• Integración con el servidor - AddUI(), UIOptions, middleware, SSR y configuración de SEO.
• Gestión de assets - IRequireAssets, IComponentAssetProvider<T> e inyección automática de assets.
• BunPackage - Declara paquetes npm directamente en el .csproj (cero package.json).
• Seguridad y Server Actions - Autorización, validación del payload y protección de las server actions.

🎨 Ecosistema

• Optimización de imágenes - Optimización de imágenes en servidor al estilo Next.js (redimensionado, WebP, caché).
• Gráficos - BarChart y la capa de gráficos, escrita una vez y dibujada en cada destino.
• Iconos - Lucide, Tabler, Heroicons y más.
• Lottie - Animaciones .lottie y .json a través del componente reproductor dotLottie.

🚀 Guía de desarrollo

• Depuración y herramientas de desarrollo - Depuración profesional con logger y overlay de errores.
• Roadmap del proyecto - Lo que viene.

---

Tip

Esta documentación se actualiza a medida que el proyecto evoluciona. Si encuentras alguna inconsistencia, no dudes en reportarla.