Hilo de meng shao (@shao__meng)

[Recomendación de código abierto] HMPL: un lenguaje de plantilla minimalista impulsado por servidor que es más liviano que React, más moderno que el jQuery tradicional y similar a HTMX pero con un mayor control de plantilla. El objetivo principal es muy claro: manteniendo la experiencia interactiva dinámica de las aplicaciones web modernas, reduce considerablemente la cantidad y la complejidad del código JavaScript del lado del cliente. Puede entenderse como una especie de "forma intermedia" entre HTMX y EJS: posee tanto la intuitividad de los motores de plantillas tradicionales como las capacidades de la moderna "IU basada en servidor". 💡 Concepto central: Definir “solicitudes” en HTML. La mayor innovación de HMPL reside en su lógica sintáctica. El enfoque tradicional es "escribir JS para enviar una solicitud -> obtener los datos -> actualizar el DOM", mientras que HMPL permite declarar "de dónde provienen los datos de este bloque" directamente en la plantilla HTML. • Flujo de datos WYSIWYG: No necesita escribir código extenso de búsqueda ni de Axios. Simplemente use la sintaxis específica en la plantilla (como {{ src: "/api/component" }}) y HMPL procesará automáticamente la solicitud, recuperará el fragmento HTML devuelto por el servidor y lo renderizará de forma segura en la página. Centrado en el servidor: Se propone devolver la lógica al servidor, dejando al cliente solo responsable de la obtención y visualización bajo demanda. Esto permite que admita de forma natural efectos similares a los de SSR, pero sin la carga de un framework complejo. ✨ Características principales explicadas 1. Extremadamente ligero En un contexto en el que los frameworks front-end modernos (como React y Vue) pueden fácilmente tener decenas de KB o incluso más, el núcleo de HMPL es muy pequeño (aproximadamente 24 KB o incluso más pequeño después de gzip), lo que lo hace extremadamente adecuado para proyectos con altos requisitos de velocidad y rendimiento de carga de la primera pantalla. 2. Seguridad integrada (la seguridad es lo primero) La representación directa de HTML del lado del servidor es más vulnerable a ataques XSS. HMPL integra inteligentemente DOMPurify, que limpia y desinfecta el contenido renderizado por defecto, solucionando así los riesgos de seguridad que más preocupan a los desarrolladores. 3. Excelente experiencia de desarrollo (DX) A pesar de ser un lenguaje especializado, ofrece herramientas de soporte completas, como plugins de VS Code, plugins de Vite y Webpack Loader. Esto significa que puedes disfrutar de experiencias de desarrollo modernas, como el resaltado de sintaxis y el autocompletado al escribir HMPL. 4. Flexibilidad No está diseñado para reemplazar todo el framework. Puedes usarlo como herramienta independiente o integrarlo en proyectos de Vue o React existentes para gestionar contenido específico del servidor que deba cargarse dinámicamente. ⚖️ Valor y evaluación de la industria: En el campo actual del desarrollo front-end, la aparición de HMPL refleja una especie de reflexión: • Rechazar la sobreingeniería: ¿Realmente necesitamos implementar un enorme marco de SPA para cada página dinámica simple? HMPL da una respuesta negativa. • Curva de aprendizaje más baja: para los desarrolladores backend o full-stack, el enfoque de HMPL "escribir plantillas = escribir lógica" es mucho más intuitivo que aprender todo el ciclo de vida de React Hooks o Vue. Dirección de código abierto: