Templates reativos “automagicamente”

Um dos tópicos mais comentados ultimamente no universo JavaScript é a Programação Reativa,
algo que vemos de alguma forma nas principais bibliotecas e frameworks de UI como React, Vue, Svelte, Solid, Angular e outros.

Este artigo não pretende explicar programação reativa, entretanto, tenha em mente que basicamente(no mundo das bibliotecas/frameworks de interface do usuário) sempre que o estado muda, o template é verificado, atualizado e as alterações são aplicadas ao DOM.

Obviamente, cada framework lida com isso à sua maneira, uns mais reativos, outros declarativos, com VDOM, sem VDOM...

E se tentássemos fazer o oposto do que esses frameworks normalmente fazem? Em vez de alterar o estado fazendo com que o template seja atualizado, o próprio template verifica se o estado mudou e se atualiza.

A princípio pode parecer estranho, mas essa é a proposta da biblioteca Bemtv.

Um breve olhar

Componente Counter:

import { _ } from "bemtv";

const { click$, $, css, template, render } = _`Counter`({ count: 0 });

click$(() => $.count++);

css`
  padding: 20px;
  color: blue;
`;

template`button[Cliked: $count ]`;

render();

Ela usa um requestAnimationFrame loop para executar apenas o template do componente, obtendo assim o template atualizado para comparar com o template anterior para detectar se houve alguma alteração e aplicá-las ao DOM.

Podemos pensar que isso sobrecarregará o navegador, no entanto, existem boas práticas que devemos seguir para evitar isso:

• Tudo dentro do template deve ser strings, números ou cálculos leves.

• A função que gera o template só deve ser usada para isso.

A Bemtv também utiliza um sistema sofisticado para determinar se houve alguma alteração no template, continua usando como base a repaint(repintura) do navegador, mas reduz o número de verificações à medida que o usuário interage com a página e o tempo que o componente leva para gerar o template, isso torna a Bemtv mais eficiente.

A Bemtv faz seu trabalho em tempo de execução, ela possui uma linguagem de marcação muito parecida com HTML basicamente reduzindo sua redundância e uma biblioteca CSS-In-JS tudo integrado ao template, e um Router cheio de açúcares sintáticos.

Atualmente, Bemtv não está disponível para produção e seu principal objetivo é ser uma ferramenta para pequenas aplicações Web, que pode ser aprendida em poucos minutos ao invés de horas.

Fechamento

Por hoje é só, mas você pode saber mais detalhes no repositório do projeto e se gostar da ideia, não esqueça de deixar sua estrela, ela incentiva o desenvolvimento do projeto, até breve!