Embora haja muitas linguagens aceitáveis para codificar, o desenvolvimento web está se estabelecendo em umas poucas tecnologias confiáveis. Isso é especialmente verdadeiro para o WordPress.
O JavaScript ainda está em processo de amadurecimento para a plataforma, embora as expectativas dos usuários por sites dinâmicos e interativos continuem aumentando. Os frameworks podem preencher essa lacuna, mas a complexidade de alguns dos mais populares entre eles pode atrapalhar o seu desenvolvimento. É aí que entra o HTMX. Essa biblioteca leve promete usabilidade, ao passo que simplifica a criação de experiências modernas na web.
Neste artigo, exploraremos como o HTMX pode se integrar ao seu fluxo de trabalho de desenvolvimento WordPress. Ao longo da leitura, você aprenderá a usar essa forma poderosa e acessível de criar conteúdo dinâmico e interatividade.
Discutiremos o que é o HTMX, por que está ganhando relevância e como se conecta ao WordPress. Você também terá um guia prático sobre como integrar e usar o HTMX com o WordPress.
O que é HTMX
Em poucas palavras, HTMX é uma biblioteca JavaScript que estende a linguagem padrão HTML (HyperText Markup Language) sem necessidade de escrever JavaScript básico ou com framework. Essas extensões também permitem acessar outras tecnologias:
- Asynchronous JavaScript and XML (AJAX). O HTMX usa AJAX para realizar solicitações “assíncronas” ao servidor. Isso permite que você faça atualizações parciais da página sem precisar recarregar a página inteira.
- WebSockets. Você pode estabelecer conexões WebSocket e permitir a comunicação bidirecional em tempo real entre o navegador e o servidor.
- Eventos enviados pelo servidor (SSE). Essa tecnologia permite que o servidor envie dados para o navegador. A partir daí, você pode usar o HTMX para fazer atualizações de página em tempo real.
- Transições CSS. Você pode integrar com transições CSS, o que permite implementar atualizações suaves e animadas em seu site.
Na sua essência, o HTMX busca simplificar a criação de aplicativos web dinâmicos e interativos. Sua funcionalidade principal é a capacidade de fazer solicitações HTTP GET, POST, PUT, PATCH e DELETE a partir de elementos HTML. Isso significa que você pode processar atualizações parciais de página de forma fluida e suave, como em um aplicativo móvel. De modo geral, o HTMX é um poderoso kit de ferramentas que ajuda você a criar uma experiência web dinâmica sem a necessidade de grandes quantidades de código JavaScript.
Por que todos estão falando sobre HTMX
Recentemente tem havido um burburinho em torno do HTMX, com as pesquisas sobre a biblioteca explodindo nos últimos cinco anos.
Esse aumento de popularidade é devido em parte às redes sociais e à visibilidade do fórum de desenvolvedores. Contudo, o HTMX tem vários fatores que o tornam uma opção de desenvolvimento atraente.
- Simplicidade. Como o HTMX usa a familiar sintaxe HTML para ajudar a criar aplicativos web dinâmicos e interativos, é muito simples de implementar e não apresenta quase nada da complexidade dos frameworks JavaScript típicos.
- Desempenho. Por minimizar a quantidade de JavaScript necessária, o HTMX pode proporcionar tempos de carregamento mais rápidos e melhor desempenho do que outros frameworks, especialmente para dispositivos móveis.
- Renderização no lado do servidor. A renderização no lado do servidor é excelente se você quiser melhorar o tempo de carregamento inicial da página e o SEO (otimização para mecanismos de pesquisa). O HTMX incorpora isso em seu conjunto de recursos.
- Aprimoramento progressivo. Isso significa adicionar interatividade aos sites sem prejudicar a funcionalidade para aqueles que desativam o JavaScript. O HTMX trabalha com esses princípios, então você tem um benefício de acessibilidade em mãos.
Além disso, ao contrário de alguns frameworks maiores, o HTMX não exige complexos processo de build ou cadeia de ferramentas. Combinado com uma curva de aprendizado muito mais suave, integrar a biblioteca em seus projetos é mais fácil.
Esses benefícios, por sua vez, levam a uma maior discussão e adoção do HTMX. Se você está procurando uma solução mais direta para criar experiências web interativas, essa biblioteca pode ser a sua escolha.
A arquitetura do WordPress com relação ao JavaScript
A história do WordPress com JavaScript ganhou momento a partir do State of the Word 2015, quando Matt Mullenweg encerrou com a frase: “Aprenda JavaScript profundamente.”
O caminho típico dos desenvolvedores WordPress era pesquisar a necessidade de componentes interativos e dinâmicos em um site. Na maioria dos casos, o jQuery tem sido o framework JavaScript do WordPress. Até mesmo o superpopular site da Harvard Gazette é construído com base no jQuery:
Como tal, o WordPress adiciona o jQuery à fila por padrão. Além disso, muitos dos principais recursos, plugins e temas são amplamente utilizados. Essa abordagem é consistente e tem amplo suporte.
Entretanto, à medida que o desenvolvimento web evolui, o mesmo ocorre com a abordagem do WordPress em relação ao JavaScript. A introdução do Editor de Blocos veio com uma mudança no sentido de usar o framework React para criar interfaces de usuário, especialmente no painel WordPress.
Os prós e os contras de usar a atual implementação JavaScript do WordPress
Isso significa que há uma mistura de frameworks com suporte no código principal do WordPress. Há alguns pontos positivos e negativos nisso. Primeiro, os pontos positivos:
- Há uma ampla compatibilidade com o React e o jQuery. Quanto ao primeiro, trata-se de um framework poderoso e popular. Já o segundo tem uma associação de longa data com o WordPress.
- Muitos desenvolvedores estão familiarizados com os frameworks porque o React e o jQuery são populares. Além disso, você pode encontrar mais recursos para aprender e solucionar problemas de ambos.
- O WordPress oferece suporte integrado para AJAX por meio de
wp_ajax.
Contudo, esses prós são contrabalançados por uma série de pontos negativos:
- Depender do jQuery prejudica o desempenho do seu site, e talvez você nem precise do framework para alguns aplicativos.
- Nem todos os recursos e funcionalidades “modernos” do JavaScript são implementados no WordPress, por razões de compatibilidade e segurança. Isso pode ser um problema se houver algo específico que você gostaria de criar.
- Com a adição do React a áreas do WordPress (como os editores de blocos e de site), você tem uma curva de aprendizado mais íngreme do que nunca.
A atual arquitetura JavaScript do WordPress é adequada se você tiver o conhecimento de desenvolvimento nos frameworks recomendados ou o tempo para aprendê-los. Caso contrário, você provavelmente desejará uma solução sem a complexidade dos frameworks típicos, mas que ainda ofereça uma experiência interativa moderna no frontend. É nesse ponto que o HTMX merece ser considerado.
Por que o HTMX pode ser mais adequado para algumas tarefas de desenvolvimento WordPress
O HTMX oferece algumas vantagens convincentes quando se trata de desenvolvimento WordPress. Pode oferecer um meio-termo entre a simplicidade do jQuery e o moderno e eficiente React.
Já falamos sobre alguns desses aspectos, mas vamos recapitulá-los resumidamente:
- O “peso” do HTMX pode ter um grande impacto no desempenho em comparação com jQuery e React.
- A maioria dos desenvolvedores WordPress se consideram mais experientes em HTML e PHP do que em JavaScript. O HTMX apresenta uma barreira de entrada mais fácil à medida que você trabalha com ele, bem parecido com uma linguagem de marcação.
- O PHP e o HTMX também funcionam bem juntos, graças à renderização do lado do servidor, o que novamente pode ter um impacto positivo no desempenho.
- Apesar de ser uma biblioteca “mais nova”, você pode integrar o HTMX com mais facilidade e se familiarizar rapidamente com o seu funcionamento. Isso beneficiará seu fluxo de trabalho.
Para o desenvolvimento WordPress, também gostamos da facilidade com que você pode criar protótipos de novas funcionalidades para um site. Você pode criar rapidamente novos recursos complexos codificando dentro do HTML existente. A partir daí você tem a flexibilidade de adicionar componentes React ou um pouco de jQuery quando necessário.
Os princípios de aprimoramento progressivo do HTMX também o favorecem. A acessibilidade deve ser central na sua estratégia de design, e o HTMX permite que você crie interatividade sem prejudicá-la para aqueles que optam por desativar o JavaScript no navegador.
Por fim, uma vantagem significativa do HTMX é não exigir nenhuma configuração personalizada ou especial no lado do servidor. Você pode usar sua marcação HTMX com qualquer provedor, inclusive a Kinsta.
Dado o desempenho de qualidade de nossas provisões de hospedagem, um site que usa HTMX deve ser muito rápido. Isso afetará suas métricas de SEO, números de tráfego, tempo de desenvolvimento, fluxo de solução de problemas e toda a cadeia de desenvolvimento.
Casos de uso típicos de HTMX
Tocamos nesse ponto na última seção: o HTMX não é uma biblioteca que você usará como substituto direto de nenhum dos frameworks JavaScript mais conhecidos. Em vez disso, funcionará melhor junto com o que já existe para ajudar a realizar o trabalho quando necessário.
Isso significa que você usará o HTMX para determinadas tarefas para as quais o jQuery e o React talvez não sejam ideais. Antes de começar na implementação do HTMX no WordPress, vamos apresentar três cenários comuns em que a biblioteca pode aprimorar o WordPress.
Recarregamentos parciais de páginas
O grande caso de uso do HTMX é como você pode implementar atualizações parciais de página com mínimo esforço. Isso pode ser uma grande vantagem para muitos desenvolvedores, especialmente para mockups e protótipos rápidos. Todavia, o HTMX pode fornecer resultados com qualidade de produção.
Por exemplo, pode ajudá-lo a implementar a funcionalidade de pesquisa em tempo real no seu site:
A biblioteca de exemplos do HTMX também aborda a metodologia para realizar atualizações em tempo real em outras áreas de conteúdo da página. Assim, este exemplo usa um formulário de contato com uma tabela de contatos disponíveis que seria atualizada quando o usuário envia uma nova adição. O HTMX tem várias maneiras elegantes de fazer isso:
<div id="table-and-form">
<h2>Contacts</h2>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody id="contacts-table">
...
</tbody>
</table>
<h2>Add A Contact</h2>
<form hx-post="/contacts" hx-target="#table-and-form">
<label>
Name
<input name="name" type="text">
</label>
<label>
Email
<input name="email" type="email">
</label>
</form>
</div>
O formulário usa os atributos hx-post e hx-target para expandir seu destino. Você também pode usar atributos HTMX para preservar entradas de formulário após um erro ou outra tentativa de validação que use atualizações:
<input form="binaryForm" type="file" name="binaryFile">
<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
<button type="submit">Submit</button>
</form>
Aqui você coloca a entrada para o arquivo binário fora do elemento principal do formulário e usa os atributos hx-swap e hx-target.
Carregamento dinâmico
Essa abordagem de atualização e carregamento dinâmico também pode ser adequada para tarefas mais comuns. Veja a rolagem infinita, por exemplo:
<tr hx-get="/contacts/?page=2"
hx-trigger="revealed"
hx-swap="afterend">
<td>Agent Smith</td>
<td>[email protected]</td>
<td>55F49448C0</td>
</tr>
O atributo hx-swap atua como um “ouvinte” para o atributo hx-trigger. Quando o usuário chega ao final da lista, o HTMX carrega a segunda página de contatos infinitamente.
Você também pode aplicar o mesmo método à funcionalidade de lazy loading:
Novamente, este usa os atributos hx-get e hx-trigger para iniciar uma transição htmx-settling para carregar o gráfico usando um fade-in lento.
Apresentação de dados
Não é de surpreender que o HTMX seja excelente para apresentar informações na tela usando elementos interativos ou dinâmicos.
Por exemplo, você pode implementar todos os tipos de filtragem de conteúdo, como seleções de valores. É nesse caso que as opções de uma lista são preenchidas com base nas opções de outra lista:
Você pode até mesmo configurar diálogos modais ou abas de interface com a mesma facilidade. Isso também demonstra como o HTMX funciona com outras bibliotecas e frameworks, como o Bootstrap:
Essa flexibilidade também se estende à implementação de abas. Há duas maneiras de fazer isso: combinando JavaScript básico e HTMX, ou usando os princípios de Hypertext As The Engine Of Application State (HATEOAS):
Há muitas outras maneiras de usar o HTMX para elementos de site frontend com seu núcleo no lado do servidor. Na próxima seção, forneceremos as ferramentas para criar sua própria visão no WordPress.
Como integrar o HTMX ao WordPress
Se você quiser adicionar o HTMX ao seu site WordPress, a boa notícia é que é rápido e indolor. A seguir veremos uma abordagem de três etapas para esse trabalho. Não cobriremos todo o processo e o código para desenvolver funcionalidades para WordPress, mas tocaremos em todos os pontos-chave que você precisa seguir.
Além disso, grande parte do processo, especialmente a primeira etapa, deve ser típica se você já tiver desenvolvido para WordPress.
1. Enfileire o HTMX em seu código PHP
Como acontece com qualquer script adicional para WordPress, você deve incluir a biblioteca HTMX no código do seu tema ou plugin.
wp_enqueue_script('htmx-script', 'https://unpkg.com/[email protected]/dist/htmx.min.js', array(), '2.0.0', true);
No entanto, uma ideia decisivamente boa é envolver essa fila em uma função que também enfileire e registre um bloco no WordPress. É claro que isso depende do fato de o seu projeto exigir que você trabalhe com o Editor de Blocos ou não.
A parte final do enfileiramento do HTMX é invocar a função inteira usando add_action. Você precisará voltar a usar hooks e filtros mais tarde, ao trabalhar com solicitações AJAX.
2. Adicione elementos do HTMX aos seus arquivos de template do WordPress
Com base em nossos casos de uso, você verá que o HTMX requer a marcação apropriada no HTML para manipular e acionar solicitações AJAX. A biblioteca usa atributos típicos de solicitação HTTP para criar seus próprios atributos — GET, POST, PUSH, PATCH e DELETE — com um prefixo hx-:
hx-post
As solicitações AJAX do WordPress usam o endpoint admin-ajax.php, do qual você deve se lembrar! Os elementos típicos que você criará com o HTMX farão uma solicitação AJAX, a enviarão para um elemento de destino e, potencialmente, processarão um acionador.
O atributo hx-target permite que você especifique para onde irá o resultado da solicitação. Pode ser outra página, um div específico ou qualquer outra coisa. Pense nisso como tags de âncora HTML:
<input type="search"
name="search" placeholder="Search..."
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
…O HTMX usa “natural” e “não natural” para definir uma ação. Por exemplo, submit acionará um formulário, e esse é um evento de elemento natural. Para eventos de elementos não naturais, você usará o atributo hx-trigger. Esses acionadores podem ser uma das partes mais complexas do HTMX, mas ainda assim são simples de entender.
Por exemplo, você pode usar um acionador para monitorar um campo de entrada:
…
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
hx-trigger="input changed delay:500ms, search"
hx-indicator=".htmx-indicator">
…Se você alterar o que estiver em um campo de entrada, acionará uma atualização em outra parte da página. Como outro exemplo, você pode querer acionar um evento uma única vez com base em uma ação atípica, como a entrada do cursor em uma parte da tela:
<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
[Here Mouse, Mouse!]
</div>
Isso pode inspirar você a criar aplicativos como pop-ups ou outras caixas modais. Entretanto, antes de poder vê-los em ação, você precisa processar a solicitação AJAX.
3. Lide com as solicitações AJAX
Por fim, você precisa tratar a solicitação AJAX no lado do servidor. Para WordPress, é um bom hábito armazenar tudo isso em um arquivo separado. Você pode chamá-lo como quiser, mas ajax-functions.php é descritivo e claro o suficiente.
Essa parte do uso do HTMX exigirá que suas habilidades com PHP entrem em ação. O processamento de suas solicitações AJAX será exclusivo para o seu projeto em particular. É onde você vincula os atributos nomeados em seus arquivos de template ao processamento do lado do servidor.
É claro que você faria isso de qualquer forma, independentemente de codificar com HTMX, JavaScript básico ou qualquer outro. Aqui está um pseudocódigo para mostrar aproximadamente como isso seria:
function my_search_action() {
$search_term = sanitize_text_field( $_POST['search'] );
$args = array(
's' => $search_term,
'post_type' => 'post',
'posts_per_page' => 5
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
echo '<h2>' . get_the_title() . '</h2>';
echo '<p>' . get_the_excerpt() . '</p>';
endwhile;
else:
echo 'No results found.';
endif;
wp_reset_postdata();
wp_die();
}
Mesmo assim, isso pode não ser relevante ou nem mesmo se assemelhar ao tratamento de AJAX do seu próprio projeto. As mesmas habilidades que você usa para construir templates de blocos, estender plugins usando PHP, e outras atividades ajudarão você a criar seus próprios manipuladores de solicitações AJAX e funções.
Dicas para usar o HTMX com o WordPress
Embora o uso do HTMX seja uma das maneiras mais simples de implementar conteúdo dinâmico com WordPress, ainda precisa de gerenciamento e consideração cuidadosos. Há também algumas maneiras de melhorar sua experiência de desenvolvimento.
A primeira dica está relacionada à “maturidade” do HTMX. No momento, trata-se de uma nova biblioteca para a plataforma, portanto, não tem o mesmo nível de integração que o jQuery, por exemplo.
O HTMX tem uma excelente documentação, mas não há tantos recursos para combinar a biblioteca com o WordPress. Isso significa que você precisará fazer o trabalho braçal para que tudo funcione sem a rede de segurança de uma comunidade pronta.
Um dos grandes conselhos que podemos dar é criar sua funcionalidade em um plugin, por enquanto. Isso pode proporcionar uma estrutura e um gerenciamento mais fácil enquanto você verifica se há bugs e outros erros de integração.
Já que estamos falando de WordPress, procure entender como o arquivo admin-ajax.php se conecta com o restante do ecossistema, pois muitas interações estarão envolvidas.
Embora o HTMX tenha um ótimo desempenho, você deve garantir que o uso do AJAX seja baixo o suficiente para não afetar a velocidade de carregamento do site ou o SEO. A depuração de solicitações também deve ser um elemento básico do seu fluxo de trabalho, especialmente as métricas XMLHttpRequest (XHR) nas ferramentas de desenvolvimento do navegador.
Esse é o registro dos dados de solicitação e resposta, que você usará para depurar solicitações AJAX e chamadas de API (Application Programming Interface). Como o HTMX ainda não tem uma integração perfeita com o WordPress, a depuração pode ser uma tarefa mais pertinente do que seria com outros frameworks JavaScript.
Resumo
Para desenvolvedores WordPress que desejam criar elementos dinâmicos e interativos no site sem que frameworks JavaScript complexos tomem todo o seu tempo, o HTMX traz uma proposta empolgante. Ele permite que você construa dentro do HTML e oferece uma alternativa simplificada ao jQuery e ao React, mas ainda proporcionando uma interatividade moderna.
Na prática, você usará o HTMX junto com esses outros frameworks, pois ele não será adequado para todas as tarefas. Mesmo assim, é simples de implementar e oferece uma maneira rápida de prototipar os elementos interativos do seu site – e pode até se tornar sua versão de produção.
HTMX com WordPress parece uma combinação tentadora pra você? Deixe-nos saber suas opiniões na seção de comentários abaixo!
Deixe um comentário