Thread de meng shao (@shao__meng)

[Recomendação de código aberto] HMPL: Uma linguagem de templates minimalista, orientada a servidor, mais leve que o React, mais moderna que o jQuery tradicional e similar ao HTMLX, porém com maior controle sobre os templates. O objetivo principal é muito claro: ao mesmo tempo que mantém a experiência interativa e dinâmica das aplicações web modernas, reduz significativamente a quantidade e a complexidade do código JavaScript do lado do cliente. Pode ser entendido como uma espécie de "forma intermediária" entre HTML e EJS – possui tanto a intuitividade dos mecanismos de templates tradicionais quanto os recursos da moderna "interface de usuário orientada a servidor". 💡 Conceito central: Definir "requisições" em HTML. A maior inovação do HMPL reside na sua lógica sintática. A abordagem tradicional é "escrever JS para enviar uma requisição -> obter os dados -> atualizar o DOM", enquanto o HMPL permite declarar "de onde vêm os dados para este bloco" diretamente no modelo HTML. • Fluxo de dados WYSIWYG: Você não precisa escrever código fetch ou axios extenso. Basta usar uma sintaxe específica no modelo (como {{ src: "/api/component" }}), e o HMPL processará automaticamente a solicitação, recuperará o fragmento HTML retornado pelo servidor e o renderizará com segurança na página. • Centrado no servidor: Defende que a lógica seja transferida para o servidor, com o cliente responsável apenas por "buscar e exibir sob demanda". Isso permite o suporte natural a efeitos semelhantes aos de renderização no servidor (SSR), mas sem o ônus de uma estrutura complexa. ✨ Principais funcionalidades explicadas 1. Extremamente leve Em um contexto onde frameworks front-end modernos (como React e Vue) podem facilmente ter dezenas de KB ou até mais, o núcleo do HMPL é muito pequeno (cerca de 24 KB ou até menos após a compressão gzip), tornando-o extremamente adequado para projetos com altos requisitos de velocidade de carregamento da primeira tela e desempenho. 2. Segurança integrada (Segurança em primeiro lugar) A renderização direta de HTML no servidor é a forma mais vulnerável de ataques XSS. O HMPL integra de forma inteligente o DOMPurify, que limpa e higieniza o conteúdo renderizado por padrão, resolvendo os riscos de segurança que mais preocupam os desenvolvedores. 3. Excelente experiência do desenvolvedor (DX) Apesar de ser uma linguagem de nicho, oferece ferramentas de suporte abrangentes, incluindo plugins para VS Code, plugins para Vite e Webpack Loader. Isso significa que você pode desfrutar de experiências de desenvolvimento modernas, como realce de sintaxe e autocompletar ao escrever em HMPL. 4. Flexibilidade Não se destina a substituir toda a estrutura. Você pode usá-la como uma ferramenta independente ou incorporá-la em projetos Vue ou React existentes para lidar com conteúdo específico do lado do servidor que precisa ser carregado dinamicamente. ⚖️ Valor e avaliação do setor: No atual cenário de desenvolvimento front-end, o surgimento do HMPL reflete uma espécie de tendência: • Rejeitar o excesso de engenharia: Será mesmo necessário introduzir um enorme framework SPA para cada página dinâmica simples? O HMPL dá uma resposta negativa. • Curva de aprendizado mais curta: Para desenvolvedores backend ou full-stack, a abordagem do HMPL de "escrever templates = escrever lógica" é muito mais intuitiva do que aprender todo o React Hooks ou o ciclo de vida do Vue. Endereço de código aberto: