Diseñe una vez, ejecútelo en todas partes: un archivo de interfaz de usuario en la Web, iOS y Android
Lo que realmente se necesita para diseñar una vez y ejecutar una interfaz de usuario en la web, iOS y Android: diseño y movimiento compartidos, partes específicas de la plataforma, pruebas y dónde encaja ExodeUI.
Idea clave
Diseñar una vez, ejecutar en todas partes significa que un archivo fuente describe un componente de la interfaz de usuario y cada plataforma lo reproduce con un tiempo de ejecución, en lugar de reconstruir el mismo movimiento en React, SwiftUI y Flutter. Funciona cuando el diseño, los estados, el movimiento y las entradas se encuentran en el archivo compartido, y se mantiene honesto cuando la navegación, la accesibilidad y los gestos del sistema siguen siendo específicos de la plataforma. ExodeUI admite este modelo con paquetes de tiempo de ejecución para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI y Flutter.
Lo que realmente requiere "diseñar una vez, ejecutar en todas partes"
Requiere más que un botón de exportación. El archivo compartido debe describir cómo se distribuye el componente en diferentes tamaños, cómo se ve en cada estado, cómo se mueve entre estados y cómo la aplicación lo controla con entradas. Cada plataforma también necesita un tiempo de ejecución que pueda reproducir el archivo y conectar esas entradas a eventos reales. Si falta alguna de esas piezas, la promesa se convierte en otra entrega.
Archivo compartido versus reconstrucción por plataforma
La ruta tradicional es diseñar una vez y reconstruir tres veces: web en CSS y JavaScript, iOS en SwiftUI y Android en Kotlin o Flutter. Cada reconstrucción introduce pequeñas diferencias en el tiempo, el espaciado y el manejo de gestos. Una ruta de archivos compartida mantiene la definición del componente en un solo lugar y permite que cada plataforma la reproduzca. La desventaja es que hay un tiempo de ejecución entre el archivo y la plataforma, por lo que se renuncia a cierto control directo sobre la representación específica de la plataforma.
¿Qué debería seguir siendo específico de la plataforma?
Un componente compartido no debe pretender que todas las plataformas sean iguales. Los patrones de navegación, los gestos hacia atrás, los cuadros de diálogo del sistema, los permisos y las API de accesibilidad difieren. El archivo compartido debe poseer el componente visual interactivo; la aplicación anfitriona debe poseer la plataforma Chrome y los controles semánticos que la rodean. Por ejemplo, un botón animado compartido puede ubicarse dentro de un elemento de botón nativo que expone la función y la etiqueta correctas.
Cómo funcionan los tiempos de ejecución
Un tiempo de ejecución lee el archivo, crea el árbol visual y lo actualiza a medida que cambian las entradas. El código de su aplicación establece entradas como presionado, deshabilitado o cargando, y escucha eventos como confirmar o descartar. Debido a que la definición visual son datos en lugar de código escrito a mano por plataforma, el tiempo de ejecución es lo que hace que el mismo archivo sea portátil. El tiempo de ejecución también es una dependencia, así que mide su efecto en tu propia compilación en lugar de asumir que es gratuito.
Probar el mismo archivo en todos los entornos
Pruebe el archivo donde se ejecutará, no solo en el editor. Verifique el diseño en los tamaños más pequeños y más grandes admitidos, verifique cada estado con contenido real y pruebe la entrada táctil, del mouse y del teclado por separado. Luego verifique la accesibilidad: orden de enfoque, etiquetas, movimiento reducido y comportamiento del lector de pantalla. Un archivo compartido reduce la desviación visual, pero no elimina la necesidad de probar cada plataforma.
Donde encaja ExodeUI
ExodeUI almacena un componente en un archivo .exode abierto y proporciona paquetes de tiempo de ejecución para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI y Flutter. El archivo puede incluir diseño y puntos de interrupción, líneas de tiempo, máquinas de estado, física de resortes, entradas y eventos. El mismo archivo se puede editar en el navegador o en el editor de escritorio, y las herramientas de codificación de IA pueden funcionar en él a través del servidor MCP.
Cuándo no utilizar un archivo compartido
Un archivo compartido no es una buena opción cuando la interfaz depende en gran medida de las API exclusivas de la plataforma, cuando se necesita control a nivel de píxeles sobre la representación nativa o cuando el componente es principalmente un video o una escena 3D. Tampoco encaja bien si su equipo no puede probar cada objetivo. En esos casos, el código específico de la plataforma es la opción honesta y un archivo compartido debe cubrir sólo las partes que realmente se benefician de él.
Fragmento de implementación en producción
import { ExodeUICanvas } from 'exodeui';
// The same component file can be played by the runtime your app already uses.
// Web, React Native, SwiftUI and Flutter packages read the same .exode source.
export function ShareSheet({ open, progress, onClose }) {
return (
<ExodeUICanvas
src="/share_sheet.exode"
inputs={{ open, progress }}
onTrigger={(name) => name === 'close' && onClose()}
/>
);
}Principios clave para recordar
- Diseñar una vez y ejecutar en todas partes necesita diseño, estados, movimiento y entradas compartidos, además de un tiempo de ejecución por plataforma.
- Las API de navegación, permisos y accesibilidad deben ser específicas de la plataforma
- Un tiempo de ejecución es una dependencia; mide su efecto en tu constitución
- Pruebe cada objetivo en cuanto a diseño, entrada, movimiento y accesibilidad
- ExodeUI proporciona tiempos de ejecución para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI y Flutter.