- Un lenguaje de UI centrado en los estándares web HTML, CSS y JavaScript, orientado a construir interfaces más concisas y escalables que los frameworks existentes
- A diferencia de React, separa la lógica y los estilos, y facilita el mantenimiento al usar archivos externos de sistema de diseño en lugar de CSS-in-JS
- Incluso al implementar componentes complejos, el código sigue siendo simple y el tamaño del bundle JS es pequeño; por ejemplo, una tabla con funciones de ordenamiento y filtrado pesa 3.9KB
- El cambio de tema de diseño también es posible con solo modificar 32 líneas de CSS, y se puede reemplazar el sistema de diseño sin tocar los componentes
- Funciona sobre Bun y se presenta como un framework orientado al futuro con bundling rápido, compatibilidad con estándares y una base para generar UI para modelos de IA
Introducing Hyper
- Hyper es un nuevo lenguaje de marcado para construir UI basado en los estándares web HTML/CSS/JS
- Incluso las UI complejas pueden expresarse con una sintaxis limpia y simple
- A diferencia de React, organiza la aplicación separando presentación, lógica y estilos
Objetivos del proyecto
- Standards first: construcción basada en los estándares de HTML, CSS y JS
- Simplicity: estructura de composición simple, sin abstracciones complejas
- Design Systems: una capa de diseño separada, pensada tanto para diseñadores como para desarrolladores
- Scalability: mantener la simplicidad incluso cuando la aplicación crece
Comparación entre React y Hyper
- Mientras que React tiene una estructura monolítica donde se mezclan lógica, estructura y estilos, Hyper se enfoca en una capa de vista pura
- Simple components
- Se presentan ejemplos de implementación del mismo componente de tabla en Modern React, Old-school React y Hyper
- React moderno: construcción de UI con librerías de componentes como ShadCN, Material UI y Tailwind Catalyst, con la ventaja de un fuerte soporte de herramientas de IA
- React de la vieja escuela: el enfoque inicial donde estilos y código del componente estaban separados
- Hyper: un ejemplo conciso que respeta los estándares web y separa claramente estructura y estilos
- Hyper lo expresa solo con una estructura basada en HTML puro y métodos simples, sin clases innecesarias ni hooks de estado
- En ejemplos sencillos la diferencia es mínima, pero a medida que aumenta la complejidad, la diferencia entre los enfoques de Hyper y React se vuelve mayor
- Complex components
- React basado en ShadCN: bundle JS de 91.3KB
- Hyper: 3.9KB (1.2KB + 2.7KB)
- Hyper funciona con el mínimo de JS y es fácil de mantener
- Design systems
- Al cambiar el estilo de un dashboard con Hyper, es posible reemplazar todo el tema agregando solo 32 líneas de CSS sin modificar el código de los componentes
- En cambio, en ShadCN basado en React, miles de líneas de código TSX se duplican según el tema
- Filosofía del sistema de diseño de Hyper
- Excluye por completo el acoplamiento entre diseño y componentes, como CSS-in-JS, Tailwind e inline style
- Centraliza toda la tipografía y las reglas de estilo en archivos CSS externos
- Hace posible una reutilización total, un sistema de diseño centralizado y cero boilerplate
- Scalability
- El enfoque de Hyper mantiene la simplicidad incluso cuando el proyecto crece
- La estructura es simple y el tamaño del código es pequeño
Preguntas frecuentes
- ¿Diferencias con Svelte y Vue?
- Aunque ambos son más livianos que React, siguen promoviendo el acoplamiento entre diseño y componentes mediante scoped CSS, Tailwind, etc.
- Hyper impone un sistema de diseño completamente separado
- What is Nue?
- Nue es un generador de sitios web y webapps basado en plantillas de Nue JS
- Hyper es el producto de próxima generación derivado de Nue JS, y ambos se gestionan dentro del mismo monorepo
- Hyperlink (próximamente) será una solución de routing, y su nombre refleja una conexión estrecha con los estándares web
- ¿En qué se diferencia de los frameworks existentes?
- El objetivo central de Hyper no es agregar nuevas herramientas de abstracción, sino volver a los estándares y recuperar la simplicidad
- Con solo conocimientos de CSS, HTML y JS se pueden construir aplicaciones profesionales
- ¿Por qué son importantes los estándares web?
- Tecnología atemporal: una base tecnológica válida durante décadas
- Producto sostenible: puede mantenerse durante mucho tiempo sin cambiar de framework
Próximos planes
- Aplicaciones full-stack (dentro de 3 meses)
- Está previsto incorporar routing, comunicación entre componentes, integración con BD, despliegue en la nube y cambio de temas de diseño
- Generative UIs (dentro de 4 a 5 meses)
- Un framework de UI que la IA pueda generar a partir de combinaciones de HTML/CSS
- Con accesibilidad, capacidad de respuesta y documentación incluidas automáticamente
- ¿Cómo puede vencer a React?
- El objetivo es ganar participación gradualmente
- Impulsar un cambio progresivo en la percepción de los desarrolladores
- Ofrecer una estructura simple y mantenible
- Crecer demostrando la fuerza de las tecnologías fundamentales
- ¿Problema de duplicación de nombre?
- Ya existen proyectos de Rust y Electron con el mismo nombre, pero no hay problema porque pertenecen a contextos distintos
Objetivo final
- El objetivo definitivo es construir un stack web disruptivamente simple
7 comentarios
Típicamente ignoraron la historia y trajeron de vuelta una rueda vieja.
Algunas ideas no parecen malas (la forma de usar Markdown), pero en comparación con otras herramientas no parece haber una gran ventaja.
Viendo lo que se discute en Hacker News,
para empezar, el desarrollador tiene un nivel de comprensión demasiado bajo sobre React.
Me da la impresión de que en un futuro no muy lejano le van a cambiar el nombre... como también dice el artículo, ya existe un proyecto de Electron con un nombre que se superpone... no sé si de verdad era necesario usar ese nombre.
Al comparar el código, parece que se ahorrarán bastantes tokens.
Svelte es lo mejor
Svelte, lo mejor
Creo que esto depende del gusto de cada quien, pero a mí me gusta más
.map((item) => <li>)de JSX, que se maneja con vanilla JS, que<li for>de Angular, Vue, etc. (¿incluyendo esas librerías? ¿o el marcado?).Yo también estoy de acuerdo en ese punto. Cuando la lógica que se agrega al HTML usa una sintaxis propia en lugar de vanilla, eso se vuelve una barrera importante. Para implementar una UI simple no hay problema, pero cuando la lógica se vuelve compleja, hay diferencias en la flexibilidad de desarrollo y tampoco se puede ignorar la curva de aprendizaje.