Clay – UI Yerleşim Kütüphanesi

 (nicbarker.com)
2 puan yazan GN⁺ 2024-12-21 | 1 yorum | WhatsApp'ta paylaş

  • Clay'e giriş

    • Clay, C dilinde yazılmış, Flexbox tarzı bir UI otomatik yerleşim kütüphanesidir.
    • Bildirimsel sözdizimi ve mikrosaniye düzeyinde performans sunar.
    • Şu anda bu web sayfasının yerleşimi de Clay ile oluşturulmuştur.

  • Başlıca özellikler

    • Yüksek performans

      • Flexbox tarzı duyarlı yerleşimleri destekler.
      • Tek bir .h dosyasıyla C/C++ içinde kullanılabilir ve 15kb'lik bir .wasm dosyasına derlenebilir.
      • Yaklaşık 2000 satır C99 kodundan oluşur ve C standart kütüphanesi dahil hiçbir bağımlılığı yoktur.
      • Raylib, WebGL Canvas, HTML gibi çeşitli renderer'larla birlikte kullanılabilir.
      • Kullanıcı tanımlı motorlara veya ortamlara kolayca entegre edilebilen esnek çıktı sunar.

    • Bildirimsel sözdizimi

      • İç içe geçmiş UI öğesi hiyerarşilerine sahip, esnek ve okunabilir bir bildirimsel sözdizimi sunar.
      • Döngüler, koşullu ifadeler ve fonksiyonlar gibi standart C kodlarıyla öğeleri karıştırabilirsiniz.
      • Metin, görsel ve dikdörtgen gibi temel UI bileşenleriyle yeniden kullanılabilir bileşen kütüphaneleri oluşturabilirsiniz.

    • Yüksek performans

      • Her karede tüm UI'yi yeniden hesaplayabilecek kadar hızlıdır.
      • Statik tahsis ve yeniden kullanım sayesinde 3.5mb gibi küçük bir bellek kullanımı sunar. malloc/free kullanmaz.
      • Standart performans hilelerinden kaçınarak animasyonları ve duyarlı UI tasarımını basitleştirir.

  • Renderer ve platform bağımsızlığı

    • RECTANGLE, TEXT, IMAGE gibi temel render komutlarının sıralı bir dizisini çıktı olarak üretir.
    • Birkaç yüz satır kodla kendi renderer'ınızı yazabilir veya Raylib, WebGL canvas gibi sağlanan örnekleri kullanabilirsiniz.
    • Bir HTML renderer'ı da sunulur; şu anda baktığınız sayfa bunun bir örneğidir.

  • Entegre hata ayıklama aracı

    • "Chrome Inspector" tarzında yerleşik bir hata ayıklama aracı içerir.
    • Yerleşim hiyerarşisini ve yapılandırmasını gerçek zamanlı olarak inceleyebilirsiniz.
    • Hemen şimdi denemek için d tuşuna basabilirsiniz.

İlgili okumalar

1 yorum

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

  • Birkaç bin satır kodla etkileyici bir şey yapılabilmesi etkileyici. Flex yerine CSS Grid'i tercih ettiğim için Nim ile bir CSS Grid yerleşim kütüphanesi yaptım. Clay ile yerleşim algoritmasını karşılaştırmayı planlıyorum. C arayüzü dışa aktarılıp aktarılamayacağını merak ediyorum

  • HTML ve Canvas arasında geçiş düğmesi var; iOS Safari + Dark Reader'da HTML sayfası koyu moda dönüştürülüyor ama Canvas sayfası dönüştürülmüyor. Bu da etkisini biraz azaltıyor

  • Geliştiricinin hazırladığı harika YouTube videosunu izledim. Oldukça etkileyici

  • UI mantığını çizim komutları kümesinden ayırma fikri çok faydalı ve çok yönlü. Bunu ilk kez microui'de görmüştüm ve WASM ile Canvas2D kullanarak kütüphaneyi tarayıcıda kolayca kullanabilmiştim

  • Animasyondan sonraki tüm metin seçilemiyor. Odak çalınmış gibi görünüyor

  • Web sitesindeki bağlantılara sağ ve orta tıklayınca sol tıklama gibi davranıyor

  • İlk taslak için fena değil. HTML çıktısının yalnızca div öğelerinden oluşması biraz hayal kırıklığı yaratıyor. Erişilebilirliğe biraz daha dikkat edilse iyi olurdu. Metni seçmeye çalışınca yeniden render nedeniyle seçim iptal ediliyor

  • C ile 2000 satır kodda ve bağımlılık olmadan uygulanmış olması güzel. Bunun Haskell/OCaml ile daha güvenli şekilde uygulanıp uygulanamayacağını düşündüm

  • Rust ile yazılmış taffy de var ve C binding'leri üzerinde çalışılıyor

  • Frontend geliştiricisi olmadığım için, CSS'i doğrudan kullanmaya veya bir CSS framework/kütüphanesi kullanmaya kıyasla bu yöntemin neden daha iyi olduğunu anlamakta zorlanıyorum. Zaten yüzlerce CSS framework'ü var ve bunlar da buna benzer bir iş yapıyor gibi görünüyor