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

 (nicbarker.com)
2 पॉइंट द्वारा GN⁺ 2024-12-21 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Clay C में बनी Flexbox-स्टाइल ऑटो UI लेआउट लाइब्रेरी है, जिसका लक्ष्य custom engine या low-level environments में भी declarative UI composition उपलब्ध कराना है
  • यह एकल header file के रूप में दी जाती है, C/C++ में इस्तेमाल की जा सकती है, और लगभग 2,000 लाइनों के C99 code तथा 15KB .wasm compile output को हाइलाइट करती है
  • C standard library तक सहित इसमें कोई dependency नहीं है, और इसे Raylib, WebGL Canvas, HTML जैसे rendering तरीकों से अलग रखकर इस्तेमाल किया जा सकता है
  • यह इतनी तेज है कि पूरी UI को हर frame में फिर से calculate कर सकती है, और default 3.5MB memory तथा static allocation और reuse तरीके से malloc/free के बिना काम करती है
  • C code के loops, conditionals और functions को UI hierarchy के साथ मिलाकर इस्तेमाल किया जा सकता है, और built-in debug tools से layout state को real time में देखा जा सकता है

C99 single header और memory model

  • Clay C-based Flexbox-स्टाइल auto layout library है
    • यह declarative syntax का इस्तेमाल करती है
    • microsecond-level performance को प्रमुखता देती है
    • मौजूदा webpage खुद भी Clay से layout किया गया है
  • यह एकल header file के रूप में उपलब्ध है
    • C/C++ में इस्तेमाल की जा सकती है
    • इसे #include clay.h तरीके से include किया जाता है
    • यह लगभग 2,000 लाइनों के C99 code से बनी है
    • C standard library सहित इसकी कोई dependency नहीं है
    • .wasm में compile करने पर इसका आकार 15KB है
  • Performance और memory usage का तरीका real-time UI updates को ध्यान में रखता है
    • यह इतनी तेज है कि पूरी UI को हर frame में फिर से calculate किया जा सकता है
    • default memory usage 3.5MB है
    • static allocation और reuse का इस्तेमाल करती है
    • malloc और free का इस्तेमाल नहीं करती
    • सामान्य performance-avoidance techniques के बिना animations और responsive UI design को सरल बना सकती है

Declarative UI और renderer separation

  • Declarative syntax nested UI element hierarchy को पढ़ने में आसान तरीके से बनाने पर केंद्रित है
    • UI elements को C के loops, conditionals और functions के साथ मिलाकर इस्तेमाल किया जा सकता है
    • text, image, rectangle जैसे UI primitives से reusable component library बनाई जा सकती है
  • Clay renderer और platform पर dependent नहीं है
    • layout Clay संभालता है और rendering Raylib, WebGL Canvas, HTML आदि से की जा सकती है
    • output RECTANGLE, TEXT, IMAGE जैसे primitive render commands की ordered array है
    • कुछ सौ लाइनों के code में अपना renderer लिखा जा सकता है या दिए गए examples इस्तेमाल किए जा सकते हैं
    • HTML renderer भी उपलब्ध है, और मौजूदा page उसका example है
  • इसमें built-in debug tools शामिल हैं
    • Chrome Inspector-style debugging tool उपलब्ध कराता है
    • layout hierarchy और settings को real time में देखा जा सकता है
    • page पर d key दबाकर debug tool आज़माया जा सकता है

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

1 टिप्पणियां

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

  • दिखने में अच्छा है, और डेवलपर ने खुद जो YouTube वीडियो में समझाया है वह भी शानदार था: https://www.youtube.com/watch?v=DYWTw19_8r4

    • इतनी स्पष्ट और सहज व्याख्या दुर्लभ है, यह वीडियो सचमुच अच्छा है
    • ऐसा लगता है जैसे डेवलपर GUI लाइब्रेरी की अवधारणा को फिर से खोज रहा हो
      इसका आधुनिक रूप 1970 के दशक में Xerox द्वारा बनाया गया mouse-based GUI है, जो बाद में Xerox Star के रूप में commercialize हुआ, और इसी धारा से Jobs ने Apple Lisa में और Gates ने MS Windows में प्रेरणा ली
      GUI framework platform का look and feel तय करते हैं और यह निर्धारित करते हैं कि डेवलपर ऐप कितनी आसानी से बना सकते हैं, इसलिए वे operating system, browser, graphics engine जैसी कई platform प्रतिस्पर्धाओं के केंद्र में रहे हैं

  • कुछ हजार lines में ऐसा बन पाना काफी शानदार है
    हालांकि मैं Flex की बजाय CSS Grid को पसंद करता हूं, इसलिए मैंने pure Nim में CSS Grid layout library बनाई और उस पर मुझे कुछ हद तक गर्व है: https://github.com/elcritch/cssgrid
    Clay को भी देखकर layout algorithms की तुलना करना चाहूंगा, और अपने बनाए algorithm से boxes को खुद अपना size बदलते देखना मजेदार होता है
    यह भी उत्सुकता है कि क्या C interface expose किया जा सकता है

    • बढ़िया। मेरे पास भी एक independent CSS Grid implementation है और वह Rust में बना है: https://github.com/DioxusLabs/taffy
      यह Flexbox और Block layout भी support करता है, और दोनों की licenses MIT जैसी दिखती हैं, इसलिए जरूरत के हिस्से ले सकते हैं। बस LICENSE file जोड़ दें तो ढूंढना आसान होगा
      लक्ष्य full web compatibility है, लेकिन अभी पूरी तरह वहां तक नहीं पहुंचा है; खास तौर पर दिलचस्प चीज इसकी काफी बड़ी test suite हो सकती है
      Tests HTML snippets के रूप में define किए जाते हैं, Chrome को webdriver से चलाकर सही assertions scrape किए जाते हैं, फिर उन्हें pure code unit tests में convert किया जाता है। चाहें तो अपना test generator लिखकर हमारे snippets reuse कर सकते हैं
      यह test infrastructure React Native को चलाने वाले C++ Flexbox implementation Yoga के साथ भी आंशिक रूप से share किया जाता है: https://github.com/facebook/yoga
    • सटीक CSS Grid layout calculation करना equations और constraints के system को solve करने जैसा है
      Flexbox की तरह cells के span न करने वाले simple cases में यह अपेक्षाकृत आसानी से हो सकता है, लेकिन वरना यह सरल नहीं है, इसलिए simplex solver या Cassowary जैसे approach की जरूरत पड़ती है: https://constraints.cs.washington.edu/solvers/cassowary-tochi.pdf

  • अंत में HTML और Canvas के बीच switch करने वाला button है, और आम तौर पर फर्क लगभग नहीं दिखता, यह अच्छा है
    लेकिन iOS Safari और Dark Reader के combination में HTML page dark mode में बदल जाता है, जबकि Canvas page नहीं बदलता, इसलिए निजी तौर पर मेरा wow moment टूट गया
    फिर भी देखने में अच्छा है

    • Text selection और zoom in/out में भी समस्या है
    • लिखा है, “HTML renderer भी है। अभी आप वही देख रहे हैं!”, लेकिन जब मैंने उसे पढ़ा तो मैं पहले ही Canvas renderer पर switch कर चुका था
    • Chrome में HTML renderer साफ तौर पर तेज है, वजह जानने की उत्सुकता है
      Canvas भी काफी तेज है, लेकिन “High performance” animation या scroll करते समय फर्क महसूस होता है

  • Animation के पीछे का कोई भी text select नहीं किया जा सकता
    लगता है कुछ focus छीन रहा है, और text select करने की कोशिश करते ही selection तुरंत हट जाता है

    • शायद हर frame पर पूरा reset हो रहा है, और animation चल रहा है इसलिए ऐसा हो रहा है
    • Mobile पर Chromium और Gecko based दोनों browsers में वही व्यवहार दिखता है
      दिलचस्प बात यह है कि Firefox इस page को render करते समय कहीं ज्यादा खराब है: https://imgur.com/a/DNYe2WN

  • यह एक UI style की मजेदार व्याख्या है जिसे मैं सचमुच पसंद करता हूं
    UI logic और drawing को drawing commands के set में अलग करने का तरीका शानदार और बहुत versatile है। मैंने इसे पहली बार microui में देखा था, और इसी separation की वजह से WASM और Canvas2D के साथ browser में library को आसानी से इस्तेमाल कर पाया: https://rxi.github.io/microui_v2_an_implementation_overview.html
    साथ ही WASM में layout calculate करके HTML में render करने का विचार भी अच्छा है; समझ नहीं आता पहले यह क्यों नहीं सोचा

  • शुरुआत में लगा कि C में करने की जरूरत है क्या, Haskell या OCaml में ज्यादा safely बनाया जा सकता है
    लेकिन अगर यह C की 2000 lines और zero dependencies है, तो काफी शानदार है

    • कम से कम ऐसा करने से इसे दूसरी languages में भी इस्तेमाल किया जा सकता है

  • Rust में बना taffy भी है, और C bindings पर काम चल रहा है: https://crates.io/crates/taffy

  • पहले draft के लिए अच्छा है
    हालांकि HTML output में सिर्फ div elements होना थोड़ा खलता है, और accessibility पर थोड़ा ध्यान देने से यह काफी बेहतर हो सकता है
    कई जगह text select करने की कोशिश करने पर re-render होकर control-c दबाने से पहले selection हट जाना भी समस्या है

  • गंभीरता से पूछें तो, इस तरह वेबपेज लिखना—कॉन्सेप्ट भले ही शानदार हो—कुछ ज़्यादा नहीं लगता?
    LandingPageDesktop() के अंदर CLAY(...), CLAY_TEXT(...), LandingPageBlob(...) जैसी calls गहराई तक nested रूप में हैं, और example source यहां है: https://github.com/nicbarker/clay/blob/35d72e5fba6872be48d15ed9d84269a86cd72b4e/examples/clay-official-website/main.c#L50C1-L67C2

  • शानदार काम है। browser में मुझे लगता है selectable text ज़रूरी है
    जिन clients और apps को ऐसी functionality की ज़रूरत नहीं है, या जो इसे खुद provide कर सकते हैं, उनके लिए यह बहुत छोटा और अच्छा solution लगता है

    • text selection और copy/paste को टूटते देखना अजीब है, लेकिन लगता है इसे ठीक किया जा सकता है
      बार-बार वही बात कहनी पड़ती है, लेकिन हाल के वर्षों में UI changes में clipboard universality का पीछे जाना, linkability और embedding के पीछे जाने के साथ, सबसे कम आंके गए नुकसानों में से एक लगता है