🔗 Não tem como fugir do JavaScript para sempre

Recentemente escrevi um post sobre HTMX e como ele pode ajudar a escrever menos JS, mas a realidade cruel do desenvolvimento web é que SSR (Server Side Rendering) só te leva até certo ponto, algumas experiências desejáveis na Web só vão ser possibilitadas executando código do lado cliente.

É ai onde JavaScript normalmente entraria, mas felizmente hoje existem outras opções, nesse artigo vou falar sobre uma delas - O Hyperscript

🔗 O que é Hyperscript

É uma linguagem de script feita para interceptar e responder à eventos do lado do cliente em uma web app, assim como realizar manipulações simples na DOM, veja esse exemplo:

1<button _="on click increment :x then put the result into the next <output/>">
2Me clica!
3</button>
4<output>--</output>

Sintaxe peculiar, não? A primeira a coisa a se notar é que o script é definido diretamente no elemento usando o atributo _ (underscore).

Incorporar comportamento diretamente no elemento pode parecer estranho, mas é uma tendência de tecnologias mais recentes de favorecer Locality of Behavior ao invés de Separation of Concerns. Exemplos de outras bibliotecas indo nesse mesmo caminho são Tailwind CSS, AlpineJS e HTMX.

As vantagens dessa sintaxe excêntrica é que fica claro que hyperscript está sendo usado na página.

A linguagem também é declarativa e de fácil leitura para humanos, me lembra SQL, você não precisa definir de forma procedural como realizar comportamentos comuns em uma web page, Hyperscript abstrai a manipulação da DOM para você, assim como SQL abstrai o comportamento interno do banco de dados e a interação com o sistema de arquivos.

Para efeitos de comparação, segue o mesmo código usando Vanilla JS

 1<button id="buttonjs">
 2Me clica!
 3</button>
 4<output>--</output>
 5<script>
 6    let x = 1;
 7    document.querySelector("#buttonjs").addEventListener("click", function() {
 8        const output = this.nextElementSibling;
 9        if (output.nodeName == "OUTPUT"){
10            output.innerHTML = ++x;
11        } 
12    });
13</script>

Com Hyperscript fica bem mais clean 😊

🔗 Emitindo eventos customizados

As vezes queremos lidar com eventos que não necessariamente são oriundos dos componentes nativos da DOM, mas sim eventos customizados introduzidos por código proprietário, Hyperscript permite trabalhar com esses tipos de eventos também, essa modal por exemplo:

 1<button 
 2    _="on click toggle .hidden .modal on #modal" 
 3    class="bg-blue-599 p-2 text-white rounded-md">
 4    Abrir modal
 5</button>
 6<div id="modal" class="hidden" 
 7_="on closeModal add .closing then wait for animationend then toggle .hidden .modal .closing">
 8    <div class="modal-underlay" 
 9        _="on click trigger closeModal">
10    </div>
11    <div id="modal-content" class="modal-content">
12        Hyperscript rocks 💙
13        <button 
14            _="on click trigger closeModal" 
15            class="bg-blue-599 p-2 text-white rounded-md">
16            Fechar
17        </button>
18    </div>
19</div>
20<style>
21.modal {
22    /**
23    Exibe modal com posição fixa
24    Anima a abertura
25    **/
26}
27
28.modal > .modal-underlay {
29	/**
30    "Painel de vidro"
31    cobre o conteúdo por trás da modal
32    **/
33}
34
35.modal > .modal-content {
36    /**
37    Estilos do conteúdo da modal
38    **/
39}
40
41.modal.closing {
42	/* Animação de fechamento da modal */
43}
44
45.modal.closing > .modal-content {
46	/* Animação de fechamento da modal */
47}
48
49</style>

Segue o passo a passo:

1. Para exibir a modal, o botão remove a classe .hidden do elemento principal e adiciona a classe .modal.
2. A div principal da modal lida com o evento customizado closeModal que adiciona a classe .closing que tem as animações de fechamento, remove as classe .modal .closing quando a animação termina e adiciona novamente a classe .hidden.
3. A div underlay, que é o “painel de vidro” que cobre todo o view port, e o botão de fechar, disparam o evento closeModal que vai executar o handler do passo 2.

🔗 Estado atual

Hyperscript ainda está em beta, a sintaxe e funcionalidades estão em maior parte completas, agora o desenvolvedores estão trabalhando em melhorias na documentação e testes para o release da versão 1.0.

Existe também uma dependência com promises o que impossibilita a compatibilidade com IE11.

🔗 Conclusão

Aqui só arranhei a superfície do que a linguagem é capaz, não deixe de visitar o site oficial e verificar as outras funcionalidades que podem ser úteis para você. No desenvolvimento desse blog usarei hyperscript para adicionar interatividade onde é necessário, até então tem sido um prazer.

Pode ser que em seu projeto também seja 😄