Glycyrrhy Design

Atomic Designを,ユーティリティーファーストクラスやコンポーネントライブラリを用いたプロジェクトにおいて厳密に適用することは難しい.

実情に即したコンポーネント分類・分割を考案し,開発・保守体験の向上を図る必要がある.

Glycyrrhyは,コンポーネントをArith・Cell・Group・Layout・Worldの5つのレイヤーに分けるデザインパターンである.

Arithは,フロントエンド側で行う演算処理を分離するレイヤー.

Arithmetics(算術)に由来する.

DOM要素などの具体物を直接持たない,純粋な関数の集合であることが望ましい.

このレイヤーを設けることで,他のレイヤーに記述するロジックが単純なイテレーション・分岐・関数呼び出しに限定される.

Cellは,具体要素の基本単位となるコンポーネントをまとめるレイヤー.

原則,他のコンポーネントとの位置関係の情報など(レイアウト)を持たない.

基本単位にレイアウトが既に含まれているフレームワークやライブラリを用いる場合,その基本単位のラッパーとして用いる.

HTMLタグ1~2つ相当を分割の目安とする.

唯一このレイヤーがドメイン知識を持たないため,他のプロジェクトで再利用できるような汎用的な設計・命名をする.

レイアウトをあとから注入できるように作られる.

Groupは,DRY原則のためのレイヤー.

繰り返し用いられるいくつかのCellおよびGroupの一連の組み合わせを記述する.

Cell同様,レイアウトをあとから注入できるように作られる.

Layoutは,レイアウト付けのためのレイヤー.

CellやGroupについて間隔などの配置をここに分離しておくことで,個々の見た目に依存しない表示調節が可能になる.

基本単位にレイアウトが既に含まれているフレームワークやライブラリを用いる場合,ユーティリティークラスによる調節を担う.

依存関係を明白にするためにWorldからは直接CellやGroupを参照せず,修正が必要ない場合でもLayoutにラップしておく.

汎用的な命名のCellにセマンティックな別名をつける役割も果たす.

Worldは,ページとして機能する組み立てられたコンポーネントのレイヤー.

他の役割として,外部との情報のやり取りや,頻繁に変更される定数など,"世界"に関わる記述を行ってよいが,具体的な処理はArithから呼び出すのが望ましい.

開発中は,CellやGroupをやむなく参照していいが,最終的にはLayoutとArithにのみ依存したい.