TanStack apresenta nova meta-estrutura baseada em seu roteador

Tanner Linsley não pretendia dar o seu próprio nome ao TanStack. Mas o que começou como uma piada de um amigo simplesmente pegou. E não começou como uma pilha – ou como uma solução de código aberto, aliás.

O TanStack começou como uma forma de construir tabelas para grandes conjuntos de dados. A startup co-fundada por Linsley, bocal.io, usava Angular na época e isso não oferecia muitas opções. bocal.io é uma ferramenta para coletar e exibir análises usando grandes conjuntos de dados baseados nos resultados de pesquisa do Google; é usado por empresas para rastrear campanhas individuais de palavras-chave.

“Eu originalmente construí (TanStack) porque precisava dessas ferramentas para uma startup que estava construindo”, disse Linsley, referindo-se ao bocal.io. “Precisávamos ser capazes de exibir esses dados com base no cliente e nos comunicar entre cliente e servidor. … Precisávamos de uma grade de dados no React e, na época, não havia muitas opções.”

“Um dos meus amigos na época, Shaun Wang, estava apenas brincando que eu estava construindo minha própria pilha e a chamou de TanStack. No começo foi um pouco desagradável, depois pensei: ‘Quer saber? Isso não é tão ruim porque parece Jamstack.
– Tanner Linsley, desenvolvedor do TanStack

Depois disso, ele construiu o React Query porque o bocal.io gerenciava grandes conjuntos de dados usando Redux e “eles eram mais como caches glorificados”, disse ele. React Query o ajudou a gerenciar toda a coleta de dados com React.

Ele sabia na época que o bocal.io não poderia manter os projetos, então decidiu abri-los.

“Eles decolaram – o React Query se tornou muito, muito popular; O React Table é bastante popular e, com bastante atenção e tempo, essas bibliotecas precisavam crescer além do que eram e naquela época era o React”, disse ele. “Muitas pessoas queriam usá-los em outras estruturas.”

Ele decidiu torná-los agnósticos e extrair as partes específicas do React para que pudesse funcionar em qualquer lugar.

Mas havia aquele problema estranho do nome deles. Ninguém em Vue, Angular ou outras estruturas que não sejam React gostaria de instalar o React Query. As ferramentas precisavam de um nome diferente.

“Um dos meus amigos na época, Shaun Wang, estava apenas brincando que eu estava construindo minha própria pilha e a chamou de TanStack”, disse Linsley. “No começo foi um pouco desagradável, depois pensei: ‘Quer saber? Isso não é tão ruim porque parece Jamstack. Então eu meio que me inclinei e segui em frente, e acabou tudo bem. É um ótimo SEO.”

Também não custa nada construir um pouco sua marca, acrescentou.

‘Primeiro roteador totalmente seguro para tipos que existe no frontend’

Linsley ainda está construindo o TanStack, mas em breve ele lançará o TanStack Start, uma estrutura React full-stack alimentada pelo TanStack Router. O roteador compete diretamente com roteadores React, Next.js e Redwood.

As estruturas estão intrinsecamente ligadas aos roteadores, explicou Linsley. Para entender sua estrutura, é necessário entender o TanStack Router.

Um roteador é um objeto JavaScript que mapeia URLs para funções; o roteador chama uma função com base na URL, de acordo com este tutorial sobre construção de um roteador da engenheira civil Nancy Maina. Em outras palavras, em aplicativos de página única, os roteadores “organizam os estados do aplicativo, alternando entre diferentes visualizações”, explicou o engenheiro de software Esteban Sastre, que foi CTO e cofundador de um aplicativo chamado Thegoodpsy quando escreveu sobre roteadores. Por exemplo, um roteador renderiza primeiro a tela de login e, quando o login for bem-sucedido, ele realizará a transição para a tela de boas-vindas do usuário, escreveu ele.

através da TanStack.com

Embora todos os roteadores JavaScript tenham muitos recursos básicos sobrepostos, eles diferem em pequenos aspectos, disse Linsley.

“O que diferencia meu roteador é que ele é fortemente direcionado a usuários de TypeScript”, disse ele. “Muitas outras bibliotecas e roteadores são escritos em ‘TypeScript’ – estou citando aqui – mas eles não utilizam o sistema de tipos em toda a sua extensão. Eles não estão inferindo tanto quanto podem. Eles não estão transmitindo os tipos que você fornece ao resto do sistema.”

Ele afirmou que o roteador Tan Stack é o único que é uma biblioteca de roteamento que usa TypeScript para impor o tipo – ou seja, o formato esperado e a estrutura dos dados envolvidos no roteamento – segurança nas rotas e nos dados relacionados.

“O roteador Tan Stack é o primeiro roteador totalmente seguro que existe no frontend”, disse ele. “Houve alguns outros que chegaram perto e alguns (trabalhos) anteriores nessa área,… mas nenhum deles realmente surgiu como uma experiência holística para um engenheiro TypeScript que deseja ter um roteador. Então esse é o seu grande ponto forte.”

Chicane é um participante recente nesse espaço.

Redes de segurança para desenvolvedores

Mas o que isso faz para os desenvolvedores?

“Ele fornece uma análise estática do seu código que pode detectar muitos tipos de bugs antes mesmo que eles aconteçam; na verdade, antes mesmo de criar ou enviar seu código para seu aplicativo”, disse Linsley.

Em termos práticos, isso significa que um novo link para uma nova página não irá inadvertidamente para uma página que não existe, explicou ele.

“Até agora, os parâmetros que estão nessa URL eram do oeste selvagem – eles poderiam ser qualquer coisa”, disse ele. “O que o TanStack Router faz com sua segurança de tipo é fazer com que você nunca escreva nesses parâmetros de URL ou leia-os sem saber estritamente o que é possível e o que não é possível, o que reduz uma grande quantidade de bugs que podem acontecer em produção, tentando ler parâmetros que podem não estar lá ou tentando escrever um parâmetro que é um erro de digitação ou que não existe.”

Isso cria uma “rede de segurança gigante em torno da experiência de roteamento”, além de melhorar a produtividade e criar uma melhor experiência para o desenvolvedor, porque se um desenvolvedor renomear uma variável em um local, ele a renomeará em todos os lugares, acrescentou.

Existem também redes de segurança de refatoração, disse ele. Se um desenvolvedor quiser alterar um aplicativo, pode ser necessário alterar ou refatorar uma grande parte do código.

“Normalmente, apenas em JavaScript, você teria que examinar o resto do seu aplicativo, testá-lo e procurar os efeitos colaterais que acabou de causar com essa grande mudança”, disse ele. “Com o TypeScript, você faz essas alterações, e o TypeScript lhe dirá onde o restante do seu código agora é incompatível ou precisa ser atualizado para funcionar com essas alterações. Portanto, é extremamente útil durante o desenvolvimento.”

Em breve: Meta-Framework TanStack Start

A metaestrutura TanStack Start obtém esses atributos porque é baseada no roteador, acrescentou Linsley. E embora ele esteja tentando construir a estrutura para que não exija o TanStack Router, na realidade, isso não funciona muito bem, disse ele.

“Frameworks são roteadores; roteadores são estruturas”, disse Linsley. “Eles são o que constituem o alicerce da convenção de que uma estrutura precisa para oferecer níveis mais elevados de produtividade. Se você trocasse o roteador por uma estrutura, provavelmente perderia muitas daquelas coisas proativas que lhe proporcionariam muita produtividade, velocidade e segurança. Estou pensando no potencial de as pessoas usarem outros roteadores, mas por enquanto ele é baseado no TanStack Router.”

“Todos esses meta-frameworks têm maneiras de fazer coisas do lado do cliente, mas você cria seus aplicativos da perspectiva de normalmente – na verdade, na maioria das vezes – ter um servidor envolvido, e eu não gostei disso, principalmente porque eu vêm do mundo da construção de aplicativos do lado do cliente.”

Mas o roteador é apenas parte da metaestrutura, acrescentou.

“As outras peças que faltam são uma estratégia de implantação – como podemos realmente agrupar esse código para produção e implantá-lo em outro lugar?” Ele disse. “Para uma estrutura, precisamos ter essa história de agrupamento bem definida. Então também precisamos ter a história da renderização do lado do servidor e de tudo o que acontece no servidor e da transferência entre servidor e cliente. E (é) geralmente por isso que eles chamam de meta-framework full-stack.”

O TanStack Start está sendo usado e testado internamente pela equipe TanStack, mas ainda não está disponível para uso mais amplo. Ele não forneceu uma data de lançamento para isso. Lindsey disse que é mais semelhante à nova metaestrutura Solid Start, lançada em maio. Na verdade, Linsley e o criador do SolidStart e Solid.js, Ryan Carniato, colaboraram um pouco sobre como os dois frameworks funcionariam.

Solid Start e TanStack Start não tentam mover todo o código para o servidor, que é o que muitos frameworks estão fazendo agora, disse Linsey, apontando para React Server Components.

“Next.js é basicamente uma estrutura que prioriza o servidor. O Remix é basicamente uma estrutura que prioriza o servidor, assim como o Redwood”, disse ele. “Todos esses meta-frameworks têm maneiras de fazer coisas do lado do cliente, mas você cria seus aplicativos da perspectiva de normalmente – na verdade, na maioria das vezes – ter um servidor envolvido, e eu não gostei disso, principalmente porque eu vêm do mundo da construção de aplicativos do lado do cliente, e não da distribuição de conteúdo por meio de sites de conteúdo e comércio eletrônico.”

Lindsey está focada principalmente na construção de experiências altamente interativas que geralmente dependem de algum login. Ele está mais focado em atrair os usuários para o aplicativo e, em seguida, fornecer os recursos, fluxos de trabalho e interatividade para ser produtivo.

Isso é diferente de, digamos, um site de comércio eletrônico, onde o objetivo é carregar rapidamente a página e fazer com que os usuários adicionem ao carrinho. Para oferecer suporte a sites, outras estruturas se concentram em simplificar os aplicativos do lado do servidor e apenas acessam o cliente quando a interatividade é necessária. SolidStart e TanStack Start invertem esse script.

“Você mede essas coisas de maneira completamente diferente, e é por isso que acredito que era necessário haver uma estrutura construída em torno dessa experiência de escrever aplicativos do lado do cliente, e o Solid Start e o Tan Stack Start incorporam muito essa experiência”, disse ele. “Estamos tentando modelar essa experiência do desenvolvedor em torno de continuar a escrever seus aplicativos como se fossem aplicativos de página única, aplicativos do lado do cliente. Então, quando você precisar do servidor para essas coisas, tornamos extremamente conveniente passar para o servidor para fazer essas coisas.”

A postagem TanStack apresenta nova meta-estrutura baseada em seu roteador apareceu pela primeira vez em The New Stack.