Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic Design周りについての私見

ponday
November 29, 2018

Atomic Design周りについての私見

ITのむずかしいを簡単にする会 - LT会 #5(2018/11/29)の発表資料です。

ponday

November 29, 2018
Tweet

More Decks by ponday

Other Decks in Programming

Transcript

  1. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like

    : TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア - 副業もやってます
  2. Atomic Design がもたらしたもの - コンポーネント指向ベースのデザインシステム - ページ → 部品ではなく部品 →

    ページな考え方 - エンジニアとデザイナの共通言語 - ページを構成するコンポーネント階層の体系付け - 階層ごとの命名
  3. コンポーネント間の依存関係 Atoms Molecules Organisms Templates 依存するもの なし Atoms Atoms Molecules

    Organisms Organisms 依存の数 0 2つ以上 1つ以上 1つ以上 ここは無理に 制限しない
  4. Organisms Molecules Atoms Templates props props props event event event

    『プロパティを渡して、イベントを受け取る』が原則
  5. Organisms Molecules Atoms Templates props props props event event event

    Store subscribe / dispatch (subscribe) /dispatch
  6. Organisms Molecules Atoms Templates props props props event event event

    Store subscribe / dispatch ここは汎用的に保ちたい → Storeにはアクセスしない (subscribe) /dispatch
  7. Organisms Molecules Atoms Templates props props props event event event

    Store (subscribe) /dispatch subscribe / dispatch アプリケーション固有のロジックは Templates、Organismsで処理 → Storeもアプリケーション固有
  8. 状態管理 Atoms Molecules Organisms Templates dispatch - - ◦ ◦

    subscribe - - △ ◦ ※このあたりはプロジェクトの特性による