Projete uma vez, execute em qualquer lugar: um arquivo de UI na Web, iOS e Android
O que realmente é necessário para projetar e executar uma UI na web, iOS e Android: layout e movimento compartilhados, peças específicas da plataforma, testes e onde o ExodeUI se encaixa.
Ponto principal
Projetar uma vez, executar em qualquer lugar significa que um arquivo de origem descreve um componente de UI e cada plataforma o reproduz com um tempo de execução, em vez de reconstruir o mesmo movimento em React, SwiftUI e Flutter. Funciona quando o layout, os estados, o movimento e as entradas residem no arquivo compartilhado e permanece honesto quando a navegação, a acessibilidade e os gestos do sistema permanecem específicos da plataforma. ExodeUI suporta este modelo com pacotes de tempo de execução para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter.
O que “projetar uma vez, executar em qualquer lugar” realmente exige
Requer mais do que um botão de exportação. O arquivo compartilhado deve descrever como o componente é disposto em diferentes tamanhos, sua aparência em cada estado, como ele se move entre os estados e como o aplicativo o direciona com entradas. Cada plataforma também precisa de um tempo de execução que possa reproduzir o arquivo e conectar essas entradas a eventos reais. Se alguma dessas peças estiver faltando, a promessa se transforma em outra transferência.
Arquivo compartilhado versus reconstrução por plataforma
A rota tradicional é projetar uma vez e reconstruir três vezes: web em CSS e JavaScript, iOS em SwiftUI e Android em Kotlin ou Flutter. Cada reconstrução apresenta pequenas diferenças no tempo, espaçamento e manipulação de gestos. Uma rota de arquivo compartilhada mantém a definição do componente em um só lugar e permite que cada plataforma a reproduza. A desvantagem é que um tempo de execução fica entre o arquivo e a plataforma, então você abre mão de algum controle direto sobre a renderização específica da plataforma.
O que deve permanecer específico da plataforma
Um componente compartilhado não deve fingir que todas as plataformas são iguais. Os padrões de navegação, gestos para voltar, caixas de diálogo do sistema, permissões e APIs de acessibilidade são diferentes. O arquivo compartilhado deverá possuir o componente visual interativo; o aplicativo host deve possuir a plataforma chrome e os controles semânticos ao seu redor. Por exemplo, um botão animado compartilhado pode ficar dentro de um elemento de botão nativo que expõe a função e o rótulo corretos.
Como funcionam os tempos de execução
Um tempo de execução lê o arquivo, constrói a árvore visual e a atualiza conforme as entradas mudam. O código do seu aplicativo define entradas como pressionado, desativado ou carregamento, e escuta eventos como confirmar ou descartar. Como a definição visual são dados e não código escrito à mão por plataforma, o tempo de execução é o que torna o mesmo arquivo portátil. O tempo de execução também é uma dependência, portanto, meça seu efeito em sua própria compilação, em vez de presumir que seja gratuito.
Testando o mesmo arquivo em todos os ambientes
Teste o arquivo onde ele será executado, não apenas no editor. Verifique o layout nos menores e maiores tamanhos suportados, verifique cada estado com conteúdo real e teste a entrada de toque, mouse e teclado separadamente. Em seguida, verifique a acessibilidade: ordem de foco, rótulos, movimento reduzido e comportamento do leitor de tela. Um arquivo compartilhado reduz o desvio visual, mas não elimina a necessidade de testar cada plataforma.
Onde ExodeUI se encaixa
ExodeUI armazena um componente em um arquivo .exode aberto e fornece pacotes de tempo de execução para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter. O arquivo pode incluir layout e pontos de interrupção, linhas de tempo, máquinas de estado, física de primavera, entradas e eventos. O mesmo arquivo pode ser editado no navegador ou editor de desktop, e as ferramentas de codificação de IA podem trabalhar nele por meio do servidor MCP.
Quando não usar um arquivo compartilhado
Um arquivo compartilhado não é adequado quando a interface depende muito de APIs somente de plataforma, quando você precisa de controle em nível de pixel sobre a renderização nativa ou quando o componente é principalmente um vídeo ou uma cena 3D. Também será uma má opção se sua equipe não puder testar cada alvo. Nesses casos, o código específico da plataforma é a escolha honesta e um arquivo compartilhado deve abranger apenas as partes que realmente se beneficiam dele.
Trecho de implementação em produção
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()}
/>
);
}Princípios-chave para lembrar
- Projetar uma vez e executar em qualquer lugar precisa de layout, estados, movimentos e entradas compartilhados, além de um tempo de execução por plataforma
- APIs de navegação, permissões e acessibilidade devem permanecer específicas da plataforma
- Um tempo de execução é uma dependência; meça seu efeito em sua construção
- Teste cada alvo quanto ao layout, entrada, movimento e acessibilidade
- ExodeUI fornece tempos de execução para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter