Valdi – framework de UI multiplataforma que oferece desempenho nativo

• Valdi, criado pela Snap, é um framework de UI multiplataforma para iOS, Android e macOS que oferece desempenho nativo, compilando diretamente para views nativas de cada plataforma uma UI escrita de forma declarativa em TypeScript
• Funciona sem WebView nem ponte JavaScript e mantém alto desempenho com recursos como reutilização automática de views, motor de layout otimizado e renderização baseada em viewport
• Acelera o desenvolvimento com hot reload instantâneo, depuração no VSCode e suporte à sintaxe TSX, além de oferecer integração flexível com apps nativos existentes
• Oferece uma arquitetura de integração nativa profunda com bindings com segurança de tipos entre TypeScript e código nativo, suporte a protobuf e integração com C++·Swift·Kotlin
• É uma base escalável para desenvolvimento de UI com recursos avançados como animações em larga escala, gestos e processamento multithread, usando uma tecnologia validada por 8 anos nos apps de produção da Snap

---

Visão geral do Valdi

• Valdi é um framework de UI multiplataforma usado pela Snap há 8 anos em apps de produção
  • Ao escrever a UI em TypeScript declarativo, ela é compilada diretamente para views nativas de iOS, Android e macOS
  • Oferece desempenho nativo sem WebView nem ponte JavaScript
• Atualmente está em beta e deve migrar para uma versão oficial quando a estabilização das ferramentas e da documentação no ambiente open source estiver concluída

Principais recursos e exemplos

• O exemplo básico de componente mostra uma UI simples usando e na classe HelloWorld
• Usa uma estrutura declarativa de componentes baseada em TypeScript e pode ser executado com o mesmo código em cada plataforma
• Disponibiliza materiais para desenvolvimento, como documentação oficial, guia de instalação, referência de API e Codelab

Otimização de desempenho

• Para garantir desempenho nativo, adota a seguinte arquitetura
  • Reutilização automática de views: sistema global de pooling de views para reutilizar views entre telas e minimizar atrasos de inflation
  • Renderização independente de componentes: atualiza apenas componentes individuais sem afetar a renderização do elemento pai
  • Motor de layout baseado em C++: opera na thread principal com overhead mínimo
  • Renderização com reconhecimento de viewport: infla apenas as views visíveis na tela para melhorar o desempenho de rolagem infinita
• Há também o documento relacionado Performance Optimization Guide

Experiência do desenvolvedor

• O recurso de hot reload aplica imediatamente alterações no código
• Suporte a depuração no VSCode: permite definir breakpoints, inspecionar variáveis, fazer profiling de desempenho e capturar heap dumps
• Sintaxe TSX e segurança de tipos oferecem um ambiente de desenvolvimento familiar

Estrutura de integração flexível

• É possível inserir o Valdi em um app nativo existente (Embed Valdi in native)
• Também é possível usar views nativas dentro do Valdi (Embed native in Valdi)
• Por meio de módulos Polyglot, integra-se com segurança de tipos a código C++, Swift, Kotlin e Objective-C
• Com uma arquitetura full-stack, é possível implementar funcionalidades completas usando threads de workers em segundo plano

Integração nativa

• A geração automática de código converte interfaces TypeScript em bindings para Kotlin, Objective-C e Swift
• Por meio de módulos Polyglot, acessa diretamente APIs da plataforma e bibliotecas nativas de terceiros
• A comunicação bidirecional permite trocar com segurança estruturas de dados complexas e callbacks
• O suporte a protobuf permite serialização de dados eficiente

Estabilidade e recursos validados

• É a tecnologia central que impulsiona os principais recursos de produção da Snap
• Suporta animações avançadas, renderização em tempo real e sistemas complexos de gestos
• Inclui diversos recursos como layout Flexbox, workers multithread, animações nativas, reconhecimento avançado de gestos, framework de testes embutido e build integrado com Bazel

Suporte e licença

• Oferece suporte por meio da comunidade no Discord
• É disponibilizado sob a licença MIT, permitindo uso e contribuição livre

[GN⁺]

Comentários no Hacker News

• Na nossa empresa usamos React Native e estamos torcendo muito pelo fim da App Store e das diferenças entre linguagens por plataforma
  No ano que vem, estamos pensando em simplesmente usar um site como base e empacotar o app mobile com WebView, deixando só recursos como notificações, GPS e HealthKit em código nativo
  Hoje em dia, com a ajuda da IA, às vezes parece até melhor fazer a UI separadamente para cada plataforma

  • Eu fiz isso também e não me arrependi. É o que normalmente chamam de “app em WebView”, e dá para oferecer uma experiência bem decente em cada plataforma
    O segredo é não inventar demais nos componentes de UI, e ajustar só algumas coisas por plataforma, como o estilo dos botões ou a pilha de navegação
    Também adicionei recursos offline com Service Worker e executei ferramentas de diagnóstico de rede na inicialização do app para identificar problemas rapidamente
    Mas no meu caso o app era B2B, então essa abordagem funcionava
  • Mesmo assim, se você ainda precisa empacotar um WebView num contêiner nativo, nesse ponto já entrou no inferno da assinatura de código no iOS
    Na minha visão, a web existe justamente como caminho para escapar da App Store e da assinatura de código
    A maioria das funcionalidades dá para fazer na web, e o HealthKit pode ficar num app complementar separado
    Gastar o orçamento de marketing promovendo QR codes ou links talvez seja muito mais eficiente do que competir na App Store
  • Eu tento algo assim a cada 10 anos. No começo a velocidade de desenvolvimento encanta, mas depois a conta chega quando você precisa integrar novos recursos do sistema operacional ou lidar com gestos
    Especialmente no iOS, no momento em que o gesto de “deslizar para voltar” não funciona, você percebe na hora que aquilo é um WebView
  • IA não vai mudar as diretrizes da Apple
    Eu escrevo a UI de negócios uma vez e uso LLM para converter entre React Native e React
    Mas a Apple continua mantendo a regra 4.2 de funcionalidade mínima, que diz que “apps que simplesmente empacotam um site serão rejeitados”
  • Escrever apps complexos e de longo prazo três vezes, uma por plataforma, é praticamente um pesadelo
    Você precisa manter recursos e testes sincronizados em três plataformas, e os desenvolvedores também precisam dominar várias stacks
    A maioria dos usuários mal percebe a diferença entre uma boa implementação com WebView e um app nativo, mas o custo disso é alto demais

• Valdi parece conceitualmente parecido com React Native
  Agora já existem três frameworks cross-platform baseados em React: React Native, Lynx.js(ByteDance/TikTok) e Valdi
  Concorrência é boa, mas fico em dúvida se ele vai conseguir construir tão rápido um ecossistema tão grande quanto o do RN
  O RN teve muitos avanços neste ano, incluindo melhorias no Hermes engine, gerador de bindings nativos, animações multithread e suporte a Tailwind
  O Lynx.js pode até ter mais vantagem por tentar oferecer suporte a frameworks além de React

  • Fui pesquisar um pouco e vi que o Valdi oferece suporte completo a depuração no VSCode
    O Radon IDE do RN é pago, enquanto o Valdi é open source
    Também é interessante que o Valdi use o Hermes engine do RN
    Pela documentação relacionada, fiquei curioso sobre como foi implementado o AOT/JIT

• No passado, ajudei a depurar a versão inicial desse projeto no Snap (Screenshop!)
  Simon era um engenheiro excelente, e fico muito feliz de ver esse projeto ser lançado publicamente
  Parabéns à equipe do Snap

  • Fiquei surpreso que um app aparentemente simples como o Snap tenha investido em um framework de UI cross-platform
    É ainda mais surpreendente porque é um app em que integrações nativas como câmera, AR, notificações e detecção de captura de tela são importantes
  • Já era um projeto muito legal naquela época, e lembro que o objetivo era torná-lo open source
    Fico feliz de ver isso virar realidade
  • Também trabalhei com o Simon e tentamos fazer uma adaptação para web, mas fracassamos
    Ele é uma pessoa muito inteligente, e parabéns para toda a equipe
  • Fico curioso para saber se hoje em dia eu usaria esse framework em um projeto real
  • O nome “Composer” me vem à cabeça

• Uma comunidade no Discord para um framework de UI feito pelo Snapchat? Pessoalmente, isso não me atrai nem um pouco

  • Hoje em dia muitos projetos estão migrando suas comunidades para o Discord
    Não é perfeito, mas talvez ficar de fora disso seja acabar se excluindo da direção que o futuro está tomando
  • Eu também uso Discord com frequência, mas ainda acho desconfortável como comunidade de trabalho

• Na documentação diz algo como “se você expuser objetos C++, Objective-C e Kotlin para TypeScript, isso vira Native Reference; no sentido contrário, JS Value Reference”
  O fato de não haver menção a Swift ou SwiftUI me preocupa um pouco

• Sinceramente, acho difícil confiar num framework feito pelo Snap
  Porque a qualidade do app Android deles no passado era ruim demais

  • Fiquei chocado quando descobri que, antigamente, em vez de tirar uma foto, o app fazia uma captura de tela da visualização da câmera

• Valdi é apresentado como “um framework de UI em que você escreve uma vez em TypeScript e ele roda com desempenho nativo em iOS, Android e macOS”
  Eles enfatizam que não há WebView nem ponte JS

  • “Nós temos os dois. Country e western!”, brincou alguém

• Acho que o certo é simplesmente escrever a UI duas vezes nas linguagens nativas de cada plataforma, e compartilhar a lógica comum com FFI da família C
  Quão difícil isso pode ser?

  • Nós também estamos indo nessa direção. No momento damos suporte só a iOS, mas planejamos expandir para Android depois de obter feedback dos usuários
    A maior parte da equipe usa Android, mas nossos clientes são centrados em iOS, então essa foi a prioridade
    Já fiz app com RN, mas ainda continuo esperando uma solução cross-platform realmente mágica
  • Eu também concordo. O ponto principal é projetar a arquitetura para separar a lógica de negócio da UI
    Assim, web, mobile, desktop, CLI e outras interfaces viram apenas camadas finas que chamam o núcleo
    É difícil ter uma UX perfeitamente consistente, mas no longo prazo isso pode reduzir a dependência de frameworks de terceiros

• Se você tem curiosidade sobre o gerenciamento de estado do Valdi, ele usa diretamente o estilo de componentes de classe do React
  No exemplo da documentação oficial, a estrutura consiste em herdar StatefulComponent e implementar onCreate, onDestroy e onRender

  • Eu também sinto falta dos componentes de classe do React
    Esse modelo atual de usar dezenas de useFunction é propenso a erros e complexo

• Infelizmente, Linux, Windows e alvo HTML não são suportados

[clastneo]

No RN, para a maioria dos apps, a lógica de negócio costuma rodar rápido o suficiente só com JS.
Quando se começa a polir, o problema é que "há muitos casos em que o comportamento difere entre plataformas", o que acaba tornando tudo bem mais difícil de resolver.