Atoms, Molecules, Organismsを組み合わせて1つのページを作る
Pageが配下のコンポーネントにデータをバケツリレーで渡していく
データソースを一応気持ち程度にStoreとかで管理する場合と、
Pageの中にべた書きするパターンがある
モバイルの場合はページのコンテンツがそこまで多くないので割となんとか行けるみたい
でもデスクトップUIだと上手く行かない場合が多い
UIのボリュームが多いとデータソース部分がウルトラFat化するし、
データの伝搬機構もスパゲティが可愛く見える
そもそもAtomic Designは一貫性のある堅牢なデザインシステムの作成と維持の為にあるようです。
なので、デザイナー側にAtomic Designを採用して頂けない限り、本当のAtomic Designをすることはできない。
フロントエンド側だけでAtoms, Molecules, Organismsの粒度をコンポーネントに勝手に持ち込んでも、それは本来意図されている
Atomic Designではないのを認識する必要がある。
なのでそれをAtomic Designと呼ぶのは混乱の元になりそう。
Atomic DesignインスパイアのAtomic Componentという設計がオススメ。
これは、デザイナーが上げたAtomic Designの実装もできるし、フロントエンドだけでもできる良い感じのやつ。
一応軽いVue.jsでのサンプルも作成しています。
https://github.com/k-okina/book-management
このサンプルではContainerの粒度の部分とやり取りはAtomic Componentが意図したい通りにできてるんじゃないかと思っています