Clay – Pustaka tata letak UI

 (nicbarker.com)
2 poin oleh GN⁺ 2024-12-21 | 1 komentar | Bagikan ke WhatsApp
  • Clay adalah pustaka tata letak UI otomatis bergaya Flexbox yang dibuat dengan C, ditujukan untuk komposisi UI deklaratif bahkan di engine kustom atau lingkungan tingkat rendah
  • Disediakan sebagai berkas header tunggal, dapat digunakan di C/C++, dan menonjolkan sekitar 2.000 baris kode C99 serta hasil kompilasi .wasm berukuran 15KB
  • Tanpa dependensi, termasuk terhadap pustaka standar C, dan dapat digunakan terpisah dari metode rendering seperti Raylib, WebGL Canvas, dan HTML
  • Cukup cepat untuk menghitung ulang seluruh UI di setiap frame, bekerja dengan memori dasar 3,5MB serta metode alokasi statis dan penggunaan ulang tanpa malloc/free
  • Dapat mencampurkan loop, kondisional, dan fungsi dalam kode C dengan hierarki UI, serta memeriksa status tata letak secara real time dengan alat debug bawaan

Header tunggal C99 dan model memori

  • Clay adalah pustaka tata letak otomatis bergaya Flexbox berbasis C
    • Menggunakan sintaks deklaratif
    • Menonjolkan performa pada skala mikrodetik
    • Saat ini halaman webnya sendiri juga ditata menggunakan Clay
  • Disediakan dalam bentuk berkas header tunggal
    • Dapat digunakan di C/C++
    • Disertakan dengan cara #include clay.h
    • Terdiri dari sekitar 2.000 baris kode C99
    • Tidak memiliki dependensi, termasuk pustaka standar C
    • Jika dikompilasi ke .wasm, ukurannya 15KB
  • Performa dan cara penggunaan memorinya dirancang dengan mempertimbangkan pembaruan UI real time
    • Cukup cepat untuk menghitung ulang seluruh UI di setiap frame
    • Penggunaan memori dasarnya adalah 3,5MB
    • Menggunakan alokasi statis dan penggunaan ulang
    • Tidak menggunakan malloc dan free
    • Dapat menyederhanakan desain animasi dan UI responsif tanpa teknik penghindaran performa yang umum

UI deklaratif dan pemisahan renderer

  • Sintaks deklaratif berfokus pada penyusunan hierarki elemen UI bertingkat dengan cara yang mudah dibaca
    • Elemen UI dapat dicampurkan dengan loop, kondisional, dan fungsi C
    • Dapat membuat pustaka komponen yang dapat digunakan ulang dengan elemen dasar UI seperti teks, gambar, dan persegi panjang
  • Clay tidak bergantung pada renderer maupun platform
    • Tata letak ditangani oleh Clay, sedangkan rendering dapat dilakukan dengan Raylib, WebGL Canvas, HTML, dan lainnya
    • Keluaran berupa array terurut dari perintah render primitif seperti RECTANGLE, TEXT, dan IMAGE
    • Bisa menulis renderer sendiri hanya dengan beberapa ratus baris kode atau memakai contoh yang disediakan
    • Renderer HTML juga disediakan, dan halaman saat ini adalah contohnya
  • Menyertakan alat debug bawaan
    • Menyediakan alat debug bergaya Chrome Inspector
    • Dapat melihat hierarki dan pengaturan tata letak secara real time
    • Di halaman tersebut, tekan tombol d untuk mencoba alat debug

Bacaan terkait

1 komentar

 
GN⁺ 2024-12-21
Pendapat di Hacker News

  • Terlihat bagus, dan video YouTube tempat pengembangnya menjelaskan langsung juga sangat bagus: https://www.youtube.com/watch?v=DYWTw19_8r4

    • Penjelasan yang jelas dan intuitif seperti ini jarang ada, dan video ini benar-benar bagus
    • Pengembangnya tampak seperti sedang menemukan kembali konsep library GUI
      Bentuk modernnya adalah GUI berbasis mouse yang dibuat Xerox pada 1970-an, lalu dikomersialkan sebagai Xerox Star, dan alurnya kemudian memengaruhi Jobs pada Apple Lisa serta Gates pada MS Windows
      Framework GUI menentukan tampilan dan nuansa platform, serta menentukan seberapa mudah pengembang bisa membuat aplikasi, sehingga menjadi inti dari berbagai persaingan platform seperti sistem operasi, browser, dan mesin grafis

  • Cukup keren bahwa ini bisa dibuat dalam beberapa ribu baris
    Namun saya lebih menyukai CSS Grid daripada Flex, jadi saya membuat library layout CSS Grid dengan Nim murni, dan cukup bangga dengannya: https://github.com/elcritch/cssgrid
    Saya juga ingin melihat Clay dan membandingkan algoritma layout-nya; menyenangkan melihat kotak-kotak mengubah ukurannya sendiri dengan algoritma yang kita implementasikan sendiri
    Saya juga penasaran apakah bisa mengekspos antarmuka C

    • Keren. Saya juga punya implementasi CSS Grid independen, dibuat dengan Rust: https://github.com/DioxusLabs/taffy
      Itu juga mendukung layout Flexbox dan Block, dan lisensi keduanya tampaknya seperti MIT, jadi silakan ambil bagian yang dibutuhkan. Namun mungkin akan lebih mudah ditemukan kalau menambahkan file LICENSE
      Targetnya kompatibilitas web penuh, tetapi belum sepenuhnya tercapai; bagian yang mungkin menarik khususnya adalah kumpulan pengujian yang cukup besar
      Pengujian didefinisikan sebagai potongan HTML, lalu menjalankan Chrome lewat webdriver untuk mengambil assertion yang benar, kemudian mengubahnya menjadi unit test kode murni. Kalau mau, Anda bisa menulis generator pengujian sendiri dan memakai ulang potongan kami
      Infrastruktur pengujian ini juga sebagian dibagikan dengan Yoga, implementasi Flexbox C++ yang menjalankan React Native: https://github.com/facebook/yoga
    • Perhitungan layout CSS Grid yang akurat lebih mirip menyelesaikan sistem persamaan dan constraint
      Untuk kasus sederhana tanpa sel yang merentang seperti Flexbox, ini relatif mudah dilakukan, tetapi kalau tidak, masalahnya tidak sederhana dan membutuhkan pendekatan seperti solver simplex atau Cassowary: https://constraints.cs.washington.edu/solvers/cassowary-tochi.pdf

  • Di bagian akhir ada tombol untuk beralih antara HTML dan Canvas, dan biasanya hampir tidak ada perbedaan, jadi itu keren
    Namun pada kombinasi iOS Safari dan Dark Reader, halaman HTML berubah ke mode gelap sedangkan halaman Canvas tidak, jadi secara pribadi efek “wow”-nya jadi hilang
    Meski begitu, tampilannya bagus

    • Pemilihan teks dan zoom in/out juga bermasalah
    • Tertulis “Ada juga renderer HTML. Yang sedang Anda lihat sekarang adalah itu!”, tetapi saat membacanya saya sudah beralih ke renderer Canvas
    • Di Chrome, renderer HTML jelas lebih cepat, dan saya penasaran alasannya
      Canvas juga cukup cepat, tetapi perbedaannya terasa pada animasi “High performance” atau saat scrolling

  • Tidak bisa memilih semua teks di balik animasi
    Sepertinya ada sesuatu yang mengambil alih fokus, dan saat mencoba memilih teks, pilihannya langsung dibatalkan

    • Mungkin karena seluruhnya diinisialisasi ulang pada setiap frame, dan animasinya sedang berjalan
    • Di perangkat mobile, fenomena yang sama terjadi pada browser berbasis Chromium maupun Gecko
      Yang menarik, Firefox jauh lebih buruk saat merender halaman ini: https://imgur.com/a/DNYe2WN

  • Ini interpretasi yang menyenangkan dari gaya UI yang sangat saya sukai
    Cara memisahkan logika UI dan penggambaran menjadi kumpulan perintah gambar itu bagus dan sangat serbaguna. Saya pertama kali melihatnya di microui, dan berkat pemisahan itu, library tersebut mudah digunakan di browser dengan WASM dan Canvas2D: https://rxi.github.io/microui_v2_an_implementation_overview.html
    Selain itu, ide menghitung layout di WASM lalu merendernya sebagai HTML juga bagus; entah kenapa saya tidak pernah memikirkannya sebelumnya

  • Awalnya saya bertanya-tanya apakah ini memang perlu dibuat dengan C, bukankah bisa dibuat lebih aman dengan Haskell atau OCaml
    Namun kalau hanya 2000 baris C dan tanpa dependensi, itu cukup keren

    • Setidaknya dengan cara ini, bisa digunakan dari bahasa lain juga

  • Ada juga taffy yang dibuat dengan Rust, dan binding C sedang dikerjakan: https://crates.io/crates/taffy

  • Bagus untuk draf pertama
    Namun sayang keluaran HTML-nya hanya elemen div, dan akan jauh lebih baik kalau sedikit memperhatikan aksesibilitas
    Di beberapa tempat, saat mencoba memilih teks, halaman dirender ulang sehingga pilihan dibatalkan sebelum sempat menekan control-c

  • Kalau ditanya serius, meskipun konsep menulis halaman web dengan cara seperti ini terdengar keren, rasanya agak berlebihan
    Bentuknya adalah pemanggilan seperti CLAY(...), CLAY_TEXT(...), LandingPageBlob(...) yang bersarang dalam di dalam LandingPageDesktop(), dan sumber contoh ada di sini: https://github.com/nicbarker/clay/blob/35d72e5fba6872be48d15ed9d84269a86cd72b4e/examples/clay-official-website/main.c#L50C1-L67C2

  • Karya yang keren. Di browser, menurut saya teks yang bisa dipilih itu wajib
    Untuk klien dan aplikasi yang tidak membutuhkan fitur seperti itu atau bisa menyediakannya sendiri, ini terlihat seperti solusi yang sangat kecil dan bagus

    • Aneh melihat seleksi teks dan copy/paste rusak, tetapi sepertinya bisa diperbaiki
      Saya jadi terus mengulang hal yang sama, tetapi dalam perubahan UI beberapa tahun terakhir, kemunduran universalitas clipboard terasa sebagai salah satu kehilangan yang paling diremehkan, bersama dengan kemunduran kemampuan membuat tautan dan embedding