Atomic Design と Atomic Components

2017/06/16

ng-sweets

SPAアプリのパフォーマンス改善入門 with Angular

自己紹介

  • 西田雅博
  • HRMOS事業部
  • フロントエンドとバックエンド両方やってます
    • AngularJS 1.x, Angular 4, Play Framework (Scala)

GitHub: adwd

Twitter: @adwd118

 

お話の前提

  • HRMOS採用管理というプロダクトを開発している

  • AngularJS 1.4で構築されたフロントエンドをAngular 4でリプレイスする作業を始めている

  • 同時に、アプリケーションからUIコンポーネントライブラリを分離する試み

  • UIコンポーネントライブラリでAtomic Designを試している

  • エンジニア視点での話

     

Atomic Design

コンポーネントを5種類に分ける

  • Atoms (原子)

  • Molucules (分子)

  • Organisms (有機体)

  • Templates (テンプレート)

  • Pages (ページ)

  • 日本語で解説してる記事がたくさんあるのでそちらを参照

メリット

  • コンポーネントの粒度に対して名前がつくので議論などがやりやすい

  • コンポーネント指向である最近のJavaScriptフレームワークと相性がいい

  • 再利用性が高くなりそう

SPAに適用したときの問題

  • Templates、Pagesがしっくりこない

    • Atomic Design はページという紙ベース概念を元にしているため

    • Organismsまでを導入しているというところが多い気がする

Atomic Components

Atoms (原子)

  • それ以上分割できない単位
    • テキスト、アイコン、HTMLタグとか

Molecules (分子)

  • 原子が2つ以上くっついたもの
  • UIとして意味を持つ
    • 検索フォーム、いいねボタン

Organisms (有機体)

  • より具体的なUIの単位
  • アプリケーションのドメインが入ってくる
  • UIで繰り返し表示されることが多い
    • ツイートアイテム、ユーザープロフィールカード
  • ステートレスなコンポーネントであることが多い
    • 状態を持つとしても、tooltipを表示する/しない、フォームに入力された文字列といったローカルなUIの状態

Ecosystems (生態系)

  • アプリケーションのドメインを表現するコンテナコンポーネント
    • タイムライン、オススメのユーザー
  • 内部にツイートやユーザーといった繰り返されるOrganismsを持っている
  • ReactでいうContainer/Smart Component
    • 状態を保持し、子コンポーネントにデータを渡し、子コンポーネントからイベントを受け取って状態を更新する
    • ecosystemsは横並び、もしくはネストされ、ecosystem間でデータや状態をやり取りする

Environments

  • Atomic Designでのpagesにあたるもの
  • 完全なSPAでは一つになるが、ページに分かれているような場合は複数のenvironmentを持つ
    • ホーム画面、プロフィール画面、設定画面

コンポーネントの色分け

  • まずは色分けしながら練習・議論するのが良さそう
    • 新規プロダクトのモック
    • 既存プロダクトのスクリーンショット
    • Twitterなどのスクリーンショット

まとめ

  • Atomic Design
  • Atomic Components
  • Atomic Componentsの事例が全く無い😇
    • 今後経過を発表するかも😇