Atomic Designの話

Atomic Design

詳しくはこちら

Atoms, Molecules, Organismsを組み合わせて1つのページを作る

Atomic Design

Pageが配下のコンポーネントにデータをバケツリレーで渡していく

データソースを一応気持ち程度にStoreとかで管理する場合と、

Pageの中にべた書きするパターンがある

Atomic Design

モバイルの場合はページのコンテンツがそこまで多くないので割となんとか行けるみたい

でもデスクトップUIだと上手く行かない場合が多い

UIのボリュームが多いとデータソース部分がウルトラFat化するし、

データの伝搬機構もスパゲティが可愛く見える

そもそもAtomic Designは一貫性のある堅牢なデザインシステムの作成と維持の為にあるようです。

なので、デザイナー側にAtomic Designを採用して頂けない限り、本当のAtomic Designをすることはできない。

フロントエンド側だけでAtoms, Molecules, Organismsの粒度をコンポーネントに勝手に持ち込んでも、それは本来意図されている

Atomic Designではないのを認識する必要がある。

なのでそれをAtomic Designと呼ぶのは混乱の元になりそう。

Atomic Design

おすすめがあります

Atomic Component

Atomic DesignインスパイアのAtomic Componentという設計がオススメ。

これは、デザイナーが上げたAtomic Designの実装もできるし、フロントエンドだけでもできる良い感じのやつ。

一応軽いVue.jsでのサンプルも作成しています。

https://github.com/k-okina/book-management

このサンプルではContainerの粒度の部分とやり取りはAtomic Componentが意図したい通りにできてるんじゃないかと思っています

サンプル図を埋め込む