Transcript
00:00:00Este é o OpenTui, uma biblioteca movida a Zig para construir interfaces de terminal com bindings
00:00:04para React, Solid e FreeJS, para que você possa criar TUIs de alto desempenho da mesma forma que cria
00:00:09aplicações web. Foi criado pela Anomaly, a equipe por trás do OpenCode, que é um popular
00:00:14agente de codificação de código aberto, para realmente alimentar a interface de usuário do OpenCode, usada por milhões de
00:00:19pessoas regularmente. Mas como essa nova biblioteca se compara com a outra ferramenta popular
00:00:24de interface de terminal React que já existe há muito mais tempo e é usada para alimentar muitos
00:00:29agentes de codificação? Inscreva-se e vamos descobrir!
00:00:35Então, Ink é a biblioteca ideal para construir interfaces de terminal com React. Eu até fiz um
00:00:40vídeo sobre isso que você pode conferir aqui. Mas ela tem alguns problemas. Primeiro
00:00:44de tudo, aplicativos simples usam mais de 50 MB de memória e têm um limite fixo de 30 fps, o que
00:00:51é aceitável para a maioria dos aplicativos. Mas se você estiver criando um aplicativo que transmite muito texto,
00:00:56como um agente de codificação, então o limite de quadros faz com que tudo pareça lento. Então, a equipe
00:01:00da Anomaly, que originalmente usou Golang com Bubble Tea para construir o OpenCode, queria reescrevê-lo
00:01:06em TypeScript sem usar o Ink. Então eles criaram o OpenTui. Quer dizer, eles adotaram o OpenTui. Eles não
00:01:13construíram exatamente do zero porque Commander FX já estava criando uma biblioteca de terminal
00:01:18baseada em Zig. Então a Anomaly o patrocinou e construiu o OpenTui sobre o trabalho dele. Então, o núcleo Zig faz todo o
00:01:24trabalho pesado de renderização e os bindings de TypeScript permitem que você escreva componentes de interface em React ou Solid. Mas a
00:01:30parte realmente inteligente é a interface de função estrangeira (FFI) do BUN, que permite que você fale diretamente
00:01:36do TypeScript com o código nativo Zig sem muito atraso, o que é o que torna o OpenTui super
00:01:42performático. Ele usa Yoga para layouts Flexbox, vem com componentes integrados como inputs e selects,
00:01:47e há até um pacote 3.js que permite renderizar gráficos 3D WebGPU dentro do terminal,
00:01:54o que é incrível. Na verdade, vamos ver o OpenTui em ação tentando criar uma demonstração bem simples. Existem
00:01:59muitas maneiras de configurar um projeto básico com OpenTui. Pessoalmente, gosto de usar “bun create-tui”
00:02:04porque ele oferece um assistente muito útil que você pode usar para dar um nome ao seu projeto e escolher
00:02:09o modelo que deseja usar. Agora vou escolher React, mas explicarei mais tarde no vídeo
00:02:13as diferenças entre esses três modelos. Então, uma vez feito isso, você obtém alguns arquivos padrão
00:02:17com um index que executa um projeto básico em tela cheia. E se olharmos para o código,
00:02:21podemos ver aqui na linha 15 que ele está usando o “CreateCLI” renderer para utilizar o motor de renderização
00:02:27do OpenTui. E abaixo dele, há o “CreateRoot”, que renderiza o componente do aplicativo. E se você estiver familiarizado
00:02:32com o React, este é o código que o monta em um arquivo HTML. Mas como estamos renderizando em um terminal,
00:02:37este projeto não possui um index.html; em vez disso, ele usa um reconciliador React personalizado que usa
00:02:42caixas de terminal e texto em vez de componentes HTML. Acima disso, temos o JSX que usa o componente Box
00:02:49e algumas propriedades do Yoga Flexbox para alinhar a caixa testada dentro dele, que renderiza uma fonte ASCII e algum texto básico.
00:02:55Agora, se você não quisesse que fosse um aplicativo de tela cheia, o OpenTui suporta vários modos de tela.
00:03:00E podemos mudar este para “split footer” com uma altura de rodapé, que fixa a renderização em uma
00:03:05região reservada na parte inferior do terminal. Mas vamos tentar fazer algo um pouco mais interessante do que apenas mudar
00:03:10o modo de tela. Aqui está uma TUI básica com algum título e um campo de entrada de nome. Agora, veja isso. Com o OpenTui, você obtém
00:03:17responsividade de graça. Então, não importa a largura do meu terminal, tudo ainda parece bom. E se
00:03:21darmos uma olhada no código, ele está usando uma sintaxe React muito familiar. Então, aqui, temos um “use
00:03:26state” que define o nome. E no input, estamos atualizando o nome na propriedade “onInput”. E isso
00:03:32é alterado no texto. Agora, uma coisa muito legal que o OpenTui faz é uma espécie de recarregamento ao vivo sem o
00:03:37HMR. Então podemos ver aqui, se eu mudar o texto para “adeus” e salvar o arquivo, ele é automaticamente
00:03:43atualizado. E é legal ter um input responsivo, mas às vezes o texto simplesmente não aparece. Isso pode
00:03:48ser corrigido adicionando uma largura, o que torna as coisas muito mais fáceis. E com o componente Box, temos
00:03:52algumas propriedades muito legais como borda e cor de fundo, que melhoram imediatamente a aparência deste app de terminal.
00:03:56Novamente, podemos usar uma fonte ASCII em vez deste texto, o que faz com que o cabeçalho se destaque um pouco mais.
00:04:01E, claro, existem muitas fontes ASCII que você pode escolher. Lembre-se, como este é um aplicativo
00:04:05de terminal, não uma página web, ele não renderiza todas as fontes que você tem no sistema, apenas as que suportam o
00:04:10terminal. Também podemos fazer coisas como mudar a visualização ao enviar, da mesma forma que fazemos com um aplicativo React comum,
00:04:15alterando o estado no envio e exibindo JSX diferente com base nessa condição. Mas aqui está
00:04:20uma coisa que você não esperaria que um terminal fosse capaz de fazer. Se eu enviar meu nome, o outro estado agora desaparece
00:04:25suavemente. E isso é feito com o hook “useTimeline” do OpenTui, que é usado para definir uma duração de animação
00:04:30e definir um alvo. Então, neste caso, o componente tem uma opacidade de zero e um deslocamento de oito,
00:04:36o que significa que ele tem uma margem superior abaixo do centro. E aqui a animação termina com um deslocamento de zero
00:04:40e uma opacidade de um, atualizando os estados de deslocamento e opacidade que foram definidos aqui. E esses
00:04:45valores são atualizados nas propriedades da Box. Agora, parece um pouco travado porque as animações de terminal precisam
00:04:50se mover linha por linha. Então, é como se estivesse em uma grade, mas é muito legal que o OpenTui permita que você faça isso
00:04:55tão facilmente. O que é realmente legal é que podemos combinar tudo o que aprendemos até agora usando o layout Flexbox
00:05:00para colocar caixas lado a lado. Então, temos um input de um lado e outra caixa do outro.
00:05:05E se digitarmos no input ao enviar, podemos animar o valor indo para a outra caixa,
00:05:10o que é um toque muito agradável. E a partir daqui, podemos fazer muitas coisas com o OpenTui,
00:05:14como habilitar a navegação por teclado com o hook useKeyboard, mostrar dados do sistema usando node OS,
00:05:19habilitar suporte a mouse e listas virtualizadas. E como tudo isso está rodando sobre o BUN,
00:05:24você pode usar coisas como BUN SQLite, BUN Postgres ou buscar informações externas da mesma
00:05:28forma que faria em qualquer site. E o legal disso é que depois que compilei meu aplicativo, sim, ele tem 71
00:05:34megabytes porque inclui o runtime do BUN e a reconciliação do React. Mas quando o executo,
00:05:39você pode ver que ele usa menos de 50 megabytes de memória. E como o React é tão popular,
00:05:43os LLMs o conhecem como a palma da mão. E, portanto, construir aplicativos no OpenTui pode ser muito simples
00:05:49sem a necessidade de ficar voltando para consultar a documentação. Então, essa é uma passada muito simples
00:05:53pelo OpenTui. Mas vamos voltar ao início do vídeo, onde prometi que explicaria
00:05:58a diferença entre React, Solid e Core. É bem simples se você entende de desenvolvimento
00:06:02web front-end. Basicamente, todos eles renderizam através do mesmo núcleo ZIG. Então, o desenho real no
00:06:07seu terminal é praticamente idêntico. A única diferença é como você escreve seus componentes
00:06:11e como as atualizações são aplicadas. Então, o React executa novamente seus componentes e faz o diff de uma árvore virtual a cada
00:06:17alteração, o que é bem parecido com o funcionamento do DOM virtual. O Solid usa atualizações de granulação fina,
00:06:22então ele atualiza apenas o que mudou. E o Core pula tudo isso, o que significa que você apenas altera
00:06:27os objetos diretamente. Portanto, no papel, o React é o mais pesado e o Core é o mais leve. Mas na prática,
00:06:33para a maioria dos aplicativos de terminal, a diferença é minúscula porque todo o trabalho pesado é feito pelo núcleo ZIG,
00:06:38o que significa que, neste caso, os frameworks são apenas uma preferência pessoal. Mas mesmo que um aplicativo OpenTui
00:06:44seja enviado com todo o runtime do BUN e a reconciliação específica do framework, se houver uma,
00:06:50o desempenho e o tamanho do aplicativo ainda são muito menores que os do Ink, mas, claro, não tão
00:06:56performáticos quanto algo nativo como Ratatouille ou Bubble Tea. Mas, na minha opinião, JSX é a melhor
00:07:02e mais intuitiva maneira de compor qualquer interface. E prefiro aceitar o leve impacto na memória e no tamanho e ter
00:07:09uma experiência de desenvolvimento muito melhor ao construir uma TUI do que ter algo leve em tamanho e
00:07:15uso de memória, mas difícil de escrever e atualizar. Então, tendo isso em mente, eu escolheria o OpenTui
00:07:20em vez do Ink todas as vezes, se eu algum dia começar a construir um aplicativo de terminal,
00:07:25o que prometo que farei em breve.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video