Component Driven Development with Atomic Components

# 自己紹介

- 西田雅博
- 株式会社ビズリーチ
- HRMOS採用管理というサービスでフロントエンドをメインにやってます

![7473222.png](https://qiita-image-store.s3.amazonaws.com/0/59312/b12c8d13-db02-7596-4d96-2457a0d3ab9f.png)

---

(Component Driven Development with AngularというタイトルでしたがAngularがほぼ関係ないので変更しました :bow: )

---
# Component駆動開発はじめました

----
# きっかけ

- AngularJS 1.4で構築されたSPA
    - フロント、バックエンド（だいたい）10万行〜
- 2〜3年経ってメンテナンスがなかなかつらい
- Angular4への移行を始めている
    - Upgradeは諸事情によりあきらめ、新規リプレイス
- 新規で始めるならなんかやりたい
    - 数年後開発スピードがなるべく落ちないように

すいませんほぼAngularの話無いです :cry: 

---
# 新しい取り組み

- コンポーネントとアプリを分離
- コンポーネントリストアプリ
- Atomic Components
- 今日は話さないけど
    - RxJSでの軽量Fluxとか

---
# コンポーネントとアプリの分離

---
# 動機

- UIの一貫性を保ちたい
- デザイナーの関心はコンポーネントに、エンジニアの関心はアプリに
- コンポーネントを表示するアプリを作っていつでも見れるようにしたい

---
# とはいえ

コンポーネントってどういう粒度で作っていけばいいんだろう :thinking: 

---

![1-bWNY_myzZggvGROHWqS6nw.png](https://qiita-image-store.s3.amazonaws.com/0/59312/3a657362-4bd5-c3df-c9d2-c14213b7a67d.png)

----
# Atomic Components

- Atomic Designがベース
- 5段階のコンポーネントに分類する
- SPA向けにアレンジされていて、Templates, Pagesが置き換えられている
    - Templates, Pages以外でAtomic Designを導入してますという記事をよく見る
- [Joey Di NardoさんのMediumの記事](https://medium.com/joeydinardo/a-brief-look-at-atomic-components-39cbe71d38b5)
    - これ以外見たことない、多分誰もやってない :innocent: 

---
# Atomic Components

- Atoms
- Molecules
- Organisms
- Ecosystems
- Environments

---
# Atoms〜Organisms (雑 :innocent:  )

- Atoms
    - button, input, p
- Molecules
    - search-form, like-button
- Organisms
    - tweet-item, user-profile

実装的にはここまではだいたいStatelessで、再利用性が高い

---
# Ecosystems

- アプリケーションのドメインひとくくりを表現する
    - timeline, trend, recommend-user

実装的にはContainer/Smart Componentにあたる

- 状態をハンドリングする
- 子のOrganisms/Moleculesなどにデータを渡しイベントを受け取ってハンドリング

---
# Environments

- ページに相当する
- 完全なSPAではEnvironmentsはひとつ
- `/home` `/setting` みたいなパスでSPA分けてたらそれぞれがEnvironments
- Angular的には遅延ロードしたFeatureModuleが当てはまりそう

---
# 色分けして分類する

 ![1-O6p73GH1ZWh1G7f2DRUdDA.png](https://qiita-image-store.s3.amazonaws.com/0/59312/f975bc7e-720e-a832-a8b7-5a4caf36067c.png)

---
# コンポーネントリスト

- GitHubにPushすればそのブランチのビルドが見れるようになっている
- `http://foo.bar.jp/docs/{branch}/`
- とりあえず仕組みも含めてかっこいい、テンションが上がる
- masterも見れるので差分確認したりとか（期待）
- SPAでありがちなUI上のバグはここでたくさん拾いたい（期待）
- レビューが便利になる（期待）

---
# compodoc

- https://compodoc.github.io/website/
- Angular専用ドキュメント生成ツール
- これ用になにかする必要はない、ノーコスト
- これもホストして見れるようにしている
- JSDoc書けばドキュメントに反映されたりするので今後活用するかも
    - コンポーネントリストと役割が若干かぶる？

---
# デモ


---
# やってみた感想

- まだ全然初期段階、20%もいかないくらいですが

---
# アプリとの分離　Pros :joy: 

- 今回リプレイスなので特にやりやすい
    - すでに動いているデザインをAtomic Componentsに分類していくだけ
- UIのロジック・状態と、サーバーサイドにつなぐところ・アプリケーションの状態管理が強制的に分離される
    - コンポーネントの役割が明確になりテストが書きやすい気がする
- Angularに慣れる意味でも、サンドボックス上で作れるのはやりやすい

---
# アプリとの分離　Cons :innocent: 

- 時間はかかる気がする
    - しっかり作り込むことが強制されてるだけかも
- アプリと別れていて両方いじるようなケースは多少面倒
    - `npm link` でいけるっぽい
- npmライブラリを運用するノウハウがなく手間
    - ビルドせずに `src/index.ts` みたいなのをpackage.jsonのmainに指定している
    - lernaでmonorepoにするのが良い…？

---
# コンポーネントリスト

- サンドボックスがあるのはいいこと
    - アプリだと面倒な手順踏まないと見れないコンポーネントとかよくある
    - アプリはまだないけどSafari、IEで起きる問題にすでに対応している
- 今後はデザイナーさんに活用してもらえたらよさそう

---
# Atomic Components

- いまのところ問題はない、良い
- SPA用Atomic Designとしてフィットしていると思う
- Ecosystem = Containerというのはわかりやすくて良い
- まだOrganisms以下の分類にいまいち自信がない
    - あまり厳密にやらなくてもいい気がしている

---
# まとめ

- AngularJS 1.xからAngular4へのリプレイスでコンポーネント駆動開発を始めた
    - コンポーネントとアプリの分離
    - コンポーネントリスト
    - Atomic Components
- まだどう転ぶかわからない
    - 変化していける設計・アーキテクチャにしたい

---
#　おまけ（？）

- 大したものじゃないがオレオレ軽量RxJS Fluxの話もしたい
- Angularアプリケーションの状態管理どうしてるのか聞きたい
    - ngrxは実際いいのか！？

---

# おわり