htmz - framework HTML ultraminúsculo

 (leanrada.com)
21 pontos por GN⁺ 2024-02-21 | 3 comentários | Compartilhar no WhatsApp
  • Um microframework HTML minimalista que permite criar interfaces web modulares e dinâmicas de forma tão simples quanto HTML puro
  • Faz exatamente uma única coisa: carregar recursos HTML em qualquer elemento da página
    • Isso permite atualizar apenas partes da página, possibilitando substituir fragmentos da página
  • Tem tamanho total de 166 bytes, usa apenas HTML puro, não tem dependências e não requer bundle JS, backend, atributos especiais, DSL nem elementos customizados
  • Interage com o DOM real e não usa VDOM, listeners de clique, AJAX, fetch etc.
  • Basta adicionar um snippet HTML inline em um iframe
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>

Uso básico

  • Para usar o htmz, é necessário um hiperlink com o atributo href apontando para a URL do recurso (ou o action de um formulário) e um seletor de ID de destino.
  • Parece que o fragmento da URL está sendo reutilizado como seletor de ID de destino, mas ele é reaproveitado porque, neste contexto, o fragmento da URL não é usado para outra finalidade.

O que exatamente ele faz?

  • O htmz oferece uma única funcionalidade: permitir carregar recursos HTML dentro de qualquer elemento da página.
  • A ideia não é nova, e dividir páginas web em partes que podem ser recarregadas de forma independente existe desde meados dos anos 1990.
  • O htmz é uma generalização dos frames HTML, permitindo carregar recursos HTML em qualquer elemento da página.

Uso avançado

  • No HTML5 atual, apenas os elementos e podem ser definidos como alvo e invocados pelo htmz.
  • É possível usar o elemento para definir o htmz como alvo padrão para todos os links relativos.
  • Se você preferir usar o valor real do alvo, pode recorrer a um hack que permite escrever o seletor de ID de destino diretamente no próprio atributo target.

Script / interação

  • Se for necessária mais interatividade, é possível usar JavaScript, a linguagem de script companheira do htmz.
  • O htmz não exclui a escrita de JS nem o uso de bibliotecas de UI, e com o htmz ainda é possível enviar valores de formulários como formulários HTTP normais.

Extensibilidade

  • Se forem necessários seletores avançados, tratamento de erros, múltiplos alvos etc., o desenvolvedor pode expandi-lo conforme a necessidade.

FAQ

  • O htmz é um iframe chamado "htmz" e é invocado ao carregar uma URL por meio desse iframe.
  • O htmz funciona como alvo proxy, entregando a resposta ao alvo especificado.
  • O htmz não faz parsing contínuo do DOM, não procura atributos ou sintaxes especiais e não anexa listeners ao DOM.
  • O htmz é um microframework HTML e usa apenas o mínimo de JS.
  • O htmz é um snippet e significa 'Html with Targeted Manipulation Zones'.
  • Este projeto começou como uma reação ao htmx e foi um experimento para ver se seria possível implementar, com a web atual, a funcionalidade de carregar-vincular-alvo sem usar htmx.
  • Apesar do tamanho minúsculo, o htmz passa uma sensação de potência, e sua principal limitação é ter apenas um destino por resposta.

Opinião do GN⁺

  • Abordagem inovadora: o htmz oferece uma abordagem inovadora para reduzir a complexidade dos frameworks no desenvolvimento web e construir interfaces usando HTML puro. Isso representa uma forma de desenvolvimento web acessível até mesmo para engenheiros de software iniciantes.
  • Equilíbrio entre desempenho e simplicidade: seu tamanho extremamente leve de 166 bytes e sua estrutura sem dependências podem melhorar significativamente o desempenho de páginas web. Além disso, oferece simplicidade para criar páginas eficazes sem precisar aprender frameworks complexos de JavaScript.
  • O futuro do desenvolvimento web: o htmz oferece uma perspectiva interessante sobre o futuro do desenvolvimento web. Mostra como a evolução dos padrões e das tecnologias web pode fornecer ferramentas mais simples e eficientes para os desenvolvedores.

Leituras relacionadas

3 comentários

 
joyfui 2024-03-06

Uau, isso aqui é bem criativo kkk. No link ele diz que não é nem biblioteca nem framework, só um snippet... rs
 
savvykang 2024-02-21

Uso avançado: atualmente, no HTML5, apenas os elementos e -> atualmente, no HTML5, parece que apenas os elementos e não têm escaping de HTML aplicado
 
GN⁺ 2024-02-21
Opiniões do Hacker News

  • Resumo do primeiro comentário:

    • Reação positiva à ideia de usar iframes nomeados e formulários direcionados para páginas renderizadas no servidor e widgets com escopo de estilo.
    • O htmz parece ter implementado bem essa ideia.
    • Enfatiza não abandonar boas ideias, focar em acabamento e excelência, e comunicar bem a ideia.
    • Avaliado como um excelente hack que mostra que o navegador pode fornecer SPA nativamente.
    • Uma bela demonstração de alguém que entende bem a plataforma.
    • Opinião de que a web vanilla deveria ser simples e poderosa.
    • Avaliação positiva de aproveitar ao máximo os recursos dados pela web.
    • Elogios às habilidades de comunicação e marketing do criador.

  • Resumo do segundo comentário:

    • Um hack que mostra que o navegador pode fornecer SPA nativamente.
    • Bastariam alguns atributos para evitar iframe.
    • Pode ser mais útil para provar um ponto do que como ferramenta real.
    • Aponta que é complexo demais em comparação com o que o htmx oferece.

  • Resumo do terceiro comentário:

    • Compartilha a experiência de desenvolver um cliente de e-mail baseado em HTML por volta de 2001.
    • Usava iframe oculto para carregar dados do servidor e manipular o DOM.
    • Na época, o suporte dos navegadores não era suficiente, mas o mecanismo básico é o mesmo.
    • Avaliação positiva por ter sido implementado como um pacote conciso sem precisar de muitas bibliotecas.
    • Pode ser mais adequado para a maioria dos casos de uso do que frameworks frontend muito usados hoje, como React.

  • Resumo do quarto comentário:

    • Defende fortemente que substituir o DOM pela resposta deveria fazer parte da plataforma.
    • Propõe como primeiro passo um elemento que possa carregar conteúdo externo na página de forma declarativa.
    • Menciona que o HTML deveria suportar elementos que possam ser alvo de links.

  • Resumo do quinto comentário:

    • Elogia a bela demonstração de alguém que realmente entende a plataforma.
    • Considera excelente, embora seja improvável que use isso na prática.

  • Resumo do sexto comentário:

    • Sugere remover this. dos listeners de evento inline para reduzir ainda mais o tamanho do código.
    • Dá uma dica para economizar 10 bytes no snippet.

  • Resumo do sétimo comentário:

    • Aponta que, ao usar target, isso pode não degradar de forma elegante como o htmx quando o JS está desativado.
    • Expressa uma visão idealista sobre a situação com JS desativado.

  • Resumo do oitavo comentário:

    • Aponta que reutilizar o elemento <slot> dessa forma é uma má ideia.
    • No navegador, <slot> tem um comportamento muito específico e, independentemente do que a biblioteca faça, ele é substituído como filho do elemento host.
    • Menciona que o elemento <output> já existe para situações como essa.

  • Resumo do nono comentário:

    • Aponta a necessidade de melhorar a seção de demonstração.
    • Ao clicar nas "abas" para mudar o código de exemplo, eventos de histórico são adicionados, mas a URL não é atualizada.
    • Critica a alegação de ser "simplesmente HTML" por violar regras básicas da web/UX.

  • Resumo do décimo comentário:

    • Lembra semelhanças com o pjax, que usa XHR em vez de iframe e usa pushState por padrão para que o botão de voltar funcione.