O que \u00e9 HTMX<\/h2>\n![\"The](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/htmx-logo.png\")
A logomarca do HTMX.<\/figcaption><\/figure>\nEm poucas palavras, HTMX<\/a> \u00e9 uma biblioteca JavaScript que estende a linguagem padr\u00e3o HTML (HyperText Markup Language)<\/a> sem necessidade de escrever JavaScript<\/a> b\u00e1sico ou com framework. Essas extens\u00f5es tamb\u00e9m <\/span>permitem <\/span>acessar outras tecnologias:<\/span><\/p>\n\n- Asynchronous JavaScript and XML (AJAX).<\/strong> O HTMX usa AJAX para realizar solicita\u00e7\u00f5es “ass\u00edncronas” ao servidor. Isso permite que voc\u00ea fa\u00e7a atualiza\u00e7\u00f5es parciais da p\u00e1gina sem precisar recarregar a p\u00e1gina inteira.<\/li>\n
- WebSockets.<\/strong> Voc\u00ea pode estabelecer conex\u00f5es WebSocket e permitir a comunica\u00e7\u00e3o bidirecional em tempo real entre o navegador e o servidor.<\/li>\n
- Eventos enviados pelo servidor (SSE).<\/strong> Essa tecnologia permite que o servidor envie dados para o navegador. A partir da\u00ed, voc\u00ea pode usar o HTMX para fazer atualiza\u00e7\u00f5es de p\u00e1gina em tempo real.<\/li>\n
- Transi\u00e7\u00f5es CSS.<\/strong> Voc\u00ea pode integrar com transi\u00e7\u00f5es CSS<\/a>, o que permite implementar atualiza\u00e7\u00f5es suaves e animadas em seu site.<\/li>\n<\/ul>\n
Na sua ess\u00eancia, o HTMX busca simplificar a cria\u00e7\u00e3o de aplicativos web din\u00e2micos e interativos. Sua\u00a0funcionalidade<\/span>\u00a0<\/span>principal \u00e9 a capacidade de fazer <\/span>solicita\u00e7\u00f5es HTTP<\/a> GET<\/code>, <\/span>POST<\/code>, <\/span>PUT<\/code>, <\/span>PATCH<\/code> e <\/span>DELETE<\/code> a partir de elementos HTML. Isso significa que voc\u00ea pode processar atualiza\u00e7\u00f5es\u00a0<\/span>parciais<\/span>\u00a0<\/span>de p\u00e1gina <\/span>de forma fluida e suave, como em um aplicativo m\u00f3vel. De modo <\/span>geral, o HTMX \u00e9 um\u00a0poderoso<\/span>\u00a0<\/span>kit de ferramentas que ajuda voc\u00ea a criar uma experi\u00eancia web din\u00e2mica sem a necessidade de grandes quantidades de c\u00f3digo JavaScript.<\/span><\/p>\nPor que todos est\u00e3o falando sobre HTMX<\/h2>\n
Recentemente tem havido um burburinho em torno do HTMX, com as pesquisas sobre a biblioteca explodindo nos \u00faltimos cinco anos<\/a>.<\/p>\n![\"Um](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/htmx-trends.png\")
O gr\u00e1fico do Google Trends mostra um aumento nas pesquisas sobre HTMX num per\u00edodo de cinco anos.<\/figcaption><\/figure>\nEsse aumento de popularidade \u00e9 devido em parte \u00e0s redes sociais e \u00e0 visibilidade do f\u00f3rum de desenvolvedores. Contudo, o HTMX tem v\u00e1rios fatores que o tornam uma op\u00e7\u00e3o de desenvolvimento atraente.<\/p>\n
\n- Simplicidade.<\/strong> Como o HTMX usa a familiar sintaxe HTML para ajudar a criar aplicativos web din\u00e2micos e interativos, \u00e9 muito simples de implementar e n\u00e3o apresenta quase nada da complexidade dos frameworks JavaScript t\u00edpicos<\/a>.<\/li>\n
- Desempenho.<\/strong> Por minimizar a quantidade de JavaScript necess\u00e1ria, o HTMX pode proporcionar tempos de carregamento mais r\u00e1pidos<\/a> e melhor desempenho do que outros frameworks, especialmente para dispositivos m\u00f3veis.<\/li>\n
- Renderiza\u00e7\u00e3o no lado do servidor.<\/strong> A renderiza\u00e7\u00e3o no lado do servidor \u00e9 excelente se voc\u00ea quiser melhorar o tempo de carregamento inicial da p\u00e1gina e o SEO (otimiza\u00e7\u00e3o para mecanismos de pesquisa)<\/a>. O HTMX incorpora isso em seu conjunto de recursos.<\/li>\n
- Aprimoramento progressivo.<\/strong> Isso significa adicionar interatividade aos sites sem prejudicar a funcionalidade para aqueles que desativam o JavaScript. O HTMX trabalha com esses princ\u00edpios, ent\u00e3o voc\u00ea tem um benef\u00edcio de acessibilidade em m\u00e3os.<\/li>\n<\/ul>\n
Al\u00e9m disso, ao contr\u00e1rio de alguns frameworks maiores, o HTMX n\u00e3o exige complexos processo de build ou cadeia de ferramentas. Combinado com uma curva de aprendizado muito mais suave, integrar a biblioteca em seus projetos \u00e9 mais f\u00e1cil.<\/span><\/p>\nEsses benef\u00edcios, por sua vez, levam a uma maior discuss\u00e3o e ado\u00e7\u00e3o do HTMX. Se voc\u00ea est\u00e1 procurando uma solu\u00e7\u00e3o mais direta para criar experi\u00eancias web interativas, essa biblioteca pode ser a sua escolha.<\/p>\n
A arquitetura do WordPress com rela\u00e7\u00e3o ao JavaScript<\/h2>\n
A hist\u00f3ria do WordPress com JavaScript ganhou momento a partir do State of the Word 2015<\/a>, quando Matt Mullenweg encerrou com a frase: “Aprenda JavaScript profundamente.”<\/p>\nO caminho t\u00edpico dos desenvolvedores WordPress era pesquisar a necessidade de componentes interativos e din\u00e2micos em um site. Na maioria dos casos, o\u00a0jQuery<\/a> tem sido o framework JavaScript do WordPress. At\u00e9 mesmo o superpopular site da Harvard Gazette<\/a> \u00e9 constru\u00eddo com base no jQuery:<\/p>\n![\"A](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/harvard-gazette.png\")
O site da Harvard Gazette, que usa WordPress e jQuery para funcionar.<\/figcaption><\/figure>\nComo tal, o WordPress adiciona o jQuery \u00e0 fila<\/a> por padr\u00e3o. Al\u00e9m disso, muitos dos principais recursos, plugins e temas s\u00e3o amplamente utilizados. Essa abordagem \u00e9 consistente e tem amplo suporte.<\/p>\n![\"A](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/block-editor.png\")
Mostrando a barra lateral Blocos no Editor de Blocos do WordPress.<\/figcaption><\/figure>\nEntretanto, \u00e0 medida que o desenvolvimento web evolui, o mesmo ocorre com a abordagem do WordPress em rela\u00e7\u00e3o ao JavaScript. A introdu\u00e7\u00e3o do Editor de Blocos<\/a> veio com uma mudan\u00e7a no sentido de usar o framework React<\/a> para criar interfaces de usu\u00e1rio, especialmente no painel WordPress.<\/p>\nOs pr\u00f3s e os contras de usar a atual implementa\u00e7\u00e3o JavaScript do WordPress<\/h3>\n
Isso significa que h\u00e1 uma mistura de frameworks com suporte no c\u00f3digo principal do WordPress. H\u00e1 alguns pontos positivos e negativos nisso. Primeiro, os pontos positivos:<\/p>\n
\n- H\u00e1 uma ampla compatibilidade com o React e o jQuery. Quanto ao primeiro, trata-se de um framework poderoso e popular. J\u00e1 o segundo tem uma associa\u00e7\u00e3o de longa data com o WordPress.<\/li>\n
- Muitos desenvolvedores est\u00e3o familiarizados com os frameworks porque o React e o jQuery s\u00e3o populares. Al\u00e9m disso, voc\u00ea pode encontrar mais recursos para aprender e solucionar problemas de ambos.<\/li>\n
- O WordPress oferece suporte integrado para AJAX por meio de
wp_ajax<\/code>.<\/li>\n<\/ul>\nContudo, esses pr\u00f3s s\u00e3o contrabalan\u00e7ados por uma s\u00e9rie de pontos negativos:<\/p>\n
\n- Depender do jQuery<\/a> prejudica o desempenho do seu site, e talvez voc\u00ea nem precise do framework para alguns aplicativos.<\/li>\n
- Nem todos os recursos e funcionalidades “modernos” do JavaScript s\u00e3o implementados no WordPress, por raz\u00f5es de compatibilidade e seguran\u00e7a. Isso pode ser um problema se houver algo espec\u00edfico que voc\u00ea gostaria de criar.<\/li>\n
- Com a adi\u00e7\u00e3o do React a \u00e1reas do WordPress (como os editores de blocos e de site), voc\u00ea tem uma curva de aprendizado mais \u00edngreme do que nunca.<\/li>\n<\/ul>\n
A\u00a0atual<\/span>\u00a0<\/span>arquitetura JavaScript do WordPress \u00e9 adequada se voc\u00ea tiver o conhecimento de desenvolvimento nos frameworks recomendados ou o tempo para aprend\u00ea-los. Caso contr\u00e1rio, voc\u00ea provavelmente desejar\u00e1 uma solu\u00e7\u00e3o sem a complexidade dos frameworks t\u00edpicos, mas que ainda ofere\u00e7a uma experi\u00eancia interativa moderna no frontend. \u00c9 nesse ponto que o HTMX merece ser considerado.<\/span><\/p>\nPor que o HTMX pode ser mais adequado para algumas tarefas de desenvolvimento WordPress<\/h2>\n
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.<\/p>\n
J\u00e1 falamos sobre alguns desses aspectos, mas vamos recapitul\u00e1-los resumidamente:<\/p>\n
\n- O “peso” do HTMX pode ter um grande impacto no desempenho em compara\u00e7\u00e3o com jQuery e React.<\/li>\n
- 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\u00e1cil \u00e0 medida que voc\u00ea trabalha com ele, bem parecido com uma linguagem de marca\u00e7\u00e3o.<\/li>\n
- O PHP e o HTMX tamb\u00e9m funcionam bem juntos, gra\u00e7as \u00e0 renderiza\u00e7\u00e3o do lado do servidor, o que novamente pode ter um impacto positivo no desempenho.<\/li>\n
- Apesar de ser uma biblioteca “mais nova”, voc\u00ea pode integrar o HTMX com mais facilidade e se familiarizar rapidamente com o seu funcionamento. Isso beneficiar\u00e1 seu fluxo de trabalho.<\/li>\n<\/ul>\n
Para o desenvolvimento WordPress, tamb\u00e9m gostamos da facilidade com que voc\u00ea pode criar prot\u00f3tipos de novas funcionalidades para um site. Voc\u00ea pode criar rapidamente novos recursos complexos codificando dentro do HTML existente. A partir da\u00ed voc\u00ea tem a flexibilidade de adicionar componentes React ou um pouco de jQuery quando necess\u00e1rio.<\/p>\n
Os princ\u00edpios de aprimoramento progressivo do HTMX tamb\u00e9m o favorecem. A acessibilidade deve ser central na sua estrat\u00e9gia de design, e o HTMX permite que voc\u00ea crie interatividade sem prejudic\u00e1-la para aqueles que optam por desativar o JavaScript no navegador.<\/p>\n
Por fim, uma vantagem significativa do HTMX \u00e9 n\u00e3o exigir nenhuma configura\u00e7\u00e3o personalizada ou especial no lado do servidor. Voc\u00ea pode usar sua marca\u00e7\u00e3o HTMX com qualquer provedor, inclusive a Kinsta<\/a>.<\/p>\n![\"A](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/kinsta-website.png\")
A p\u00e1gina inicial da Kinsta mostrando o painel MyKinsta.<\/figcaption><\/figure>\nDado o desempenho de qualidade de nossas provis\u00f5es de hospedagem, um site que usa HTMX deve ser muito r\u00e1pido. Isso afetar\u00e1 suas m\u00e9tricas de SEO, n\u00fameros de tr\u00e1fego, tempo de desenvolvimento, fluxo de solu\u00e7\u00e3o de problemas e toda a cadeia de desenvolvimento.<\/p>\n
Casos de uso t\u00edpicos de HTMX<\/h2>\n
Tocamos nesse ponto na \u00faltima se\u00e7\u00e3o: o HTMX n\u00e3o \u00e9 uma biblioteca que voc\u00ea usar\u00e1 como substituto direto de nenhum dos frameworks JavaScript mais conhecidos. Em vez disso, funcionar\u00e1 melhor junto com o que j\u00e1 existe para ajudar a realizar o trabalho quando necess\u00e1rio.<\/p>\n
Isso significa que voc\u00ea usar\u00e1 o HTMX para determinadas tarefas para as quais o jQuery e o React talvez n\u00e3o sejam ideais. Antes de come\u00e7ar na implementa\u00e7\u00e3o do HTMX no WordPress, vamos apresentar tr\u00eas cen\u00e1rios comuns em que a biblioteca pode aprimorar o WordPress.<\/p>\n
<\/div><\/kinsta-auto-toc>\nRecarregamentos parciais de p\u00e1ginas<\/h3>\n
O grande caso de uso do HTMX \u00e9 como voc\u00ea pode implementar atualiza\u00e7\u00f5es parciais de p\u00e1gina com m\u00ednimo esfor\u00e7o. Isso pode ser uma grande vantagem para muitos desenvolvedores, especialmente para mockups e prot\u00f3tipos r\u00e1pidos. Todavia, o HTMX pode fornecer resultados com qualidade de produ\u00e7\u00e3o.<\/p>\n
Por exemplo, pode ajud\u00e1-lo a implementar a funcionalidade de pesquisa em tempo real no seu site:<\/p>\n![\"Um](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/live-search.gif\")
Uma interface de pesquisa din\u00e2mica e em tempo real usando o HTMX.<\/figcaption><\/figure>\nA biblioteca de exemplos<\/a> do HTMX tamb\u00e9m aborda a metodologia para realizar atualiza\u00e7\u00f5es em tempo real em outras \u00e1reas de conte\u00fado da p\u00e1gina. Assim, este exemplo<\/a> usa um formul\u00e1rio de contato com uma tabela de contatos dispon\u00edveis que seria atualizada quando o usu\u00e1rio envia uma nova adi\u00e7\u00e3o. O HTMX tem v\u00e1rias maneiras elegantes de fazer isso:<\/p>\n<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nO formul\u00e1rio usa os atributos hx-post<\/code> e hx-target<\/code> para expandir seu destino. Voc\u00ea tamb\u00e9m pode usar atributos HTMX para preservar entradas de formul\u00e1rio<\/a> ap\u00f3s um erro ou outra tentativa de valida\u00e7\u00e3o que use atualiza\u00e7\u00f5es:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nAqui voc\u00ea coloca a entrada para o arquivo bin\u00e1rio fora do elemento principal do formul\u00e1rio e usa os atributos hx-swap<\/code> e hx-target<\/code>.<\/p>\nCarregamento din\u00e2mico<\/h3>\n
Essa abordagem de atualiza\u00e7\u00e3o e carregamento din\u00e2mico tamb\u00e9m pode ser adequada para tarefas mais comuns. Veja a rolagem infinita<\/a>, por exemplo:<\/p>\n<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nO atributo hx-swap<\/code> atua como um “ouvinte” para o atributo hx-trigger<\/code>. Quando o usu\u00e1rio chega ao final da lista, o HTMX carrega a segunda p\u00e1gina de contatos infinitamente.<\/p>\nVoc\u00ea tamb\u00e9m pode aplicar o mesmo m\u00e9todo \u00e0 funcionalidade de lazy loading<\/a>:<\/p>\n![\"Um](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/lazy-loading-gif.gif\")
Usando o HTMX para implementar o Lazy Loading.<\/figcaption><\/figure>\nNovamente, este usa os atributos hx-get<\/code> e hx-trigger<\/code> para iniciar uma transi\u00e7\u00e3o htmx-settling para carregar o gr\u00e1fico usando um fade-in lento.<\/p>\nApresenta\u00e7\u00e3o de dados<\/h3>\n
N\u00e3o \u00e9 de surpreender que o HTMX seja excelente para apresentar informa\u00e7\u00f5es na tela usando elementos interativos ou din\u00e2micos.<\/p>\n
Por exemplo, voc\u00ea pode implementar todos os tipos de filtragem de conte\u00fado, como sele\u00e7\u00f5es de valores<\/a>. \u00c9 nesse caso que as op\u00e7\u00f5es de uma lista s\u00e3o preenchidas com base nas op\u00e7\u00f5es de outra lista:<\/p>\n![\"Um](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/value-select-gif.gif\")
Usando HTMX para atribuir sele\u00e7\u00f5es de valores a elementos do site.<\/figcaption><\/figure>\nVoc\u00ea pode at\u00e9 mesmo configurar di\u00e1logos modais<\/a> ou abas de interface com a mesma facilidade. Isso tamb\u00e9m demonstra como o HTMX funciona com outras bibliotecas e frameworks, como o Bootstrap:<\/p>\n![\"Um](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/modal-box-gif.gif\")
Abrindo uma caixa de di\u00e1logo modal usando o HTMX.<\/figcaption><\/figure>\nEssa flexibilidade tamb\u00e9m se estende \u00e0 implementa\u00e7\u00e3o de abas. H\u00e1 duas maneiras de fazer isso: combinando JavaScript b\u00e1sico<\/a> e HTMX, ou usando os princ\u00edpios de Hypertext As The Engine Of Application State (HATEOAS)<\/a>:<\/p>\n![\"Um](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/07\/content-tabs.gif\")
Um GIF de uma interface com abas usando HTMX.<\/figcaption><\/figure>\nH\u00e1 muitas outras maneiras de usar o HTMX para elementos de site frontend com seu n\u00facleo no lado do servidor. Na pr\u00f3xima se\u00e7\u00e3o, forneceremos as ferramentas para criar sua pr\u00f3pria vis\u00e3o no WordPress.<\/p>\n
Como integrar o HTMX ao WordPress<\/h2>\n
Se voc\u00ea quiser adicionar o HTMX ao seu site WordPress, a boa not\u00edcia \u00e9 que \u00e9 r\u00e1pido e indolor. A seguir veremos uma abordagem de tr\u00eas etapas para esse trabalho. N\u00e3o cobriremos todo o processo e o c\u00f3digo para desenvolver funcionalidades para WordPress, mas tocaremos em todos os pontos-chave que voc\u00ea precisa seguir.<\/p>\n
Al\u00e9m disso, grande parte do processo, especialmente a primeira etapa, deve ser t\u00edpica se voc\u00ea j\u00e1 tiver desenvolvido para WordPress.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Enfileire o HTMX em seu c\u00f3digo PHP<\/h3>\n
Como acontece com qualquer script adicional para WordPress, voc\u00ea deve incluir a biblioteca HTMX no c\u00f3digo do seu tema ou plugin.<\/p>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n
Em poucas palavras, HTMX<\/a> \u00e9 uma biblioteca JavaScript que estende a linguagem padr\u00e3o HTML (HyperText Markup Language)<\/a> sem necessidade de escrever JavaScript<\/a> b\u00e1sico ou com framework. Essas extens\u00f5es tamb\u00e9m <\/span>permitem <\/span>acessar outras tecnologias:<\/span><\/p>\n Na sua ess\u00eancia, o HTMX busca simplificar a cria\u00e7\u00e3o de aplicativos web din\u00e2micos e interativos. Sua\u00a0funcionalidade<\/span>\u00a0<\/span>principal \u00e9 a capacidade de fazer <\/span>solicita\u00e7\u00f5es HTTP<\/a> Recentemente tem havido um burburinho em torno do HTMX, com as pesquisas sobre a biblioteca explodindo nos \u00faltimos cinco anos<\/a>.<\/p>\n Esse aumento de popularidade \u00e9 devido em parte \u00e0s redes sociais e \u00e0 visibilidade do f\u00f3rum de desenvolvedores. Contudo, o HTMX tem v\u00e1rios fatores que o tornam uma op\u00e7\u00e3o de desenvolvimento atraente.<\/p>\n Al\u00e9m disso, ao contr\u00e1rio de alguns frameworks maiores, o HTMX n\u00e3o exige complexos processo de build ou cadeia de ferramentas. Combinado com uma curva de aprendizado muito mais suave, integrar a biblioteca em seus projetos \u00e9 mais f\u00e1cil.<\/span><\/p>\n Esses benef\u00edcios, por sua vez, levam a uma maior discuss\u00e3o e ado\u00e7\u00e3o do HTMX. Se voc\u00ea est\u00e1 procurando uma solu\u00e7\u00e3o mais direta para criar experi\u00eancias web interativas, essa biblioteca pode ser a sua escolha.<\/p>\n A hist\u00f3ria do WordPress com JavaScript ganhou momento a partir do State of the Word 2015<\/a>, quando Matt Mullenweg encerrou com a frase: “Aprenda JavaScript profundamente.”<\/p>\n O caminho t\u00edpico dos desenvolvedores WordPress era pesquisar a necessidade de componentes interativos e din\u00e2micos em um site. Na maioria dos casos, o\u00a0jQuery<\/a> tem sido o framework JavaScript do WordPress. At\u00e9 mesmo o superpopular site da Harvard Gazette<\/a> \u00e9 constru\u00eddo com base no jQuery:<\/p>\n Como tal, o WordPress adiciona o jQuery \u00e0 fila<\/a> por padr\u00e3o. Al\u00e9m disso, muitos dos principais recursos, plugins e temas s\u00e3o amplamente utilizados. Essa abordagem \u00e9 consistente e tem amplo suporte.<\/p>\n Entretanto, \u00e0 medida que o desenvolvimento web evolui, o mesmo ocorre com a abordagem do WordPress em rela\u00e7\u00e3o ao JavaScript. A introdu\u00e7\u00e3o do Editor de Blocos<\/a> veio com uma mudan\u00e7a no sentido de usar o framework React<\/a> para criar interfaces de usu\u00e1rio, especialmente no painel WordPress.<\/p>\n Isso significa que h\u00e1 uma mistura de frameworks com suporte no c\u00f3digo principal do WordPress. H\u00e1 alguns pontos positivos e negativos nisso. Primeiro, os pontos positivos:<\/p>\n Contudo, esses pr\u00f3s s\u00e3o contrabalan\u00e7ados por uma s\u00e9rie de pontos negativos:<\/p>\n A\u00a0atual<\/span>\u00a0<\/span>arquitetura JavaScript do WordPress \u00e9 adequada se voc\u00ea tiver o conhecimento de desenvolvimento nos frameworks recomendados ou o tempo para aprend\u00ea-los. Caso contr\u00e1rio, voc\u00ea provavelmente desejar\u00e1 uma solu\u00e7\u00e3o sem a complexidade dos frameworks t\u00edpicos, mas que ainda ofere\u00e7a uma experi\u00eancia interativa moderna no frontend. \u00c9 nesse ponto que o HTMX merece ser considerado.<\/span><\/p>\n 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.<\/p>\n J\u00e1 falamos sobre alguns desses aspectos, mas vamos recapitul\u00e1-los resumidamente:<\/p>\n Para o desenvolvimento WordPress, tamb\u00e9m gostamos da facilidade com que voc\u00ea pode criar prot\u00f3tipos de novas funcionalidades para um site. Voc\u00ea pode criar rapidamente novos recursos complexos codificando dentro do HTML existente. A partir da\u00ed voc\u00ea tem a flexibilidade de adicionar componentes React ou um pouco de jQuery quando necess\u00e1rio.<\/p>\n Os princ\u00edpios de aprimoramento progressivo do HTMX tamb\u00e9m o favorecem. A acessibilidade deve ser central na sua estrat\u00e9gia de design, e o HTMX permite que voc\u00ea crie interatividade sem prejudic\u00e1-la para aqueles que optam por desativar o JavaScript no navegador.<\/p>\n Por fim, uma vantagem significativa do HTMX \u00e9 n\u00e3o exigir nenhuma configura\u00e7\u00e3o personalizada ou especial no lado do servidor. Voc\u00ea pode usar sua marca\u00e7\u00e3o HTMX com qualquer provedor, inclusive a Kinsta<\/a>.<\/p>\n Dado o desempenho de qualidade de nossas provis\u00f5es de hospedagem, um site que usa HTMX deve ser muito r\u00e1pido. Isso afetar\u00e1 suas m\u00e9tricas de SEO, n\u00fameros de tr\u00e1fego, tempo de desenvolvimento, fluxo de solu\u00e7\u00e3o de problemas e toda a cadeia de desenvolvimento.<\/p>\n Tocamos nesse ponto na \u00faltima se\u00e7\u00e3o: o HTMX n\u00e3o \u00e9 uma biblioteca que voc\u00ea usar\u00e1 como substituto direto de nenhum dos frameworks JavaScript mais conhecidos. Em vez disso, funcionar\u00e1 melhor junto com o que j\u00e1 existe para ajudar a realizar o trabalho quando necess\u00e1rio.<\/p>\n Isso significa que voc\u00ea usar\u00e1 o HTMX para determinadas tarefas para as quais o jQuery e o React talvez n\u00e3o sejam ideais. Antes de come\u00e7ar na implementa\u00e7\u00e3o do HTMX no WordPress, vamos apresentar tr\u00eas cen\u00e1rios comuns em que a biblioteca pode aprimorar o WordPress.<\/p>\n O grande caso de uso do HTMX \u00e9 como voc\u00ea pode implementar atualiza\u00e7\u00f5es parciais de p\u00e1gina com m\u00ednimo esfor\u00e7o. Isso pode ser uma grande vantagem para muitos desenvolvedores, especialmente para mockups e prot\u00f3tipos r\u00e1pidos. Todavia, o HTMX pode fornecer resultados com qualidade de produ\u00e7\u00e3o.<\/p>\n Por exemplo, pode ajud\u00e1-lo a implementar a funcionalidade de pesquisa em tempo real no seu site:<\/p>\n A biblioteca de exemplos<\/a> do HTMX tamb\u00e9m aborda a metodologia para realizar atualiza\u00e7\u00f5es em tempo real em outras \u00e1reas de conte\u00fado da p\u00e1gina. Assim, este exemplo<\/a> usa um formul\u00e1rio de contato com uma tabela de contatos dispon\u00edveis que seria atualizada quando o usu\u00e1rio envia uma nova adi\u00e7\u00e3o. O HTMX tem v\u00e1rias maneiras elegantes de fazer isso:<\/p>\n O formul\u00e1rio usa os atributos Aqui voc\u00ea coloca a entrada para o arquivo bin\u00e1rio fora do elemento principal do formul\u00e1rio e usa os atributos Essa abordagem de atualiza\u00e7\u00e3o e carregamento din\u00e2mico tamb\u00e9m pode ser adequada para tarefas mais comuns. Veja a rolagem infinita<\/a>, por exemplo:<\/p>\n O atributo Voc\u00ea tamb\u00e9m pode aplicar o mesmo m\u00e9todo \u00e0 funcionalidade de lazy loading<\/a>:<\/p>\n Novamente, este usa os atributos N\u00e3o \u00e9 de surpreender que o HTMX seja excelente para apresentar informa\u00e7\u00f5es na tela usando elementos interativos ou din\u00e2micos.<\/p>\n Por exemplo, voc\u00ea pode implementar todos os tipos de filtragem de conte\u00fado, como sele\u00e7\u00f5es de valores<\/a>. \u00c9 nesse caso que as op\u00e7\u00f5es de uma lista s\u00e3o preenchidas com base nas op\u00e7\u00f5es de outra lista:<\/p>\n Voc\u00ea pode at\u00e9 mesmo configurar di\u00e1logos modais<\/a> ou abas de interface com a mesma facilidade. Isso tamb\u00e9m demonstra como o HTMX funciona com outras bibliotecas e frameworks, como o Bootstrap:<\/p>\n Essa flexibilidade tamb\u00e9m se estende \u00e0 implementa\u00e7\u00e3o de abas. H\u00e1 duas maneiras de fazer isso: combinando JavaScript b\u00e1sico<\/a> e HTMX, ou usando os princ\u00edpios de Hypertext As The Engine Of Application State (HATEOAS)<\/a>:<\/p>\n H\u00e1 muitas outras maneiras de usar o HTMX para elementos de site frontend com seu n\u00facleo no lado do servidor. Na pr\u00f3xima se\u00e7\u00e3o, forneceremos as ferramentas para criar sua pr\u00f3pria vis\u00e3o no WordPress.<\/p>\n Se voc\u00ea quiser adicionar o HTMX ao seu site WordPress, a boa not\u00edcia \u00e9 que \u00e9 r\u00e1pido e indolor. A seguir veremos uma abordagem de tr\u00eas etapas para esse trabalho. N\u00e3o cobriremos todo o processo e o c\u00f3digo para desenvolver funcionalidades para WordPress, mas tocaremos em todos os pontos-chave que voc\u00ea precisa seguir.<\/p>\n Al\u00e9m disso, grande parte do processo, especialmente a primeira etapa, deve ser t\u00edpica se voc\u00ea j\u00e1 tiver desenvolvido para WordPress.<\/p>\n Como acontece com qualquer script adicional para WordPress, voc\u00ea deve incluir a biblioteca HTMX no c\u00f3digo do seu tema ou plugin.<\/p>\n\n
GET<\/code>, <\/span>POST<\/code>, <\/span>PUT<\/code>, <\/span>PATCH<\/code> e <\/span>DELETE<\/code> a partir de elementos HTML. Isso significa que voc\u00ea pode processar atualiza\u00e7\u00f5es\u00a0<\/span>parciais<\/span>\u00a0<\/span>de p\u00e1gina <\/span>de forma fluida e suave, como em um aplicativo m\u00f3vel. De modo <\/span>geral, o HTMX \u00e9 um\u00a0poderoso<\/span>\u00a0<\/span>kit de ferramentas que ajuda voc\u00ea a criar uma experi\u00eancia web din\u00e2mica sem a necessidade de grandes quantidades de c\u00f3digo JavaScript.<\/span><\/p>\nPor que todos est\u00e3o falando sobre HTMX<\/h2>\n
\n
A arquitetura do WordPress com rela\u00e7\u00e3o ao JavaScript<\/h2>\n
Os pr\u00f3s e os contras de usar a atual implementa\u00e7\u00e3o JavaScript do WordPress<\/h3>\n
\n
wp_ajax<\/code>.<\/li>\n<\/ul>\n\n
Por que o HTMX pode ser mais adequado para algumas tarefas de desenvolvimento WordPress<\/h2>\n
\n
Casos de uso t\u00edpicos de HTMX<\/h2>\n
Recarregamentos parciais de p\u00e1ginas<\/h3>\n
<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nhx-post<\/code> e hx-target<\/code> para expandir seu destino. Voc\u00ea tamb\u00e9m pode usar atributos HTMX para preservar entradas de formul\u00e1rio<\/a> ap\u00f3s um erro ou outra tentativa de valida\u00e7\u00e3o que use atualiza\u00e7\u00f5es:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nhx-swap<\/code> e hx-target<\/code>.<\/p>\nCarregamento din\u00e2mico<\/h3>\n
<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nhx-swap<\/code> atua como um “ouvinte” para o atributo hx-trigger<\/code>. Quando o usu\u00e1rio chega ao final da lista, o HTMX carrega a segunda p\u00e1gina de contatos infinitamente.<\/p>\nhx-get<\/code> e hx-trigger<\/code> para iniciar uma transi\u00e7\u00e3o htmx-settling para carregar o gr\u00e1fico usando um fade-in lento.<\/p>\nApresenta\u00e7\u00e3o de dados<\/h3>\n
Como integrar o HTMX ao WordPress<\/h2>\n
1. Enfileire o HTMX em seu c\u00f3digo PHP<\/h3>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n