- Ngôn ngữ UI lấy các tiêu chuẩn web HTML, CSS, JavaScript làm trung tâm, hướng tới cách tổ chức giao diện ngắn gọn và dễ mở rộng hơn các framework hiện có
- Khác với React, Hyper tách biệt logic và style, đồng thời tận dụng các tệp design system bên ngoài thay vì CSS-in-JS để tăng tính dễ bảo trì
- Ngay cả khi triển khai component phức tạp, mã vẫn đơn giản và kích thước bundle JS nhỏ, ví dụ: bảng có chức năng sắp xếp/lọc chỉ 3.9KB
- Việc chuyển đổi theme thiết kế cũng chỉ cần thay đổi 32 dòng CSS, có thể thay design system mà không cần sửa component
- Chạy trên nền Bun và là một framework hướng đến tương lai với khả năng bundling nhanh, tương thích tiêu chuẩn và làm nền tảng tạo UI cho mô hình AI
Introducing Hyper
- Hyper là một ngôn ngữ markup mới để xây dựng UI dựa trên các tiêu chuẩn web HTML/CSS/JS
- Ngay cả UI phức tạp cũng có thể được biểu đạt bằng cú pháp gọn gàng và đơn giản
- Khác với React, Hyper tổ chức theo cách tách biệt phần biểu diễn, logic và style
Project goals
- Standards first: xây dựng dựa trên các tiêu chuẩn HTML, CSS, JS
- Simplicity: cấu trúc composition đơn giản, không cần các lớp trừu tượng phức tạp
- Design Systems: lớp thiết kế tách biệt, phục vụ cả designer lẫn developer
- Scalability: vẫn giữ được sự đơn giản ngay cả khi ứng dụng mở rộng
So sánh React và Hyper
- Trong khi React là một cấu trúc nguyên khối nơi logic, cấu trúc và style trộn lẫn với nhau, Hyper tập trung vào lớp view thuần túy
- Simple components
- Bài viết đưa ra ví dụ triển khai cùng một component bảng bằng Modern React, Old-school React và Hyper
- React hiện đại: xây UI bằng các thư viện component như ShadCN, Material UI, Tailwind Catalyst; điểm mạnh là được công cụ AI hỗ trợ tốt
- React kiểu cũ: cách làm thời kỳ đầu khi style và mã component được tách rời
- Hyper: ví dụ ngắn gọn tuân thủ tiêu chuẩn web, tách biệt rõ ràng giữa cấu trúc và style
- Hyper biểu đạt bằng cấu trúc thuần HTML và các method đơn giản, không cần class thừa hay state hook
- Ở ví dụ đơn giản, khác biệt là không lớn, nhưng khi độ phức tạp tăng thì khác biệt trong cách tiếp cận giữa Hyper và React sẽ rõ rệt hơn
- Complex components
- React dựa trên ShadCN: bundle JS 91.3KB
- Hyper: 3.9KB (1.2KB + 2.7KB)
- Hyper hoạt động với lượng JS tối thiểu và dễ bảo trì
- Design systems
- Khi thay đổi style dashboard bằng Hyper, có thể đổi toàn bộ theme chỉ bằng cách thêm 32 dòng CSS mà không cần sửa mã component
- Trong khi đó, với ShadCN dựa trên React, hàng nghìn dòng mã TSX bị lặp lại theo từng theme
- Triết lý design system của Hyper
- Loại bỏ hoàn toàn sự gắn kết giữa thiết kế và component như CSS-in-JS, Tailwind, inline style
- Tập trung toàn bộ typography và các quy tắc style vào các tệp CSS bên ngoài
- Hiện thực hóa khả năng tái sử dụng hoàn toàn, design system tập trung, zero boilerplate
- Scalability
- Cách tiếp cận của Hyper vẫn giữ được sự đơn giản khi dự án phát triển lớn hơn
- Cấu trúc đơn giản, kích thước mã nhỏ
Câu hỏi thường gặp
- Khác gì với Svelte và Vue?
- Cả hai đều nhẹ hơn React nhưng vẫn khuyến khích gắn kết giữa thiết kế và component thông qua scoped CSS, Tailwind, v.v.
- Hyper bắt buộc design system phải được tách biệt hoàn toàn
- What is Nue?
- Nue là trình tạo website/webapp dựa trên template Nue JS
- Hyper là bước tiến hóa thế hệ tiếp theo của Nue JS và được quản lý trong cùng một monorepo
- Hyperlink (sắp ra mắt) là giải pháp router, mang ý nghĩa kết nối chặt chẽ với các tiêu chuẩn web
- Khác gì với các framework hiện có?
- Mục tiêu cốt lõi của Hyper không phải là bổ sung thêm một công cụ trừu tượng mới, mà là quay về với tiêu chuẩn và khôi phục sự đơn giản
- Chỉ với kiến thức về CSS, HTML, JS cũng có thể xây dựng ứng dụng chuyên nghiệp
- Vì sao tiêu chuẩn web quan trọng?
- Công nghệ vượt thời gian: nền tảng kỹ thuật vẫn còn giá trị trong nhiều thập kỷ
- Sản phẩm bền vững: có thể bảo trì lâu dài mà không cần thay framework
Kế hoạch sắp tới
- Ứng dụng full-stack (trong vòng 3 tháng)
- Dự kiến sẽ bổ sung routing, giao tiếp giữa các component, kết nối DB, triển khai cloud và khả năng đổi theme thiết kế
- Generative UIs (trong vòng 4~5 tháng)
- Framework UI mà AI có thể tạo ra dựa trên tổ hợp HTML/CSS
- Tự động bao gồm khả năng truy cập, responsive và tài liệu hóa
- Làm sao có thể đánh bại React?
- Mục tiêu là dần dần giành thị phần
- Từng bước thay đổi nhận thức của developer
- Cung cấp cấu trúc đơn giản và dễ bảo trì
- Lập kế hoạch tăng trưởng bằng cách chứng minh sức mạnh của công nghệ nền tảng
- Vấn đề trùng tên?
- Dù đã có các dự án Rust và Electron cùng tên, nhưng do ngữ cảnh khác nhau nên không thành vấn đề
Mục tiêu cuối cùng
- Xây dựng một web stack đơn giản đến mức mang tính đột phá là mục tiêu tối hậu
7 bình luận
Đúng kiểu phớt lờ lịch sử rồi lại mang bánh xe cũ ra dùng.
Một vài ý tưởng có vẻ không tệ (cách tận dụng Markdown), nhưng so với các công cụ khác thì có vẻ không có nhiều ưu điểm nổi bật.
Nhìn những gì đang được bàn luận trên Hacker News thì
trước hết, nhà phát triển này có mức độ hiểu biết về React quá thấp.
Tôi có cảm giác là trong tương lai không xa cái tên này sẽ bị đổi thôi... Như bài viết cũng nói, đã có một dự án Electron trùng tên rồi... Thật sự có cần phải dùng đúng cái tên đó không.
So sánh mã nguồn thì có vẻ sẽ tiết kiệm được khá nhiều token.
Svelte là đỉnh nhất
Svelte là tốt nhất
Có vẻ mỗi người sẽ có gu khác nhau, nhưng cá nhân tôi thích kiểu
.map((item) => <li>)của JSX được xử lý bằng vanilla JS hơn so với<li for>của Angular, Vue v.v. (bao gồm cả thư viện? markup?).Tôi cũng đồng ý với điểm này. Khi logic được thêm vào HTML bằng một cú pháp riêng thay vì vanilla, đó là một rào cản khá lớn. Việc triển khai UI đơn giản thì không có vấn đề gì, nhưng khi logic trở nên phức tạp, sẽ có sự khác biệt về độ linh hoạt trong phát triển và cũng không thể xem nhẹ đường cong học tập.