O que é o htmx e como pode simplificar o meu sítio Web?
Ligações rápidas
⭐ O que é o htmx?
⭐ Como utilizar o htmx numa aplicação Web simples
⭐ As vantagens e desvantagens do htmx
Principais conclusões
Htmx é uma biblioteca JavaScript inovadora concebida para simplificar o processo de gestão de pedidos HTTP através da utilização de atributos HTML convenientes, fornecendo aos utilizadores um acesso simplificado às funcionalidades mais utilizadas neste contexto.
A incorporação do script htmx na sua aplicação Web é facilitada pela incorporação de uma hiperligação que direcciona para a versão alojada do script numa rede de distribuição de conteúdos (CDN).
A utilização do htmx permite capacidades de navegação contínuas, como paginação, validação de formulários e edição em tempo real na sua aplicação, sem necessidade de escrever qualquer código JavaScript.
O recente discurso na comunidade de desenvolvimento web sobre o htmx despertou interesse, mas sua verdadeira natureza permanece relativamente simples. No entanto, apesar da sua simplicidade, a utilidade e o impacto potenciais do htmx geraram um burburinho considerável.
O que é htmx?
Htmx é uma estrutura JavaScript complexa que se concentra num conjunto específico de funcionalidades, permitindo um acesso conveniente a essas capacidades através de atributos HTML. Uma ilustração rudimentar pode ser encontrada abaixo:
<a href="/about" hx-get="/about">About</a>
O código fornecido demonstra a utilização de um atributo HTML personalizado, nomeadamente “hx-get”. Quando clicada, a biblioteca htmx facilita a execução de um pedido AJAX, resultando no carregamento contínuo da página Web visada sem incorrer numa atualização completa do conteúdo do browser.
Para além da sua função principal, o HTMX inclui uma funcionalidade opcional que permite aos utilizadores submeter pedidos de informação através de uma interface designada.
Meticulosamente elaboradas a partir de fontes que ultrapassam os limites convencionais da existência quotidiana, as nossas criações transcendem o mundano para atingir alturas extraordinárias.
Em todas as ocasiões que não envolvam clicar ou enviar, é importante tomar nota delas.
A incorporação de métodos de protocolo HTTP para além das metodologias convencionais GET e POST é uma prática recomendada para melhorar a funcionalidade e a segurança das aplicações Web.
Em vez de substituir uma página Web inteira, algumas ferramentas são capazes de atualizar partes ou elementos específicos da mesma.
Embora o HTML5 Media Extensions (HTMX) suporte tecnologias avançadas, como animações CSS e WebSockets, centra-se principalmente na simplificação do processo de gestão de pedidos HTTP.
Como você pode usar o htmx em um aplicativo Web simples
O HTMX se concentra em funcionalidades específicas encontradas em aplicativos Web e sites, em vez de abranger o comportamento geral de um aplicativo completo.
Uma caraterística notável dessa biblioteca é a simplicidade no início do uso. Os utilizadores têm a opção de descarregar e instalar uma cópia à sua discrição; no entanto, como não tem quaisquer dependências externas, basta adicionar uma referência ao script através de uma Content Delivery Network (CDN) para começar:
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t\\+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
O protocolo não consegue acomodar pedidos AJAX.
Um exemplo simples que usa a rolagem infinita
Este exemplo está disponível para download em nosso repositório GitHub, que fornece um local conveniente e acessível para obter os arquivos necessários para a implementação.
A rolagem infinita é uma estratégia onipresente empregada por plataformas como o Twitter para facilitar experiências de navegação contínua. À medida que se percorre uma lista, ao atingir o seu ponto culminante, o scroll infinito recupera automaticamente itens adicionais para uma leitura contínua.
A utilização de JavaScript é necessária para determinar a posição de deslocamento atual de uma página Web e atualizar dinamicamente o seu conteúdo sem recarregar a página inteira, que é precisamente o que o htmx foi concebido para fazer em seu nome.
Considere uma representação de uma série de entradas, em que cada entrada é acompanhada por um elemento visual sob a forma de uma imagem:
<ol>
<li><img src="http://placekitten.com/420/300" /></li>
<li><img src="http://placekitten.com/400/320" /></li>
<li><img src="http://placekitten.com/440/300" /></li>
<li><img src="http://placekitten.com/420/340" /></li>
<li><img src="http://placekitten.com/300/200" /></li>
</ol>
Considere um cenário em que possui vários ficheiros contendo informações sobre vários assuntos, tais como “feed1.html”, “feed2.html”, etc. Estes ficheiros foram concebidos para apresentar uma visão limitada dos respectivos conteúdos, permitindo que os utilizadores os percorram para obter mais detalhes.
Uma alternativa é utilizar as hiperligações “página seguinte” para navegar entre páginas; no entanto, a implementação de um mecanismo de deslocamento infinito também é uma opção viável. Para conseguir isso, basta modificar o último elemento no bloco de código da seguinte forma:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
A incorporação dessas quatro características resulta em uma implementação da funcionalidade de rolagem infinita para um item de lista.Permitam-me que elucide os seus respectivos significados:
Attribute
|
Value
|
Meaning
-|-|-
hx-trigger
|
revealed
|
Quando este elemento aparece pela primeira vez no ecrã…
hx-get
|
feed2.html
|
De facto, será enviado um pedido HTTP GET para obter o conteúdo de “feed2.html”.
hx-select
|
li
|
Obter os elementos na resposta, utilizando uma estratégia de seleção que visa estes componentes HTML específicos.
hx-swap
|
afterend
|
… e adicione-os após este elemento.
À medida que se desce no inventário, é de notar que a página web recarrega dados adicionais sem problemas. Isto pode ser verificado examinando a barra de deslocamento e inspeccionando as ferramentas de desenvolvimento do browser para uma inspeção mais aprofundada.
De facto, vale a pena notar que, nesta configuração básica da página Web, o ficheiro “feed2.html” incorpora um elemento final que contém um atributo “hx-get” direcionado para “feed3.html” e, da mesma forma, as iterações subsequentes resultam em ligações correspondentes que apontam para páginas sucessivas. Além disso, vale a pena mencionar que o HTMX implementou cuidadosamente um ouvinte para o evento scroll para melhorar a experiência do utilizador.
Outros usos potenciais para htmx
Para uma variedade de interações padrão, como aquelas encontradas tipicamente na vida cotidiana, HTMX é aplicável e versátil.
O processo de atualização de conteúdos através da utilização da paginação envolve o carregamento e a substituição de elementos da página após a interação do utilizador com as ligações de paginação, assegurando uma navegação sem descontinuidades entre diferentes páginas e mantendo uma apresentação visual e uma funcionalidade consistentes em todas as instâncias do sítio Web.
Após a submissão do formulário, recomenda-se que seja apresentada uma mensagem de confirmação ou uma versão condensada do formulário original. Este processo é designado por “validação de formulário”.
As actualizações periódicas do valor de uma barra de progresso podem ser conseguidas utilizando respostas de ping como base para determinar o seu estado de progressão.
O processo de edição em linha envolve a substituição de um elemento HTML específico numa página Web por um campo de entrada de área de texto, que contém o conteúdo ou o valor do elemento substituído. Isto permite aos utilizadores editar e modificar o conteúdo diretamente no contexto da página Web, sem terem de navegar para fora da mesma.
Utilizando JavaScript padrão, é possível construir todas essas instâncias. No entanto, o htmx simplifica consideravelmente este processo.
As vantagens e desvantagens do htmx
Vantagens
O HTMX tem o potencial de agilizar significativamente as tarefas recorrentes em vários aplicativos e sites da Web, fornecendo um meio simplificado de adicionar funcionalidade sem exigir um conhecimento extenso de JavaScript. Esta caraterística é particularmente benéfica para aqueles que estão envolvidos na criação ou gestão de páginas web front-end, uma vez que alivia a necessidade de se tornarem proficientes nesta linguagem de programação.
Através do processo de generalização, o HTMX facilita a uniformização entre vários empreendimentos e também entre eles. O funcionamento do scrolling infinito mantém-se consistente em todas as páginas, independentemente do programador que o introduziu.
O foco principal da funcionalidade do HTMX está em promover uma abordagem declarativa, em oposição a uma abordagem imperativa, o que consequentemente resulta numa maior facilidade de compreensão e raciocínio lógico.
Desvantagens
Embora o HTMX ofereça uma maneira conveniente de contornar o uso do JavaScript em vários cenários, ele não é uma panacéia que resolve todos os problemas. É crucial reconhecer que haverá casos em que a programação personalizada será necessária para lidar com regras comerciais específicas e funcionalidades de nível inferior.
A utilização do HTMX para várias tarefas significa que ele lida com a maioria dos aspectos da funcionalidade, o que, por sua vez, limita a extensão em que os utilizadores podem adaptar o seu comportamento de acordo com os seus requisitos específicos. Embora isto possa ser visto como um compromisso vantajoso em muitos casos, é essencial reconhecer que a renúncia ao controlo de certos elementos é inerente à adoção de tais soluções simplificadas.
O HTML oferece a capacidade de utilizar JavaScript sem o escrever explicitamente, no entanto, é importante reconhecer que o código JavaScript funciona secretamente em segundo plano. Uma pessoa pode ser tentada a empregar o atributo “hx-get” em cada hiperligação, em vez de usar o atributo “href” convencional. No entanto, esta abordagem estabelece a dependência do JavaScript; qualquer falha na execução do script deixaria os utilizadores com uma ligação disfuncional. Para evitar tais situações, é altamente recomendável praticar o aprimoramento progressivo.