Por que você deve escolher HTMX para o seu próximo projeto paralelo baseado na web - e abandonar o MPA antiquado e o complexo SPA

Eu construo muitos projetos paralelos, por isso estou sempre à procura de tecnologias e paradigmas que me permitam construí-los de forma mais rápida e económica, mantendo uma qualidade semelhante. Nos últimos meses, tenho experimentado construir aplicações web com ferramentas de baixo-js, como HTM e Alpine.

Neste post, vou compartilhar por que acho que o HTMX é uma ótima escolha para construir aplicações web de forma mais rápida e barata e por que agora é uma parte fundamental da minha pilha tecnológica - A Pilha HAM.

MPA vs SPA
MPA vs SPA

Aplicações de Várias Páginas (MPA)
No início, tínhamos Aplicações de Múltiplas Páginas (MPA).

Cada URL leva a uma página da web
Esta página da web é renderizada do lado do servidor e enviada de volta ao utilizador
Se precisar de atualizar algo na página ( porque um utilizador alterou algo ou precisa de atualizar ), então a página completa precisa de ser recarregada.
Isso funciona bem, mas dá uma sensação muito lenta / pesada porque você precisa recarregar TUDO sempre que algo na página muda. Para um exemplo disso - pense em um site de governo estadual, a maioria deles ainda são MPAs à moda antiga e sentem-se antigos e pesados em comparação com a maioria dos aplicativos modernos.

Prós e Contras do MPA

Prós: Simples de construir
Contras: Sente-se lento e desajeitado devido a atualizações
Single-Page Apps (SPA)
Para resolver isso, foram criadas Aplicações de Página Única (SPA).

Uma URL carrega uma grande carga útil JS contendo um monte de lógica de aplicativo
Este JS assume a renderização da página
Ele usa o estado interno para determinar como a página deve parecer e faz transferências de dados nos bastidores, de modo que só precisa atualizar as partes da página que precisam mudar.
Isto parece melhor para o utilizador porque as alterações parecem mais rápidas. A página apenas atualiza onde é necessário e não precisamos de uma atualização total da página para alterar dados. A maioria das aplicações / websites hoje em dia sente-se assim porque, em geral, proporciona uma melhor experiência ao utilizador.

Prós: Ricas experiências de utilizador "modernas"
Contras: Complexa em grande escala - lidando com transferências de dados (graphQL foi construída para isso), abstrações e tamanhos de carga útil da lógica do aplicativo
Então, em geral:

Aplicações de Múltiplas Páginas (MPA) - Simples de construir, mas difíceis de proporcionar experiências "modernas" ricas para o usuário
Aplicações de Página Única (SPA) - Complexas de construir, mas podem alcançar experiências ricas de "moderno" para o usuário
MPA vs HTMX vs SPA
MPA vs HTMX vs SPA

Inspiração da imagem de u/Abhilash26 no r/htmx.

HTMX existe há vários anos, mas realmente ganhou grande popularidade no último ano. O entusiasmo não é infundado - frequentemente permite que você construa aplicações web modernas mais rapidamente e de forma mais econômica do que um SPA.

HTMX essencialmente estende o HTML para que possa fazer recargas parciais de página.

Qualquer elemento pode especificar como pode recuperar dados atualizados e quando deve fazer isso.
O elemento pode então especificar o que fazer com os novos dados - substituir-se ou outros elementos na página.
Se olharmos para a comparação entre MPA e SPA, podemos ver que a falta de recarregamentos parciais de página é realmente a principal coisa que impede os MPAs. Portanto, adicionar esta capacidade a um MPA permite-lhe em grande parte obter a maioria das ricas experiências de utilizador "modernas" de uma SPA com o nível de complexidade de um MPA.

HTMX para Projetos Paralelos
O objetivo de um projeto paralelo é muitas vezes apenas construir a coisa. Provavelmente não tem uma equipa de engenheiros ou um cofre de dinheiro de capital de risco para o fazer - é apenas você e o seu computador.

Portanto, reduzir o custo de construção - em tempo e dinheiro - é crucial para tornar um projeto secundário bem-sucedido.

Na minha perspectiva, o HTMX proporciona um ótimo equilíbrio entre permitir que você construa aplicações modernas com uma complexidade muito baixa ( e, assim, custo de tempo e dinheiro ). Assim, tornou-se uma parte fundamental da minha pilha tecnológica - a pilha HAM.

Próximo
Md Saidur Rahman