Atomic Design と Atomic Components
2017/06/16
ng-sweets
SPAアプリのパフォーマンス改善入門 with Angular
自己紹介
- 西田雅博
- HRMOS事業部
- フロントエンドとバックエンド両方やってます
- AngularJS 1.x, Angular 4, Play Framework (Scala)
お話の前提
-
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
-
Atomic DesignをSPA向けにアレンジしたもの
-
MediumでJoey Di Nardoさんが記事を公開している
-
Templates, Pagesを新たな解釈に置き換えている
-
Organisms以下もSPA向きの解釈がされている
-
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の事例が全く無い😇
- 今後経過を発表するかも😇