Valdi: o novo framework cross‑platform do Snapchat para apps nativos com TypeScript

Por que todo mundo está falando de Valdi? Se você é desenvolvedor ou acompanha as novidades do universo mobile, é provável que tenha se deparado nas últimas semanas com esse nome. A Snap, empresa por trás do Snapchat, abriu o código de uma tecnologia que já rodava internamente há mais de 8 anos, voltada a construir interfaces nativas para iOS, Android e macOS usando TypeScript. Então bora entender o que é Valdi, como ele funciona, e por que ele chamou tanto a atenção da comunidade e quais cuidados precisamos ter antes de adotar uma tecnologia que ainda engatinha fora da Snap!

O que é Valdi? O repositório oficial descreve o Valdi como um framework e camada de abstração de views que permite declarar interfaces complexas de forma declarativa. A ideia central é manter a velocidade de desenvolvimento sem sacrificar desempenho nativo. Para isso, o Valdi aplica otimizações em tempo de compilação e deixa a lógica de negócio em TypeScript. O processo funciona assim:

• O Valdi Compiler compila arquivos TypeScript em módulos especiais (.valdimodule). Esses módulos são lidos pelo Valdi Runtime, que os renderiza diretamente nas plataformas nativas – não há web views.
• A sintaxe lembra React, a gente escreve uma árvore .tsx para definir a estrutura da interface e usa o flexbox para layout. Eventos e lógica são implementados em TypeScript.
• O framework foi usado por anos dentro do Snapchat e, segundo a equipe, alimenta grandes partes dos aplicativos de produção. Ao ser aberto, veio com um conjunto de padrões e ferramentas já maduros.

Em resumo, o Valdi tenta ser a ponte entre a familiaridade do ecossistema JavaScript e a necessidade de performance nativa.

Como o Valdi funciona?

Para entender melhor a tecnologia, vale destacar alguns conceitos trazidos pela documentação oficial:

Compilação e renderização nativa

O Valdi não executa JavaScript no runtime para desenhar a UI. Em vez disso, ele compila as views .tsx em um formato nativo (os .valdimodule) que o runtime entende. Esse ciclo lembra mais um build tradicional do que o carregamento dinâmico de código no React Native. Isso traz algumas consequências:

• Desempenho: como a interface já chega “pronta” para o runtime, o Valdi evita o custo de reconciliar um virtual DOM; a atualização incremental é tratada de forma mais barata.
• TypeScript first: todo o código de UI e lógica é escrito em TypeScript. Para desenvolvedores web, isso significa aproveitar tipagem estática e toolings conhecido.
• Sem web views: o framework renderiza componentes nativos. Um botão no iOS é um UIButton, no Android é um Button etc. Isso garante aparência realmente nativa.

Funções de renderização

Em vez de retornar elementos JSX como em React, componentes do Valdi implementam um método onRender() que não retorna nada. Essa função é chamada no ponto exato em que a UI deve ser emitida. O modelo permite um controle refinado sobre o caminho de renderização e torna as re-renderizações incrementais mais baratas. Em outras palavras, o Valdi não faz diffing de árvores; ele reavalia apenas o que precisa.

Exemplo de componente Hello World

Para visualizar isso na prática, vamos olhar um componente simples escrito em com o Valdi. Ele cria uma tela com uma mensagem centralizada. Note que o método onRender() não devolve nada; a marcação é apenas declarada dentro do método:

1import { Component } from 'valdi_core/src/Component';
2
3export class HelloWorld extends Component {
4  onRender() {
5    const message = 'Olá, Valdi!';
6    <Layout
7      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
8    >
9      <Label value={message} />
10    </Layout>;
11  }
12}

Esse componente define uma árvore de layout usando Layout e Label e aplica estilos via flexbox. Ao compilar, o Valdi transforma essa definição em um módulo nativo que será renderizado diretamente em iOS, Android ou macOS.

Integração com código nativo

Um dos pontos fortes da proposta é a facilidade de misturar o Valdi com views nativas. Existem duas maneiras principais:

• Views nativas dentro do Valdi: é possível embutir UIView (iOS) ou View (Android) existentes em um layout com o Valdi usando a tag custom-view. A documentação mostra como criar um factory para o componente nativo e passá‑lo ao contexto Valdi.
• Views do Valdi dentro de apps nativos: também é simples embedar uma view Valdi em um app Swift/Objective‑C ou Kotlin/Java. Um exemplo da doc mostra a criação de um SCValdiHelloWorldView no iOS e a chamada correspondente no Android.

Essa flexibilidade abre portas para adotar o Valdi gradualmente dentro de projetos existentes.

Injetando uma view nativa com custom-view

Quando já existe uma view escrita em Swift, Objective‑C, Kotlin ou Java que você gostaria de reutilizar, basta expor um factory e passá‑lo para o contexto do Valdi. O exemplo da documentação mostra como definir o contexto e usar o elemento custom-view:

1// TypeScript – define o contexto com a factory da view nativa
2export interface MyContext {
3  myCustomViewFactory: ViewFactory;
4}
5
6export class MyComponent extends Component<{}, MyContext> {
7  onRender() {
8    // O atributo viewFactory indica qual view nativa deve ser criada
9    <custom-view viewFactory={this.context.myCustomViewFactory} />;
10  }
11}

Do lado Android, criamos o ViewFactory usando a classe nativa e repassamos para o contexto antes de instanciar o componente:

1// Kotlin – cria um ViewFactory que instanciará MyCustomView por baixo dos panos
2val myCustomViewFactory = runtime.createViewFactory(
3  MyCustomView::class.java,
4  { context -> MyCustomView(context, this.myViewDependencies) },
5  MyCustomViewAttributesBinder(context)
6)
7
8// Passa a fábrica para o contexto
9val context = MyContext()
10context.myCustomViewFactory = myCustomViewFactory
11
12// Cria a view no Valdi com o contexto configurado
13val view = MyComponent.create(runtime, null, context)

Uma abordagem similar pode ser aplicada no iOS usando Objective‑C ou Swift. Exemplo: raw.githubusercontent.com

Embutindo uma view do Valdi em um app nativo

Também é possível usar uma view escrita no Valdi dentro de um aplicativo nativo. Primeiro exportamos o componente para plataformas específicas com o decorator @ExportModel e, em seguida, instanciamos a view no código nativo:

1import { Component } from 'valdi_core/src/Component';
2
3/**
4 * @Component
5 * @ExportModel({
6 *   ios: 'SCValdiHelloWorldView',
7 *   android: 'com.snap.hello_world.HelloWorldView'
8 * })
9 */
10export class HelloWorld extends Component {
11  // ... implementação do componente
12}

No iOS, instanciamos a view exportada passando o runtime do Valdi:

1#import "valdi/ios/SCValdiRuntimeManager.h"
2
3SCValdiRuntimeManager* runtimeManager = [[SCValdiRuntimeManager alloc] init];
4UIView *view = [[SCValdiHelloWorldView alloc] initWithViewModel:nil
5                                 componentContext:nil
6                                      runtime:runtimeManager.mainRuntime];

No Android, o processo é semelhante usando o SupportValdiRuntimeManager:

1import com.snap.valdi.support.SupportValdiRuntimeManager;
2import com.valdimodule.HelloWorldView;
3
4val runtimeManager = SupportValdiRuntimeManager.createWithSupportLibs(this.applicationContext);
5View view = HelloWorldView.create(runtimeManager.mainRuntime);

Esses exemplos mostram como o Valdi pode coexistir com código nativo existente e ser adotado de forma incremental!

Hot reload e produtividade

O Valdi traz uma funcionalidade de hot reload que promete acelerar o ciclo de feedback. Ao salvar um arquivo .ts ou .tsx, a UI é atualizada quase instantaneamente nos dispositivos iOS e Android, sem necessidade de recompilar todo o app. Essa rapidez foi destacada na live da Callstack como um dos pontos que mais chamou atenção.

Princípios de design

A equipe do Snapchat estabeleceu alguns princípios que norteiam o projeto:

• Velocidade de desenvolvimento: escrever views com o Valdi deve ser significativamente mais rápido do que com código nativo.
• Desempenho igual ou melhor que o nativo: as animações e interações devem ser fluidas.
• Estabilidade: a UI nunca deve travar; um bug em um componente não deve derrubar o app.
• Consistência entre plataformas: o que você vê no iOS deve ser o mesmo no Android.
• Capacidade de construir qualquer UI/ani­mação: o framework não deve limitar a criatividade dos designers.

Por que o Valdi foi criado?

Segundo a Callstack, o Valdi nasceu para equilibrar velocidade de desenvolvimento e performance, atendendo à ambição da Snap de manter um único código‑base para múltiplas plataformas. O projeto foi desenvolvido internamente por cerca de oito anos, alimentando partes significativas do Snapchat. Ao abrir o código, a empresa compartilha um conjunto de ferramentas que já foi validado em escala de milhões de usuários. Ainda assim, muitos trechos da documentação parecem ter sido adaptados de materiais internos, o que explica lacunas e instruções confusas que alguns desenvolvedores vêm relatando.

Quais dores o Valdi tenta resolver?

Embora existam diversas soluções cross‑platform (React Native, Flutter, Kotlin Multiplatform, Compose etc.), cada uma traz seus trade‑offs. O Valdi foca em alguns problemas específicos:

• Complexidade do código nativo: criar views com APIs nativas costuma ser lento e sujeito a erros; o Valdi abstrai isso com uma DSL declarativa.
• Iteração demorada: alterar uma view nativa geralmente implica recompilar todo o app. O hot reload do Valdi permite iterar rapidamente.
• Layout e inflar views: otimizar hierarquias nativas pode ser difícil; a engine de layout baseada em flexbox e Yoga lida com isso para você.
• Consistência visual: garantir que uma tela seja idêntica em iOS e Android é trabalhoso. Um dos princípios de design do Valdi é que a aparência seja consistente.

Ainda é cedo para produção?

A empolgação com novidades é natural, mas precisamos ter cautela. A própria live da Callstack observou que muitas partes da documentação ainda carregam marcas de uso interno. O instalador valdi bootstrap funciona, mas a experiência de setup pode ser confusa e faltar suporte mais amplo. Outros aspectos a considerar:

• Ecossistema pequeno: por ser recém‑aberto, há poucas bibliotecas, exemplos e discussões. A comunidade ainda está se formando.
• Suporte limitado de plataformas: atualmente o Valdi foca em iOS, Android e macOS. Não há suporte oficial para Web, Windows ou Linux.
• Comparação com Flutter e React Native: frameworks como Flutter usam sua própria engine (Skia) e têm comunidade madura; React Native tem grande adoção e suporte a módulos. O Valdi ainda não provou seu valor fora da Snap.
• Curva de aprendizado: embora a sintaxe lembre React, a arquitetura com onRender() e compilações pode exigir ajuste de mentalidade.

Minha recomendação é encarar o Valdi como uma tecnologia promissora para experimentação. Baixe o repositório, siga a documentação e veja como se sente trabalhando com a DSL. Mas, para produtos em produção, é super importante aguardar estabilidade, mais exemplos e relatos de uso real.

Resumindo…

O Valdi aparece como mais uma peça no tabuleiro das soluções cross‑platform. A proposta de unir TypeScript, renderização nativa, hot reload e compilação otimizada é, sem dúvida, interessante. A longa gestação dentro da Snap dá certa credibilidade ao projeto. Ao mesmo tempo, a tecnologia ainda está nos primeiros passos para o público geral e carece de documentação e comunidade robusta.

Se você é curioso e gosta de explorar novas ferramentas, vale a pena conhecer o Valdi e testar. No entanto, não se esqueça de avaliar cuidadosamente a maturidade da tecnologia antes de colocar ela para rodar produção!