VanJS: uma estrutura de UI minimalista e ‘Vanilla JavaScript’

O codificador de back-end Tao Xin queria uma estrutura de UI de front-end com uma experiência de desenvolvedor moderna – incluindo uma API fácil de usar e alguma capacidade de reatividade – mas ele também queria a simplicidade do JavaScript básico. Então ele construiu o VanJS, abreviação de Vanilla JavaScript, que é uma estrutura de UI de código aberto.

“Comecei com minhas próprias necessidades, porque precisava construir alguma UI para meu próprio propósito”, disse Xin ao The New Stack. “Mas mesmo para mim, com décadas de experiência em programação, achei muito difícil começar a aprender alguma interface do usuário do zero.”

VanJS é propositalmente sem opinião e com zero dependências, disse ele.

“Quero ter certeza de que estou adicionando o mínimo de restrições possível aos usuários”, disse Xin. “Na verdade, a dependência zero é muito útil para torná-lo sem opinião, porque você não precisa mencionar nada para trabalhar com isso. Quanto mais coisas você menciona, mais dependências você tem, mais restrições você pode ter, porque pode haver regras especiais em qualquer dependência.”

Os casos de uso do VanJS incluem a criação de uma extensão do Chrome ou a construção de um site pessoal – basicamente, em qualquer lugar onde uma estrutura pesada seria um exagero, disse ele.

“Os casos de uso são principalmente aplicações de pequena e média escala”, disse ele. “Compreensivelmente, se você está realmente prestes a fazer algo grande, como o site do Facebook, pode haver compensações a serem observadas. Mas para muitos casos de uso, essas estruturas em grande escala são realmente um exagero – especialmente para ferramentas pessoais, sites pessoais.”

‘Menor estrutura de UI reativa’

VanJS é a “menor estrutura de UI reativa do mundo”, de acordo com seu repositório GitHub. Ele oferece uma alternativa ao React e aos aplicativos GUI nativos. É comparável à UI Swift, que é usada para criar aplicativos para iOS ou até mesmo tecnologias mais antigas, como Objective C, disse Xin ao The New Stack. Mas em vez de usar uma solução de linguagem específica para a UI, ele decidiu adotar uma abordagem mais baseada na web.

“Na minha opinião, os aplicativos baseados na Web podem substituir a maioria dos aplicativos nativos”, disse ele. “Para a maioria dos casos de uso, a diferença real de desempenho é insignificante. Na verdade, você não precisa da estrutura nativa para o desempenho do seu aplicativo.”

Os aplicativos da Web podem ser escritos uma vez e executados em qualquer lugar, acrescentou.

“Se você deseja construir algo com alguma UI, para uma plataforma específica, a barra de entrada é bastante alta”, explicou Xin. “Se você criar um programa para Windows, um programa para iOS, um programa para Android ou um programa para MacOS – eles serão todos diferentes. As tecnologias subjacentes, as estruturas e as bibliotecas que podem usar são completamente diferentes. Então isso é algo, na minha opinião, (onde) a web pode ser facilmente aproveitada. E o desempenho realmente não importa em mais de 90% dos casos de uso.”

Ele continua uma tendência que começou com Angular e depois React tentando construir algo programaticamente de uma forma mais declarativa, explicou ele.

Um complemento minimalista para JavaScript

“A UI do meu aplicativo depende de algum estado interno; e ao lidar com eventos, estou alterando alguns estados. É uma garantia de que todos os estados sejam propagados automaticamente na UI”, disse ele. “Portanto, ao criar a lógica do aplicativo, você não precisa se preocupar em como posso atualizar minha UI. Isso é o que VanJS oferece. É uma estrutura mínima, é um complemento mínimo do Vanilla JavaScript.”

É mínimo, mas oferece uma experiência de desenvolvedor mais moderna para que os programadores possam construir a UI de uma forma mais declarativa.

“Claro, você pode construir um aplicativo com JS vanilla puro, sem nenhuma biblioteca, mas a API que você pode obter está bastante desatualizada”, disse Xin.

VanJS oferece suporte a estados, vinculações de estado e pode propagar alterações de estado para a IU, disse ele – o que significa que quaisquer alterações de estado serão refletidas automaticamente no elemento da IU correspondente, mantendo a exibição e os dados sincronizados. Isso é “muito mais simples em comparação com outras estruturas”, disse ele.

“Ao construir a lógica do aplicativo, você não precisa se preocupar em como posso atualizar minha UI – isso é o que o VanJS oferece”, disse Xin. Também não requer a sintaxe JSX, que produz elementos React.

“Por exemplo, um programa Reativo típico é escrito em JSX”, disse Xin. “Ele não pode nem rodar em um navegador, é preciso usar algumas ferramentas para transpilar para outro formato. E o outro formato é como um código compilado que não é muito legível.”

Vantagens do VanJS

O VanJS, em comparação, é executado no navegador, criando uma experiência REPL (Read-Eval-Print Loop) mais imediata para o programador.

“Se você tiver alguma ideia, você pode abrir o console do desenvolvedor do navegador e digitar algo. Você apenas cria seu aplicativo instantaneamente. Não existe um ciclo tradicional de criação, compilação, implantação e teste. Você apenas cria seu aplicativo instantaneamente, diretamente no navegador, digitando algo no console do desenvolvedor”, disse ele.

Um benefício do VanJS é que ele é ultraleve em diversas frentes, disse ele, incluindo funções limitadas de nível superior expostas na API. Isso, acrescentou ele, facilita o aprendizado.

Sua segunda vantagem é a largura de banda, segundo Xin. Embora o aumento da largura de banda da rede tenha proporcionado aos desenvolvedores a capacidade de “carregar algumas dependências”, o navegador ainda precisa carregar o script, analisá-lo e executá-lo.

“Fiz alguns benchmarks para VanJS. Ele teve um desempenho muito bom, embora não otimizemos demais as coisas, então, entre mais de 100 frameworks, não estamos entre os primeiros… mas estamos realmente à frente da curva”, disse ele.

Integração com LLMs

Ele citou como terceira vantagem a integração com grandes modelos de linguagem (LLMs). Ele está experimentando ensinar aos LLMs como codificar com VanJS. Existe um VanJS App Builder, que é um chatbot com tecnologia de IA que pode criar páginas que os desenvolvedores VanJS podem explorar.

“Este é na verdade um modelo GPT personalizado para construir aplicativos para VanJS. Estou instruindo o modelo de linguagem a apenas ler um tutorial e os exemplos de aplicativos do site”, disse ele. “Ele não tinha nenhum conhecimento sobre VanJS, mas apenas aprendendo o tutorial (e) navegando no site, ele pode construir um aplicativo muito bom e livre de bugs, por alguns exemplos que experimentei.”

Parte do motivo pelo qual funciona tão bem é que grandes modelos de linguagem aprendem melhor com bases de conhecimento menores, portanto, a pequena presença do VanJS lhe dá uma vantagem com LLMs, explicou ele.

Usando VanJS

O VanJS pode ser aproveitado de duas maneiras diferentes, acrescentou Xin. O mais fácil é colar uma linha que carrega a biblioteca do CDN e digitar o código do aplicativo diretamente no arquivo HTML. No entanto, também pode ser usado com npm, que ajuda a gerenciar dependências com melhor suporte para agrupamento, disse ele.

VanJS lançou a versão 1.0 em agosto e será compatível com versões futuras no nível da API para os próximos lançamentos, disse ele. Xin está procurando mais pessoas para usar o VanJS e fornecer feedback no canal de discussão do GitHub.

“Mesmo entre os programadores, a maioria dos programadores não quer construir algo para si”, disse Xin. “Com apenas algumas habilidades básicas de programação, não é tão difícil construir algumas ferramentas para seu próprio uso. Acho que a maioria das pessoas com VanJS consegue construir algo útil em poucas horas.”

A postagem VanJS: uma estrutura de UI minimalista e ‘Vanilla JavaScript’ apareceu pela primeira vez em The New Stack.