Clay – UI yerleşim kütüphanesi

 (nicbarker.com)
2 puan yazan GN⁺ 2024-12-21 | 1 yorum | WhatsApp'ta paylaş
  • Clay, C ile yazılmış Flexbox tarzı otomatik bir UI yerleşim kütüphanesidir; özel motorlarda veya düşük seviyeli ortamlarda bildirimsel UI oluşturmayı hedefler
  • Tek bir header dosyası olarak sunulur, C/C++ ile kullanılabilir ve yaklaşık 2.000 satır C99 kodu ile 15KB .wasm derleme çıktısını öne çıkarır
  • C standart kütüphanesi dahil hiçbir bağımlılığı yoktur ve Raylib, WebGL Canvas, HTML gibi render yöntemlerinden bağımsız kullanılabilir
  • Tüm UI’yi her karede yeniden hesaplayabilecek kadar hızlıdır; varsayılan 3,5MB bellek ve statik ayırma-yeniden kullanım yaklaşımıyla malloc/free olmadan çalışır
  • C kodundaki döngüler, koşullar ve fonksiyonlarla UI hiyerarşisini birlikte kullanabilir; yerleşim durumunu yerleşik hata ayıklama araçlarıyla gerçek zamanlı inceleyebilirsiniz

C99 tek header ve bellek modeli

  • Clay, C tabanlı, Flexbox tarzı otomatik yerleşim kütüphanesidir
    • Bildirimsel sözdizimi kullanır
    • Mikro saniye düzeyinde performans vurgusu yapar
    • Şu anda web sayfasının kendisi de Clay ile yerleştirilmektedir
  • Tek bir header dosyası biçiminde sunulur
    • C/C++ ile kullanılabilir
    • #include clay.h şeklinde eklenir
    • Yaklaşık 2.000 satır C99 kodundan oluşur
    • C standart kütüphanesi dahil hiçbir bağımlılığı yoktur
    • .wasm olarak derlendiğinde 15KB boyutundadır
  • Performans ve bellek kullanım modeli, gerçek zamanlı UI güncellemesi düşünülerek tasarlanmıştır
    • Tüm UI’yi her karede yeniden hesaplayabilecek kadar hızlıdır
    • Varsayılan bellek kullanımı 3,5MB’dır
    • Statik ayırma ve yeniden kullanım kullanır
    • malloc ve free kullanmaz
    • Alışılmış performans kaçınma teknikleri olmadan animasyon ve duyarlı UI tasarımını basitleştirebilir

Bildirimsel UI ve renderer ayrımı

  • Bildirimsel sözdizimi, iç içe geçmiş UI öğesi hiyerarşisini okunabilir biçimde kurmaya odaklanır
    • UI öğeleri, C dilindeki döngüler, koşullar ve fonksiyonlarla birlikte kullanılabilir
    • Metin, görsel, dikdörtgen gibi temel UI öğeleriyle yeniden kullanılabilir bileşen kütüphaneleri oluşturulabilir
  • Clay, renderer ve platforma bağımlı değildir
    • Yerleşimi Clay yönetirken render işlemi Raylib, WebGL Canvas, HTML vb. ile yapılabilir
    • Çıktı, RECTANGLE, TEXT, IMAGE gibi ilkel render komutlarının sıralı bir dizisidir
    • Birkaç yüz satır kodla kendi renderer’ınızı yazabilir veya sağlanan örnekleri kullanabilirsiniz
    • Bir HTML renderer da sunulur ve mevcut sayfa bunun bir örneğidir
  • Yerleşik hata ayıklama araçları içerir
    • Chrome Inspector tarzı hata ayıklama araçları sunar
    • Yerleşim hiyerarşisini ve ayarları gerçek zamanlı görebilirsiniz
    • Sayfada d tuşuna basarak hata ayıklama aracını deneyebilirsiniz

İlgili okumalar

1 yorum

 
GN⁺ 2024-12-21
Hacker News görüşleri

  • Güzel görünüyor; geliştiricinin bizzat anlattığı YouTube videosu da harikaydı: https://www.youtube.com/watch?v=DYWTw19_8r4

    • Bu kadar net ve sezgisel bir açıklama nadir bulunur; bu video gerçekten iyi
    • Geliştirici sanki GUI kütüphanesi kavramını yeniden keşfediyor gibi görünüyor
      Modern biçimi, 1970'lerde Xerox'un yaptığı fare tabanlı GUI; sonra Xerox Star ile ticarileşti ve Jobs'ın Apple Lisa'da, Gates'in de MS Windows'ta etkilendiği akış bu
      GUI framework'leri platformun görünüm ve hissini belirler; geliştiricilerin uygulamaları ne kadar kolay yapabileceğini etkilediği için işletim sistemleri, tarayıcılar, grafik motorları gibi çeşitli platform rekabetlerinin merkezinde yer alır

  • Birkaç bin satırla yapılabilmesi epey havalı
    Yine de Flex yerine CSS Grid'i tercih ettiğim için, saf Nim ile bir CSS Grid yerleşim kütüphanesi yaptım ve bununla bir ölçüde gurur duyuyorum: https://github.com/elcritch/cssgrid
    Clay'e de bakıp yerleşim algoritmalarını karşılaştırmak istiyorum; kendi uyguladığın algoritmayla kutuların kendi kendine boyut değiştirdiğini görmek eğlenceli
    Bir C arayüzü sunup sunamayacağımı da merak ediyorum

    • Harika. Benim de bağımsız bir CSS Grid uygulamam var ve Rust ile yazdım: https://github.com/DioxusLabs/taffy
      Flexbox ve Block layout'u da destekliyor; lisanslar da ikisi de MIT gibi görünüyor, ihtiyaç duyduğun kısımları alabilirsin. Yine de bir LICENSE dosyası eklersen bulması daha kolay olur
      Tam web uyumluluğunu hedefliyoruz ama henüz tamamen ulaşmış değiliz; özellikle ilgi çekebilecek kısım oldukça büyük test paketimiz
      Testler HTML parçaları olarak tanımlanıyor; Chrome'u webdriver ile çalıştırıp doğru assertion'ları çekiyoruz ve ardından bunları saf kod birim testlerine dönüştürüyoruz. İstersen kendi test üreticini yazıp bizim parçaları yeniden kullanabilirsin
      Bu test altyapısı, React Native'i çalıştıran C++ Flexbox uygulaması Yoga ile de kısmen paylaşılıyor: https://github.com/facebook/yoga
    • Doğru CSS Grid yerleşim hesaplaması, denklem ve kısıt sistemlerini çözmeye daha yakın bir iş
      Flexbox'taki gibi hücrelerin spanning yapmadığı basit durumlarda nispeten kolay yapılabilir; ama aksi halde basit değil, simplex çözücü ya da Cassowary gibi bir yaklaşım gerekiyor: https://constraints.cs.washington.edu/solvers/cassowary-tochi.pdf

  • Sonda HTML ile Canvas arasında geçiş yapan bir düğme var; genelde neredeyse hiç fark olmaması güzel
    Ama iOS Safari ve Dark Reader kombinasyonunda HTML sayfası karanlık moda geçerken Canvas sayfası geçmiyor; kişisel olarak bu yüzden wow etkisi bozuldu
    Yine de göze hoş görünüyor

    • Metin seçimi ve yakınlaştırma/uzaklaştırma da sorunlu
    • “HTML renderer da var. Şu anda gördüğünüz şey o!” yazıyor; ama bunu okurken zaten Canvas renderer'a geçmiş durumdaydım
    • Chrome'da HTML renderer kesinlikle daha hızlı; nedenini merak ediyorum
      Canvas da yeterince hızlı, ama “High performance” animasyonunda veya kaydırırken fark hissediliyor

  • Animasyonun arkasındaki tüm metinler seçilemiyor
    Sanki bir şey odağı çalıyor; metni seçmeye çalışınca seçim hemen kaldırılıyor

    • Muhtemelen her frame'de tam baştan başlatma yapıyor ve animasyon oynadığı için böyle oluyor
    • Mobilde hem Chromium hem de Gecko tabanlı tarayıcılarda aynı durum yaşanıyor
      İlginç olan, Firefox'un bu sayfayı render ederken çok daha kötü olması: https://imgur.com/a/DNYe2WN

  • Gerçekten sevdiğim bir UI tarzına keyifli bir yorum
    UI mantığını ve çizimi bir çizim komutları kümesi olarak ayırma biçimi harika ve çok yönlü. Bunu ilk microui'de görmüştüm; o ayrım sayesinde kütüphaneyi WASM ve Canvas2D ile tarayıcıda kolayca kullanabilmiştim: https://rxi.github.io/microui_v2_an_implementation_overview.html
    Ayrıca layout'u WASM'de hesaplayıp HTML olarak render etme fikri de iyi; daha önce neden aklıma gelmedi bilmiyorum

  • Başta bunu C ile yapmaya gerek var mı, Haskell ya da OCaml ile daha güvenli yapılabilir diye düşündüm
    Ama 2000 satır C ve bağımlılık yoksa, epey hoş

    • En azından bu şekilde başka dillerden de kullanılabilir

  • Rust ile yazılmış taffy de var; C binding'leri üzerinde çalışılıyor: https://crates.io/crates/taffy

  • İlk taslak olarak iyi
    Ancak HTML çıktısının yalnızca div öğelerinden oluşması üzücü; erişilebilirliğe biraz dikkat edilse büyük ölçüde iyileşir
    Birçok yerde metni seçmeye çalışınca yeniden render edilip control-c'ye basmadan önce seçimin kaldırılması da sorun

  • Ciddiyetle sorarsak, kavram havalı olsa da web sayfalarını bu şekilde yazmak biraz fazla değil mi diye düşünüyorum
    LandingPageDesktop() içinde CLAY(...), CLAY_TEXT(...), LandingPageBlob(...) gibi çağrıların derinlemesine iç içe geçtiği bir yapı var; örnek kaynak burada: https://github.com/nicbarker/clay/blob/35d72e5fba6872be48d15ed9d84269a86cd72b4e/examples/clay-official-website/main.c#L50C1-L67C2

  • Harika bir iş. Tarayıcıda seçilebilir metnin şart olduğunu düşünüyorum
    Böyle bir özelliğe ihtiyaç duymayan ya da bunu kendi başına sağlayabilen istemciler ve uygulamalar için çok küçük ve iyi bir çözüm gibi görünüyor

    • Metin seçme ve kopyala/yapıştırın bozulduğunu görmek garip, ama düzeltilebilir gibi de duruyor
      Sürekli aynı şeyi söylüyorum ama son yıllardaki UI değişimlerinde panonun evrenselliğinin gerilemesi, linklenebilirlik ve gömme imkânındaki gerilemeyle birlikte en az değer verilen kayıplardan biri gibi geliyor