- Mevcut framework'lere göre daha sade ve genişletilebilir arayüzler kurmayı hedefleyen, HTML, CSS ve JavaScript web standartları odaklı bir UI dili
- React'ten farklı olarak mantık ile stili ayırır; CSS-in-JS yerine harici tasarım sistemi dosyaları kullanarak bakım kolaylığı sağlar
- Karmaşık bileşenler uygulanırken bile kod basit kalır ve JS bundle boyutu küçüktür; örneğin sıralama/filtreleme özellikli bir tablo 3.9KB
- Tasarım teması değişimi de yalnızca 32 satır CSS değişikliğiyle mümkün; bileşenleri değiştirmeden tasarım sistemi değiştirilebilir
- Bun tabanlı çalışır ve hızlı bundle alma, standart uyumluluğu ve yapay zeka modelleri için UI üretim temeli gibi özelliklere sahip gelecek odaklı bir framework
Hyper'ı Tanıtıyoruz
- Hyper, HTML/CSS/JS web standartlarını temel alarak UI oluşturan yeni bir markup dilidir
- Karmaşık UI'lar bile temiz ve basit bir sözdizimiyle ifade edilebilir
- React'ten farklı olarak sunum, mantık ve stili ayırarak yapı kurar
Proje hedefleri
- Önce standartlar: HTML, CSS ve JS standartları temelinde yapı
- Basitlik: Karmaşık soyutlamalar olmadan sade bir composition yapısı
- Design Systems: Hem tasarımcılar hem geliştiriciler için ayrılmış bir tasarım katmanı
- Ölçeklenebilirlik: Uygulama büyüse bile sadeliği koruma
React ve Hyper karşılaştırması
- React; mantık, yapı ve stilin karıştığı monolitik bir yapı sunarken Hyper saf görünüm katmanına odaklanır
- Basit bileşenler
- Aynı tablo bileşeninin Modern React, Old-school React ve Hyper ile ayrı ayrı uygulanmış örnekleri sunuluyor
- Modern React: ShadCN, Material UI, Tailwind Catalyst gibi bileşen kütüphaneleriyle UI kurulur; AI araç desteği güçlüdür
- Old-school React: Stil ile bileşen kodunun ayrıldığı ilk dönem yaklaşımıdır
- Hyper: Web standartlarına uyan sade bir örnekle yapı ve stili net biçimde ayırır
- Hyper, gereksiz class'lar ve state hook'ları olmadan saf HTML tabanlı yapı ve basit metodlarla ifade edilir
- Basit örneklerde fark küçük olsa da karmaşıklık arttıkça Hyper ile React'in yaklaşım farkı büyür
- Karmaşık bileşenler
- ShadCN tabanlı React: JS bundle 91.3KB
- Hyper: 3.9KB (1.2KB + 2.7KB)
- Hyper, minimum JS ile çalışır ve bakımı kolaydır
- Tasarım sistemleri
- Hyper ile dashboard stilini değiştirirken bileşen kodunu değiştirmeden yalnızca 32 satır CSS ekleyerek tüm tema değiştirilebilir
- Buna karşılık React tabanlı ShadCN'de binlerce satır TSX kodu temalara göre tekrar eder
- Hyper'ın tasarım sistemi felsefesi
- CSS-in-JS, Tailwind, inline style gibi yaklaşımlarla tasarım ile bileşen arasındaki bağı tamamen dışlar
- Tüm tipografi ve stil kurallarını harici CSS dosyalarında toplar
- Tam yeniden kullanılabilirlik, merkezi tasarım sistemi ve sıfır boilerplate sağlar
- Ölçeklenebilirlik
- Hyper yaklaşımı, proje büyüse de sadeliği korur
- Yapı basittir, kod boyutu küçüktür
Sık sorulan sorular
- Svelte ve Vue'dan farkı ne?
- İkisi de React'ten daha hafif olsa da hâlâ scoped CSS, Tailwind gibi yöntemlerle tasarım ile bileşen arasındaki bağı teşvik eder
- Hyper ise tamamen ayrılmış bir tasarım sistemi dayatır
- Nue nedir?
- Nue, Nue JS templates tabanlı bir web sitesi/web uygulaması üreticisidir
- Hyper, Nue JS'in yeni nesil evrim ürünüdür ve aynı monorepo altında yönetilir
- Hyperlink (planlanıyor), router çözümüdür; web standartlarıyla sıkı bağlantıyı ifade eder
- Mevcut framework'lerden farkı ne?
- Hyper'ın temel hedefi yeni soyutlama araçları eklemek değil, standartlara dönüş ve sadeliği yeniden kazanmaktır
- Yalnızca CSS, HTML ve JS bilgisiyle profesyonel uygulamalar geliştirilebilir
- Web standartları neden önemli?
- Zamansız teknoloji: On yıllar boyunca geçerliliğini koruyan teknik temel
- Sürdürülebilir ürünler: Framework değiştirmeden uzun yıllar bakım yapılabilir
Gelecek planları
- Full-stack uygulamalar (3 ay içinde)
- Routing, bileşenler arası iletişim, DB entegrasyonu, cloud deployment ve tasarım teması değiştirme özellikleri planlanıyor
- Generative UI'lar (4~5 ay içinde)
- HTML/CSS birleşimine dayalı, AI tarafından üretilebilir bir UI framework'ü
- Erişilebilirlik, responsive yapı ve dokümantasyon otomatik olarak dahil olacak
- React nasıl geçilebilir?
- Hedef, zaman içinde kademeli olarak pazar payı kazanmak
- Aşamalı biçimde geliştirici algısını değiştirmek
- Basit ve bakımı kolay bir yapı sunmak
- Temel teknolojilerin gücünü kanıtlayarak büyümek
- İsim çakışması sorunu?
- Aynı adı kullanan Rust ve Electron projeleri zaten var, ancak bağlam farklı olduğu için sorun görülmüyor
Nihai hedef
- Son hedef, radikal derecede sade bir web stack'i kurmak
7 yorum
Tipik şekilde tarihi göz ardı edip eski bir tekerleği geri getirmişler.
Bazı fikirler kötü görünmüyor (Markdown kullanım biçimi) ama diğer araçlarla karşılaştırınca çok büyük bir avantajı varmış gibi gelmiyor.
Hacker News'teki tartışmalara bakınca
ilk olarak geliştiricinin React konusundaki anlayışı fazlasıyla zayıf.
Yakın olmayan bir gelecekte adının değişeceği hissine kapılıyorum... Yazıda da geçiyor ama aynı isimli bir Electron projesi var... O ismi kullanmakta ısrar etmek şart mıydı ki.
Kod karşılaştırmasına bakınca epey token tasarrufu sağlayacak gibi görünüyor.
Svelte en iyisi
Svelte en iyisi
İnsanların zevki farklı olabilir ama ben Angular, Vue vb.'nin (bu kütüphane mi? markup mı? buna dahil)
<li for>yaklaşımındansa, vanilla JS ile işlenen JSX'teki.map((item) => <li>)kullanımını daha çok seviyorum.Ben de bu görüşe katılıyorum. HTML'e eklenen mantığın vanilla değil de kendine özgü bir syntax olması büyük bir engel. Basit bir UI uygulamasında sorun olmaz ama mantık karmaşıklaştığında geliştirme esnekliği açısından fark ortaya çıkıyor ve öğrenme eğrisini de göz ardı etmek mümkün değil.