Clay – UIレイアウトライブラリ

 (nicbarker.com)
2 ポイント 投稿者 GN⁺ 2024-12-21 | 1件のコメント | WhatsAppで共有

  • Clay の紹介

    • Clay は C 言語で書かれた、Flexbox スタイルの UI 自動レイアウトライブラリ。
    • 宣言的な文法とマイクロ秒単位の性能を提供。
    • 現在この Web ページのレイアウトも Clay で構成されている。

  • 主な特徴

    • 高性能

      • Flexbox スタイルのレスポンシブレイアウトをサポート。
      • 単一の .h ファイルとして C/C++ で利用でき、15kb の .wasm ファイルにコンパイル可能。
      • 約 2000 行の C99 コードで構成され、C 標準ライブラリを含む依存関係がない。
      • Raylib、WebGL Canvas、HTML などさまざまなレンダラーと併用可能。
      • ユーザー定義のエンジンや環境で簡単に合成できる柔軟な出力を提供。

    • 宣言的な文法

      • ネストした UI 要素の階層構造を持つ、柔軟で読みやすい宣言的文法を提供。
      • ループ、条件文、関数のような標準的な C コードと要素を混在させられる。
      • テキスト、画像、四角形のような UI 基本要素で再利用可能なコンポーネントライブラリを作成できる。

    • 高性能

      • 毎フレーム UI 全体を再計算できるほど高速。
      • 静的割り当てと再利用により、3.5mb という小さなメモリ使用量を実現。malloc/free は使用しない。
      • 典型的なパフォーマンスハックを避けることで、アニメーションとレスポンシブ UI デザインを単純化。

  • レンダラーおよびプラットフォーム非依存

    • RECTANGLE、TEXT、IMAGE のような基本レンダーコマンドの整列済み配列を出力。
    • 数百行のコードで独自レンダラーを書けるほか、Raylib や WebGL キャンバスなどの提供済みサンプルも利用可能。
    • HTML レンダラーも提供されており、今見ているページがその例。

  • 統合デバッグツール

    • 「Chrome Inspector」スタイルの内蔵デバッグツールを含む。
    • リアルタイムでレイアウト階層構造と構成を確認できる。
    • d キーを押して今すぐ試せる。

関連記事

1件のコメント

 
GN⁺ 2024-12-21
Hacker Newsの意見

  • 数千行のコードで素晴らしいものを作れるのが印象的。FlexよりCSS Gridを好むので、NimでCSS Gridレイアウトライブラリを作った。Clayとレイアウトアルゴリズムを比較してみる予定。Cインターフェースを公開できるのか気になる

    • CSS Gridが好きな理由は、次のような形式を模倣できるから
    • GitHubリンク

  • HTMLとCanvasの切り替えボタンがあるが、iOS Safari + Dark ReaderではHTMLページはダークモードに変換される一方で、Canvasページはそうならない。そのせいで感動が少し薄れる

  • 開発者が作った素晴らしいYouTubeビデオを視聴した。とても印象的

  • UIロジックを描画命令セットから分離するというアイデアは非常に有用で汎用性が高い。microuiで初めて見たが、WASMとCanvas2Dを使ってブラウザで簡単にライブラリを利用できた

    • WASMでレイアウトしてHTMLでレンダリングするというアイデアが素晴らしい
    • microuiリンク

  • アニメーション以降のすべてのテキストが選択できない。フォーカスが奪われたように見える

  • ウェブサイトでリンクを右クリックや中クリックすると、左クリックのように動作する

  • 最初の草案としては悪くない。HTML出力がdiv要素だけで構成されているのは残念。アクセシビリティをもう少し考慮するとよさそう。テキストを選択しようとすると再レンダリングのせいで選択が解除される

  • Cで2000行のコード、しかも依存関係なしで実装したのがすごい。Haskell/OCamlでもっと安全に実装できるのではないかと思った

  • Rustで書かれたtaffyもあり、Cバインディングが進行中

  • フロントエンド開発者ではないので、CSSを直接使ったりCSSフレームワーク/ライブラリを使ったりするより、なぜこの方法が優れているのか理解しづらい。すでに数百ものCSSフレームワークが存在し、これも同じようなことをしているように見える