🚀 Announcing Ark UI スレッドの理解
こちらのつぶやき及び、スレッドを見る。
Motivation
Ark UIの利用検討していて、このスレッド理解したいと思いつつ、背景知識足りなかったりしたので、翻訳しつつ、理解したかったから Ark UI自身は前々から開発進んでいたけど、なぜ、このタイミングでannounce、盛り上がったのか分からなかったから。 hr.icon
🚀 Announcing Ark UI
The robust headless UI component library, built with State machines 🥳💪✨
🔸Over 30+ components (ColorPicker, DatePicker, and more...)
🔸Works in React, Solid, and Vue
🔸Bring your own styling solution
解説
基本、ark-uiの紹介
感想
hr.icon
14+ months in development, 1000+ commits, constant refactoring, and obsession over component API.
The future of building components with State machines is exciting, and I'm here for it. The key proposition remains: "Avoid re-inventing the wheel," model once, and use everywhere.
解説
取り組み
14ヶ月以上の開発期間
1000回以上のコミット
絶え間ないリファクタリング
感想
結果的に、他の事に集中出来る
hr.icon
Huge props to @grizzly_codes and our collaborators for working with me to relentlessly refine Zag.js and Ark.
This library makes the future of Chakra UI even more exciting. We're excited to commence the next major version of Chakra UI with Ark as the stable, headless foundation.
解説
このライブラリ(Ark UI)は、Chakra UIの将来をさらに魅力的にしており、Ark UIを安定したヘッドレスの基盤として、Chakra UIの次のメジャーバージョンの開発を開始することにわくわくしている 感想
hr.icon
Some backstory to the key decisions we made in Ark
A few months after launching
@zag_js
, the most common request was a headless UI component system that wraps the state machines.
We've significantly refined Zag and
@ark_ui_
to make them production-ready.
Let's take a deep dive into the avatar machine and component...🧵
https://gyazo.com/836174666e5b3c71fadf6f8d9ef5f2be
解説
Ark UIにおけるプロジェクトの鍵となる決断に関連するツイートの参照 以下そのツイートの話
画像による具体例(画像をGPTが分析したもの)
この画像は、状態マシンを使って設計された「アバター」コンポーネントのモデルを示している
ユーザーインターフェースにおいて、アバター画像の読み込みやエラー処理を管理するための状態遷移が図示
アバターの状態は、3つの主要な状態がある。
「loading」
「loaded」
「error」
それぞれの状態は以下のような挙動を持っている
loading: 画像の読み込みが進行中
「checkLoadingStatus」というアクションが実行され、画像が正しく読み込まれているかどうかをチェック
loaded: 画像の読み込みが完了
「invokeOnLoad」というアクションが、読み込みが成功した後に何かを行うために呼び出される
error: 画像の読み込み中にエラーが発生
「invokeOnError」というアクションがエラー時に呼び出される
状態間の遷移にはトリガーとなるイベントがあり、現在の状態から次の状態へと移行
「IMG.UNMOUNT」、「SRC.CHANGE」、「IMG.LOADED」、「IMG.ERROR」など
感想
画像部分は、後のツイートスレッドに解説あると思うので、ふんわり理解。
hr.icon
The state machine manages the loading state of the image and shows a fallback when needed.
It assumes the image can be a native image element or framework-flavored versions like Next.js or Gatsby image.
@statelyai
studio made the modeling so much easier
解説
↑のAvatar UIの解説
画像がHTMLのネイティブな<img>要素であるか、Next.jsやGatsbyのようなフレームワークを使用したバージョンの画像であるかを想定している
感想
It assumes the image can be a native image element or framework-flavored versions like Next.js or Gatsby image.
これあまり良くわからないので、GPTに解説してもらった。
状態マシンが様々なタイプの画像要素に対応しているということを説明しています。
「ネイティブな画像要素」とは、ウェブページに直接挿入される普通のHTML <img> タグのことを指します。これはウェブの標準的な方法で、画像のURLをsrc属性に指定してブラウザに表示させるものです。
一方で、「Next.jsやGatsbyのようなフレームワークを使用したバージョンの画像」というのは、これらのモダンなフロントエンド開発フレームワークによって最適化された画像要素のことを指しています。例えば、Next.jsには<Image>コンポーネントがあり、Gatsbyにも独自の画像処理システムがあります。これらは、画像をより効率的に読み込んだり、最適なサイズに自動的に調整したり、遅延読み込み（lazy loading）のような高度な機能を提供しています。
以前お見せしたアバターUIの状態マシン図に戻ると、その図は画像が読み込まれているか、エラーが発生したか、それともまだ読み込み中かといった状態を管理していることを示していました。そして、この文章によると、その状態マシンは、HTMLの標準的な<img>タグだけでなく、Next.jsやGatsbyのようなフレームワークで拡張された画像要素にも対応しているということです。
ここが重要。
複雑な状態説明時使えるかもね。
文章書くより良さそう。
hr.icon
We kickstart a new component by looking at the anatomy of the component.
This helps to ensure we're speaking the same language when describing component parts. It makes styling much easier, as well.
https://gyazo.com/fe13a36d3f44d2f467a9c70414ad3e62
解説
テキスト
新しいUIコンポーネントを作るに、そのコンポーネントの「構造」を理解することからスタートする。
このアプローチによって、
チームメンバー間でコンポーネントの各部分についての認識を統一し、コミュニケーションを明確にすることができます。
このような明確な構造を持つことは、スタイリングを行う上でも非常に役立ちます。
画像
「root」というラベルのついた円
コンポーネントの最上位または基礎部分
おそらく、コンポーネントの主要なコンテナや基盤となる部分を意味
「image」とラベル付けられた部分
アバターとして表示される画像自体
「PA」という部分は、おそらく「Placeholder Avatar」の略か何か
画像が利用できないときに表示されるフォールバック
感想
hr.icon
Next, write a rough JSX spec to get a feel for how consumers will import and use the component in the code. We use the dot notation in components to keep the code concise.
> We also export the full components (AvatarRoot, AvatarFallback, etc)
https://gyazo.com/a7590998575937c19ff1a7599db2a3db
解説
アバターコンポーネントをどのようにインポートし、コード内で使用するかについてのJSXの仕様を示している。
コンポーネントにドット表記（例：<Avatar.Root>）を使用することで、コードを簡潔に保つ方法を採用
画像に示されている2つのコンポーネント例：
code: Basic Component Usage.jsx
export const Basic = () => (
<Avatar.Root>
<Avatar.Fallback />
</Avatar.Root>
)
基本的なアバターコンポーネントの使用方法を示している。
<Avatar.Root>で始まり、フォールバック（代替の画像）として<Avatar.Fallback>が配置され、実際の画像が<Avatar.Image>に指定されています。
code: Component with Event Handling.jsx
export const Events = () => (
<Avatar.Root onLoadingStatusChange={(details) => console.log(details.status)}>
<Avatar.Fallback />
</Avatar.Root>
)
ローディングの状態変更をハンドルするイベントリスナーが<Avatar.Root>に追加されている。
画像の読み込み状態が変わるとコンソールにそのステータスがログ出力されます。
開発者はこれらのコンポーネントを自由に組み合わせて、必要なUIを構築できる
感想
先程と同じ疑問であるが、提案されている構造とズレた場合どうする？
UIのプロが、このライブラリを作っているわけで、むしろズレている場合、デザインや設計を疑うべきなのか？
hr.icon
Next, we test the different scenarios for this component using the state machine.
- when the image src or src set changes
- when there was an error loading the image
- when the image element is mounted or unmounted.
- when the image is SSR'd and preloaded
解説
UIの概念整理、実装ときたので、テストケースの整理を行って、テストしている話。
具体的には以下のケースが考えられます：
画像のsrcまたはsrcSetが変更されたとき：
状態マシンはsrcの変更を検知して、新しい画像を読み込むための遷移を起こす必要がある
画像の読み込み中にエラーが発生したとき：
状態マシンはエラー状態に移行し、エラーハンドリングのロジックがトリガーされるべき
画像要素がマウントまたはアンマウントされたとき：
コンポーネントがDOMに挿入（マウント）されたときや、DOMから削除（アンマウント）されたときの状態管理が重要
リソースのクリーンアップや、必要な場合に初期化処理を行うために必要
画像がサーバーサイドレンダリング（SSR）され、プリロードされたとき：
サーバーサイドレンダリングを使用する場合、画像が事前にロードされ、クライアント側でのページロード時にすぐに表示されるようにすることが目標
状態マシンは、このプリロードされた状態を適切に処理できるように設計される必要がある
これらのシナリオをテストすることで、コンポーネントが実際のアプリケーションで直面するさまざまなケースに対応できるようになります。
ツイートの添付動画がわかりやすいので見るのおすすめ。
感想
確かに、マウント時やSSRプリロード時など、App Routerでより状態が複雑になっているので、状態が明快であることは、人間としては認知しやすくて助かる。 hr.icon
Modeling with state machines is a time saver and reduces complexity by a loooot. Glad we moved in this direction 👌🏼💯
解説
この方向に進んで良かったと感じています。👌🏼💯
ドキュメントを整えているところですが、こちらで先に探索することができます:
感想
hr.icon
全体感