- Uma linguagem de UI centrada nos padrões web de HTML, CSS e JavaScript, voltada para criar interfaces mais concisas e escaláveis do que os frameworks existentes
- Diferente do React, separa lógica e estilo, usando arquivos externos de design system em vez de CSS-in-JS para facilitar a manutenção
- Mesmo na implementação de componentes complexos, o código continua simples e o bundle JS é pequeno; por exemplo, uma tabela com ordenação/filtro fica em 3.9KB
- A troca de tema de design também é possível com apenas 32 linhas de CSS, sem modificar componentes, permitindo substituir o design system inteiro
- Funciona sobre Bun e é um framework voltado para o futuro, com bundling rápido, compatibilidade com padrões e base para geração de UI por modelos de IA
Introducing Hyper
- Hyper é uma nova linguagem de marcação para compor UIs com base nos padrões web HTML/CSS/JS
- Até UIs complexas podem ser expressas com uma sintaxe limpa e simples
- Diferente do React, organiza a estrutura separando apresentação, lógica e estilo
Objetivos do projeto
- Standards first: composição baseada nos padrões HTML, CSS e JS
- Simplicity: estrutura de composição simples, sem abstrações complexas
- Design Systems: camada de design separada para designers e desenvolvedores
- Scalability: manter a simplicidade mesmo quando a aplicação cresce
Comparação entre React e Hyper
- Enquanto o React tem uma estrutura monolítica que mistura lógica, estrutura e estilo, o Hyper se concentra em uma camada de visualização pura
- Simple components
- É apresentado um exemplo do mesmo componente de tabela implementado em Modern React, Old-school React e Hyper
- React moderno: monta a UI com bibliotecas de componentes como ShadCN, Material UI e Tailwind Catalyst, com forte apoio de ferramentas de IA
- React old-school: abordagem inicial em que estilo e código do componente ficavam separados
- Hyper: exemplo conciso que segue os padrões web e separa claramente estrutura e estilo
- O Hyper expressa tudo apenas com estrutura baseada em HTML puro e métodos simples, sem classes desnecessárias nem state hooks
- Em exemplos simples, a diferença é pequena, mas conforme a complexidade aumenta, a diferença entre as abordagens de Hyper e React se amplia
- Complex components
- React baseado em ShadCN: bundle JS de 91.3KB
- Hyper: 3.9KB (1.2KB + 2.7KB)
- O Hyper funciona com o mínimo de JS e é fácil de manter
- Design systems
- Ao mudar o estilo de um dashboard em Hyper, é possível trocar o tema inteiro adicionando apenas 32 linhas de CSS, sem alterar o código dos componentes
- Já no caso do ShadCN baseado em React, milhares de linhas de código TSX se repetem para cada tema
- Filosofia de design system do Hyper
- Exclui completamente o acoplamento entre design e componentes, como em CSS-in-JS, Tailwind e inline style
- Centraliza toda a tipografia e todas as regras de estilo em arquivos CSS externos
- Viabiliza reutilização completa, design system centralizado e zero boilerplate
- Scalability
- A abordagem do Hyper mantém a simplicidade mesmo quando o projeto cresce
- A estrutura é simples e o tamanho do código é pequeno
Perguntas frequentes
- Qual a diferença em relação a Svelte e Vue?
- Ambos são mais leves que React, mas ainda induzem ao acoplamento entre design e componentes, com scoped CSS, Tailwind etc.
- O Hyper impõe um design system totalmente separado
- What is Nue?
- Nue é um gerador de sites/webapps baseado em templates do Nue JS
- Hyper é a evolução de próxima geração do Nue JS e é gerenciado sob o mesmo monorepo
- Hyperlink (previsto) será a solução de roteamento, indicando uma ligação estreita com os padrões web
- Qual a diferença em relação aos frameworks existentes?
- O objetivo central do Hyper não é adicionar uma nova ferramenta de abstração, mas voltar aos padrões e recuperar a simplicidade
- É possível compor apps profissionais apenas com conhecimento de CSS, HTML e JS
- Por que os padrões web são importantes?
- Tecnologia atemporal: uma base técnica válida por décadas
- Produto sustentável: pode ser mantido por muito tempo sem trocar de framework
Planos futuros
- Aplicações full-stack (em até 3 meses)
- Estão previstos roteamento, comunicação entre componentes, integração com banco de dados, deploy em nuvem e troca de temas de design
- Generative UIs (em 4 a 5 meses)
- Um framework de UI gerável por IA com base em combinações de HTML/CSS
- Inclui automaticamente acessibilidade, responsividade e documentação
- Como pode vencer o React?
- O objetivo é ganhar participação gradualmente
- Induzir uma mudança gradual na percepção dos desenvolvedores
- Oferecer uma estrutura simples e de fácil manutenção
- Crescer comprovando a força das tecnologias fundamentais
- Problema de duplicidade de nome?
- Já existem projetos em Rust e Electron com o mesmo nome, mas em contextos diferentes, então isso não é um problema
Objetivo final
- O objetivo final é construir uma stack web radicalmente simples
7 comentários
Tipicamente ignorando a história, trouxeram de volta uma roda antiga.
Algumas ideias até parecem não ser ruins (a forma de usar Markdown), mas em comparação com outras ferramentas não parece haver grandes vantagens.
Pelo que se vê nas discussões no Hacker News,
antes de tudo o desenvolvedor tem um entendimento muito superficial sobre React.
Parece que, em um futuro não muito distante, esse nome vai mudar... Como também está escrito no texto, já existe um projeto Electron com nome parecido... Será que precisavam mesmo usar esse nome?
Comparando o código, parece que vai economizar bastante tokens.
Svelte é o melhor
Svelte é o melhor
Acho que isso varia conforme o gosto de cada um, mas eu prefiro
.map((item) => <li>)em JSX, processado com JavaScript vanilla, em vez de<li for>do Angular, Vue etc. (incluindo essa biblioteca? marcação?).Também concordo com essa parte. Quando a lógica adicionada ao HTML usa uma sintaxe própria em vez de vanilla, isso se torna uma grande barreira. Para implementar uma UI simples não há problema, mas quando a lógica fica complexa, há diferença na flexibilidade de desenvolvimento e a curva de aprendizado também não pode ser ignorada.