Clay – Library Tata Letak UI

• Pengenalan Clay

  • Clay adalah library tata letak otomatis UI bergaya Flexbox yang ditulis dalam bahasa C.
  • Menyediakan sintaks deklaratif dan performa pada tingkat mikrodetik.
  • Tata letak halaman web ini saat ini juga dibangun dengan Clay.

• Fitur utama

  • Performa tinggi

    • Mendukung tata letak responsif bergaya Flexbox.
    • Dapat digunakan di C/C++ sebagai satu file .h, dan dapat dikompilasi menjadi file .wasm berukuran 15kb.
    • Terdiri dari sekitar 2000 baris kode C99 dan tidak memiliki dependensi, termasuk ke pustaka standar C.
    • Dapat digunakan bersama berbagai renderer seperti Raylib, WebGL Canvas, dan HTML.
    • Menyediakan output fleksibel yang mudah dikomposisikan dalam engine atau lingkungan kustom.

  • Sintaks deklaratif

    • Menyediakan sintaks deklaratif yang fleksibel dan mudah dibaca dengan struktur hierarki elemen UI bertingkat.
    • Dapat mencampurkan elemen dengan kode C standar seperti loop, pernyataan kondisi, dan fungsi.
    • Dapat membuat library komponen yang dapat digunakan ulang dengan elemen dasar UI seperti teks, gambar, dan persegi panjang.

  • Performa tinggi

    • Cukup cepat untuk menghitung ulang seluruh UI pada setiap frame.
    • Memiliki penggunaan memori kecil sebesar 3.5mb melalui alokasi statis dan penggunaan ulang. Tidak menggunakan malloc/free.
    • Menyederhanakan animasi dan desain UI responsif dengan menghindari trik performa standar.

• Independensi renderer dan platform

  • Menghasilkan array terurut dari perintah render dasar seperti RECTANGLE, TEXT, dan IMAGE.
  • Anda dapat menulis renderer sendiri hanya dengan beberapa ratus baris kode, atau menggunakan contoh yang disediakan seperti Raylib dan kanvas WebGL.
  • Renderer HTML juga disediakan, dan halaman yang sedang Anda lihat saat ini adalah contohnya.

• Alat debug terintegrasi

  • Menyertakan alat debug bawaan bergaya "Chrome Inspector".
  • Anda dapat memeriksa hierarki dan konfigurasi tata letak secara real-time.
  • Anda bisa langsung mencobanya sekarang dengan menekan tombol "d".

[GN⁺]

Komentar Hacker News

• Mengesankan bahwa sesuatu yang keren bisa dibuat hanya dengan beberapa ribu baris kode. Saya lebih menyukai CSS Grid daripada Flex, jadi saya membuat library layout CSS Grid dalam Nim. Saya berencana membandingkan Clay dengan algoritma layout tersebut. Saya penasaran apakah antarmuka C bisa diekspos

  • Alasan saya menyukai CSS Grid adalah karena ia bisa meniru format seperti berikut
  • Tautan GitHub

• Ada tombol untuk beralih antara HTML dan Canvas, tetapi di iOS Safari + Dark Reader, halaman HTML diubah ke mode gelap sementara halaman Canvas tidak. Karena itu, kesan kagumnya jadi berkurang

• Saya menonton video YouTube yang sangat bagus yang dibuat oleh pengembangnya. Sangat mengesankan

  • Tautan YouTube

• Ide memisahkan logika UI dari kumpulan perintah menggambar sangat berguna dan serbaguna. Saya pertama kali melihatnya di microui, dan dengan WASM serta Canvas2D, library ini bisa digunakan dengan mudah di browser

  • Ide melakukan layout di WASM lalu merendernya sebagai HTML sangat bagus
  • Tautan microui

• Semua teks setelah animasi tidak bisa dipilih. Sepertinya fokusnya dicuri

• Di situs web, klik kanan dan klik tengah pada tautan berfungsi seperti klik kiri

• Cukup bagus untuk draf pertama. Sayang sekali output HTML-nya hanya terdiri dari elemen div. Akan lebih baik jika aksesibilitas sedikit lebih dipertimbangkan. Saat mencoba memilih teks, pilihan dibatalkan karena render ulang

• Keren bahwa ini diimplementasikan dalam 2000 baris kode C tanpa dependensi. Saya sempat berpikir apakah ini bisa diimplementasikan dengan lebih aman dalam Haskell/OCaml

• Ada juga taffy yang ditulis dalam Rust, dan binding C sedang dikerjakan

  • Tautan taffy

• Saya bukan pengembang frontend, jadi sulit memahami mengapa pendekatan ini lebih baik daripada langsung menggunakan CSS atau memakai framework/library CSS. Sudah ada ratusan framework CSS, dan ini tampaknya melakukan fungsi yang serupa