Saiba mais criando sua própria estrutura JavaScript personalizada

Esta não é uma história sobre outro framework JavaScript. Ou melhor, é, mas não da maneira que você está pensando.

Pode ser um pouco confuso e frustrante acompanhar todas as estruturas JavaScript. Essa é parte da razão pela qual o desenvolvedor web Nolan Lawson (sem parentesco) construiu sua própria estrutura – mas ele não a lançará.

Por que construir outro framework JS?

Lawson trabalha no framework LWC, mas não queria adicionar outro framework JavaScript à infinidade de frameworks existentes. Ele queria realizar um experimento em pares para criar uma estrutura de “brinquedo” simplificada. Por que?

“Parte disso é que eu trabalho em uma estrutura JavaScript, então estava fazendo análises competitivas básicas de outras estruturas para ver quais ideias poderíamos roubar”, disse Lawson ao The New Stack. “A outra parte é que eu tinha um projeto paralelo, um seletor de emojis, que foi escrito em Svelte há alguns anos, e fiquei um pouco irritado com o processo de atualização do Svelte v5, então me perguntei se poderia simplesmente escrever o meu próprio. estrutura.”

No ano passado, o criador Rich Harris e a equipe revisaram o Svelte para que a equipe pudesse incorporar “grandes ideias” no Svelte 5. Os problemas de Lawson com a atualização do Svelte 5 estavam relacionados a um componente da web do seletor de emoji que ele criou. Embora ele tenha dito que Svelte é uma ótima estrutura e é um prazer trabalhar com ele, algumas coisas o incomodaram sobre a atualização, especificamente:

• Ele aumentou o tamanho do pacote do elemento seletor de emoji em 7,1kB reduzido; e
• Ele abandonou o suporte para navegadores mais antigos devido a alterações de sintaxe; em particular o Safari 12, que, observou ele, representa 0,25-0,5% dos navegadores, dependendo de para quem você pergunta.

Lawson reconheceu que estas são questões relativamente menores.

“Agora, nenhuma dessas coisas realmente deveria ser um obstáculo”, escreveu ele. “7,1 kilobytes não é uma quantidade enorme para um aplicativo da web comum, e um seletor de emoji provavelmente deveria ser carregado lentamente na maior parte do tempo, de qualquer maneira. Além disso, talvez não valha a pena se preocupar com o Safari 12 (e se valer, não será em alguns anos).

O que ele construiu

Lawson queria construir uma estrutura pós-React moderna que não priorizasse o servidor, semelhante a Lit, Solid, Svelte e Vue (em oposição a estruturas que priorizam o servidor, como Astro, Marko e Qwik, acrescentou).

Como seu objetivo era uma estrutura de brinquedo, ele queria fazer o mínimo necessário para implementar cada ideia fundamental. Ele aprendeu que todas as estruturas pós-React convergem nas mesmas três ideias fundamentais:

1. Usando reatividade — também conhecida como Signals — para atualizações de DOM;
2. Usando modelos clonados para renderização DOM; e
3. Usando APIs modernas como template e Proxyo que simplifica os dois primeiros elementos.

“Agora, para ficar claro, essas estruturas diferem muito no nível micro e na forma como lidam com coisas como componentes da web, compilação e APIs voltadas para o usuário. Nem todas as estruturas usamProxys”, observou ele ao explicar seu processo. “Mas, de um modo geral, a maioria dos autores de estruturas parecem concordar com as ideias acima, ou estão caminhando nessa direção.”

O que ele aprendeu

Embora ele tenha conseguido construir uma estrutura leve e personalizada para seu seletor de emojis, ele admitiu que, no meio do caminho, se sentiu preso.

“Eu tinha uma estrutura que funcionava, mas ainda não tinha qualidade de produção”, disse ele. “Então pensei que, talvez se a reescrita do seletor de emojis fracassasse, eu ainda poderia salvar o projeto como uma postagem de blog para ajudar a compartilhar o que aprendi.”

A primeira postagem detalhou como ele alcançou cada uma das três etapas fundamentais – e ele acha que os desenvolvedores poderiam aprender com essas etapas.

“Muitos dos conceitos por trás dessas estruturas eram inerentemente interessantes e, embora haja muito conteúdo tentando explicá-los, não achei que houvesse um único resumo sucinto de todos os padrões emergentes”, disse ele. “No entanto, tenho que dar crédito a Ryan Carniato, que tem uma enorme riqueza de postagens em blogs e entrevistas em vídeo sobre o assunto, e que parece ter basicamente mudado sozinho o cenário do frontend com seu trabalho no Solid.js.”

No final das contas, a estrutura foi bem-sucedida em seu objetivo planejado: fornecer um espaço leve para o componente seletor de emojis.

“Essa nova estrutura é honestamente apenas um pouco mais complexa do que o que esbocei naquele (primeiro) post – acabei precisando de apenas 85 linhas de código para o mecanismo de reatividade e 233 para o sistema de modelos (medido pelo cloc)”, Lawson escreveu. “É claro que, para conseguir esse tamanho minúsculo, tive que tomar alguns atalhos.”

Se ele fosse lançá-lo ao mundo, precisaria trabalhar mais para lidar com “uma longa cauda de casos extremos, riscos de desempenho e compensações complicadas”, observou ele, mas como foi projetado apenas para suportar um componente, ele sentiu que poderia se dar ao luxo de cortar alguns atalhos.

Sua postagem fornece uma comparação de tamanho entre o pacote com Svelte 4, Svelte 5 e a estrutura customizada. A versão personalizada conseguiu reduzir cerca de 15% do pacote Svelte 4 original.

Ainda assim, ele não recomenda que todo desenvolvedor escreva uma estrutura para enviar para produção, embora ele considere a construção de uma estrutura de brinquedo útil na compreensão de estruturas JavaScript modernas.

“Construir uma estrutura de brinquedo é um exercício útil para aprender como essas coisas funcionam nos bastidores”, disse Lawson ao The New Stack. “E quem sabe: talvez o próximo grande autor de framework comece com algo parecido com o processo descrito no meu blog.”

A postagem Aprenda mais criando sua própria estrutura JavaScript personalizada apareceu pela primeira vez em The New Stack.