Aprenda na prática como funcionam os frameworks JavaScript modernos construindo um

Entendendo como funcionam os frameworks JavaScript modernos

• Criar seu próprio framework JavaScript ajuda no aprendizado.
• "Frameworks JavaScript modernos" aqui se refere aos frameworks posteriores ao React.
• Esses frameworks foram inspirados pelo React, mas evoluíram em direções parecidas.

Características dos frameworks modernos

• Uso de reatividade para atualizar o DOM.
• Uso de clonagem de templates para renderizar o DOM.
• Uso de APIs web modernas como <template> e Proxy.

Reatividade

• Costuma-se dizer que o React não é reativo.
• Frameworks modernos usam um modelo reativo baseado em push, priorizando desempenho.
• Com Proxy, é possível implementar atualizações do DOM sempre que o estado muda.

Clonagem da árvore DOM

• Usar a tag <template> para fazer o parse do HTML uma vez e depois clonar tudo rapidamente é uma técnica eficiente.
• Esse método é usado em vários frameworks JavaScript.

APIs JavaScript modernas

• <template> e Proxy são APIs que ajudam a construir um sistema de reatividade.
• Tagged template literals são usadas para simplificar a API de templates HTML.

Etapas para construir a reatividade

• A base do framework é a reatividade, que define o gerenciamento de estado e a atualização do DOM quando o estado muda.
• Usa-se Proxy para detectar mudanças de estado e queueMicrotask para gerenciar as atualizações com eficiência.

Etapas de renderização do DOM

• A função html é usada para construir a árvore DOM e atualizá-la com eficiência.
• Tagged template literals são usadas para escrever templates HTML, e WeakMap é usado para otimizar o parse do HTML.

Combinando reatividade e renderização do DOM

• createEffect é usado para atualizar o DOM de acordo com o estado.
• A implementação permite que o texto seja atualizado automaticamente quando o estado muda.

Próximos passos

• Há várias formas de melhorar o sistema de renderização do DOM.
• O objetivo é fazer o parse do template apenas uma vez e configurar os bindings apenas uma vez para minimizar as atualizações.

Opinião do GN⁺

O ponto mais importante deste texto é entender os conceitos centrais e a forma de implementação dos frameworks JavaScript modernos, além do processo de aprendizado por meio da experiência de construir de fato seu próprio framework. Essa abordagem pode proporcionar a engenheiros de software iniciantes uma oportunidade interessante e útil de entender o funcionamento interno dos frameworks e colocá-lo em prática.

[GN⁺]

Comentário no Hacker News

• Recomendação dos seguintes materiais para uma compreensão básica do tema de interesse:

  • Computação incremental: link da Wikipédia
  • Computação autoajustável: artigo de Umut A. Acar
  • Introdução à computação incremental da JaneStreet: link do blog
  • A web e a computação incremental: link do blog
  • DOM autoajustável: link do blog
  • DOM autoajustável e dados com diff: link do blog
  • Rascunho sobre computação incremental de Rado Kirov: Parte 1, Parte 2, Parte 3
  • Em direção a uma teoria unificada de UI reativa: texto de Raph Levien

• Esclarecimentos sobre equívocos a respeito do React e sobre como ele realmente funciona:

  • Ao atualizar o estado, o React reconstrói apenas aquele componente e seus filhos, não a árvore inteira do DOM virtual.
  • useMemo não evita rerenderização; quem cumpre esse papel é React.memo.
  • O React não é "push-only" porque faz buffering das atualizações.
  • A vantagem dos signals é que o framework sabe quais propriedades do DOM precisam ser rerenderizadas, mas isso não significa reatividade.

• Avaliação positiva do Svelte e casos de uso:

  • O compilador do Svelte é altamente extensível e pode processar templates Svelte de maneiras especiais.
  • Compartilhamento da experiência de ter construído o Svekyll (um clone do Jekyll, ferramenta de blog estático) com Svelte.

• Diferentes perspectivas sobre frameworks reativos:

  • Indicação de materiais introdutórios sobre frameworks reativos como Solid.
  • Compartilhamento da experiência de ter escrito um renderer/framework web para entender a reatividade do solid-js.
  • Recomendação de materiais de estudo para implementar o React por conta própria.

• Perguntas e debate sobre a reatividade do React:

  • Pergunta sobre como tornar o React "reativo".
  • Opinião de que já deveríamos parar de criar mais frameworks JS.

• Pergunta dirigida a pessoas com ampla experiência em frameworks frontend:

  • Pergunta sobre frameworks/bibliotecas que oferecem suporte a um effect system para tarefas de renderização.