Clay – Thư viện bố cục UI

 (nicbarker.com)
2 điểm bởi GN⁺ 2024-12-21 | 1 bình luận | Chia sẻ qua WhatsApp

  • Giới thiệu về Clay

    • Clay là một thư viện auto layout UI kiểu flexbox được viết bằng ngôn ngữ C.
    • Cung cấp cú pháp khai báo và hiệu năng ở mức micro giây.
    • Hiện tại, bố cục của chính trang web này cũng được xây dựng bằng Clay.

  • Các đặc điểm chính

    • Hiệu năng cao

      • Hỗ trợ bố cục phản hồi kiểu flexbox.
      • Có thể dùng trong C/C++ dưới dạng một file .h duy nhất và có thể biên dịch thành file .wasm 15kb.
      • Được cấu thành từ khoảng 2000 dòng mã C99 và không có phụ thuộc nào, kể cả thư viện chuẩn C.
      • Có thể dùng cùng nhiều renderer khác nhau như Raylib, WebGL Canvas, HTML.
      • Cung cấp đầu ra linh hoạt, dễ dàng ghép vào engine hoặc môi trường tùy chỉnh của người dùng.

    • Cú pháp khai báo

      • Cung cấp cú pháp khai báo linh hoạt, dễ đọc với cấu trúc phân cấp phần tử UI lồng nhau.
      • Có thể trộn các phần tử với mã C tiêu chuẩn như vòng lặp, câu điều kiện, hàm.
      • Có thể tạo thư viện component tái sử dụng bằng các phần tử UI cơ bản như văn bản, hình ảnh, hình chữ nhật.

    • Hiệu năng cao

      • Nhanh đến mức có thể tính toán lại toàn bộ UI ở mỗi frame.
      • Có mức sử dụng bộ nhớ nhỏ 3.5mb nhờ cấp phát tĩnh và tái sử dụng. Không dùng malloc/free.
      • Đơn giản hóa animation và thiết kế UI phản hồi bằng cách tránh các thủ thuật tối ưu hiệu năng thường thấy.

  • Độc lập với renderer và nền tảng

    • Xuất ra mảng đã sắp xếp của các lệnh render cơ bản như RECTANGLE, TEXT, IMAGE.
    • Có thể tự viết renderer của riêng bạn chỉ với vài trăm dòng mã, hoặc dùng các ví dụ được cung cấp như Raylib, WebGL canvas.
    • Cũng cung cấp renderer HTML, và trang bạn đang xem hiện là một ví dụ.

  • Công cụ debug tích hợp

    • Bao gồm công cụ debug tích hợp theo phong cách "Chrome Inspector".
    • Có thể kiểm tra cấu hình và cấu trúc phân cấp layout theo thời gian thực.
    • Bạn có thể nhấn phím "d" để thử ngay bây giờ.

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-12-21
Ý kiến Hacker News

  • Thật ấn tượng khi có thể tạo ra thứ gì đó tuyệt vời chỉ với vài nghìn dòng mã. Tôi thích CSS Grid hơn Flex nên đã tự làm một thư viện bố cục CSS Grid bằng Nim. Tôi định sẽ so sánh nó với Clay và thuật toán bố cục của nó. Không biết liệu có thể phơi bày giao diện C hay không

    • Lý do tôi thích CSS Grid là vì nó có thể mô phỏng các dạng như sau
    • Liên kết GitHub

  • Có nút chuyển giữa HTML và Canvas, nhưng trên iOS Safari + Dark Reader thì trang HTML được chuyển sang chế độ tối còn trang Canvas thì không. Điều này làm giảm bớt sự ấn tượng

  • Tôi đã xem video YouTube rất hay do chính tác giả thực hiện. Rất ấn tượng

  • Ý tưởng tách logic UI khỏi tập lệnh vẽ rất hữu ích và linh hoạt. Tôi lần đầu thấy điều này ở microui, và nhờ dùng WASM cùng Canvas2D nên có thể dễ dàng dùng thư viện trong trình duyệt

    • Ý tưởng thực hiện layout trong WASM rồi render bằng HTML thật tuyệt vời
    • Liên kết microui

  • Toàn bộ văn bản sau phần animation đều không thể được chọn. Có vẻ như focus đã bị cướp mất

  • Trên website, khi nhấp chuột phải hoặc chuột giữa vào liên kết thì nó lại hoạt động như nhấp chuột trái

  • Ổn cho một bản nháp đầu tiên. Điều đáng tiếc là đầu ra HTML chỉ gồm các phần tử div. Có lẽ nên cân nhắc thêm một chút về accessibility. Khi cố chọn văn bản thì việc render lại khiến lựa chọn bị hủy

  • Thật hay khi nó được triển khai bằng 2000 dòng mã C và không có dependency. Tôi đã nghĩ liệu có thể triển khai an toàn hơn bằng Haskell/OCaml không

  • Cũng có taffy được viết bằng Rust, và binding C đang được thực hiện

  • Tôi không phải là lập trình viên frontend nên khó hiểu vì sao cách này lại tốt hơn việc dùng CSS trực tiếp hoặc dùng framework/thư viện CSS. Đã có sẵn hàng trăm framework CSS rồi, và có vẻ chúng cũng làm chức năng tương tự