Clay – UI लेआउट लाइब्रेरी

 (nicbarker.com)
2 पॉइंट द्वारा GN⁺ 2024-12-21 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • Clay परिचय

    • Clay, C भाषा में लिखी गई एक flexbox-स्टाइल UI auto layout लाइब्रेरी है।
    • यह declarative syntax और microsecond-स्तर का performance प्रदान करती है।
    • इस वेबपेज का वर्तमान लेआउट भी Clay से बनाया गया है।

  • मुख्य विशेषताएँ

    • उच्च प्रदर्शन

      • यह flexbox-स्टाइल responsive layout को सपोर्ट करती है।
      • इसे C/C++ में एकल .h फ़ाइल के रूप में इस्तेमाल किया जा सकता है, और इसे 15kb की .wasm फ़ाइल में compile किया जा सकता है।
      • यह लगभग 2000 पंक्तियों के C99 code से बनी है और C standard library सहित किसी भी dependency पर निर्भर नहीं है।
      • इसे Raylib, WebGL Canvas, HTML जैसे विभिन्न renderers के साथ इस्तेमाल किया जा सकता है।
      • यह ऐसा flexible output देती है जिसे custom engine या environment में आसानी से compose किया जा सकता है।

    • Declarative syntax

      • यह nested UI element hierarchy के साथ flexible और पढ़ने में आसान declarative syntax प्रदान करती है।
      • loops, conditionals और functions जैसे standard C code के साथ elements को मिलाया जा सकता है।
      • text, image, rectangle जैसे UI primitives से reusable component library बनाई जा सकती है।

    • उच्च प्रदर्शन

      • यह इतनी तेज़ है कि हर frame में पूरे UI को दोबारा calculate किया जा सकता है।
      • static allocation और reuse के ज़रिए इसकी memory usage केवल 3.5mb रहती है। यह malloc/free का उपयोग नहीं करती।
      • standard performance hacks से बचकर यह animation और responsive UI design को सरल बनाती है।

  • Renderer और platform स्वतंत्रता

    • यह RECTANGLE, TEXT, IMAGE जैसे मूल render commands का sorted array output करती है।
    • कुछ सौ पंक्तियों के code में अपना renderer लिखा जा सकता है, या Raylib, WebGL canvas आदि के दिए गए examples का उपयोग किया जा सकता है।
    • एक HTML renderer भी दिया गया है, और अभी जो पेज आप देख रहे हैं वही उसका उदाहरण है।

  • एकीकृत debug tools

    • इसमें "Chrome Inspector"-स्टाइल built-in debug tool शामिल है।
    • आप real time में layout hierarchy और configuration देख सकते हैं।
    • अभी इसे आज़माने के लिए "d" key दबाएँ।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-12-21
Hacker News राय

  • यह प्रभावशाली है कि कुछ हज़ार लाइनों के कोड से इतनी शानदार चीज़ बनाई जा सकती है। Flex की बजाय CSS Grid पसंद होने की वजह से Nim में CSS Grid layout library बनाई थी। Clay और उसके layout algorithm की तुलना करने का इरादा है। यह भी जिज्ञासा है कि क्या C interface expose किया जा सकता है

    • CSS Grid पसंद होने का कारण यह है कि यह नीचे जैसे formats की नकल कर सकता है
    • GitHub लिंक

  • HTML और Canvas के बीच toggle button है, लेकिन iOS Safari + Dark Reader में HTML page dark mode में बदल जाता है जबकि Canvas page नहीं बदलता। इससे प्रभाव थोड़ा कम हो जाता है

  • डेवलपर द्वारा बनाया गया शानदार YouTube वीडियो देखा। बहुत प्रभावशाली है

  • UI logic को drawing command set से अलग करने का विचार बहुत उपयोगी और बहुउद्देश्यीय है। यह पहले microui में देखा था, और WASM तथा Canvas2D का उपयोग करके browser में library को आसानी से इस्तेमाल किया जा सका

    • WASM में layout करके HTML में render करने का विचार शानदार है
    • microui लिंक

  • animation के बाद का सारा text select नहीं हो रहा। लगता है focus छिन गया है

  • वेबसाइट पर links को right-click और middle-click करने पर वे left-click की तरह काम करते हैं

  • पहले draft के लिए ठीक है। यह अफ़सोस की बात है कि HTML output सिर्फ div elements से बना है। accessibility पर थोड़ा और ध्यान दिया जाए तो अच्छा होगा। text select करने की कोशिश करने पर re-rendering की वजह से selection हट जाता है

  • C में 2000 लाइनों के code और बिना dependencies के इसे implement करना बढ़िया है। लगा कि क्या इसे Haskell/OCaml में ज़्यादा सुरक्षित तरीके से implement किया जा सकता है

  • Rust में लिखा हुआ taffy भी है, और C bindings पर काम चल रहा है

  • frontend developer न होने की वजह से यह समझना मुश्किल है कि CSS को सीधे इस्तेमाल करने या CSS framework/library इस्तेमाल करने की तुलना में यह तरीका बेहतर क्यों है। पहले से ही सैकड़ों CSS frameworks मौजूद हैं, और लगता है कि वे भी यही काम करते हैं