JavaScript
angular
フロントエンド

Component Driven Development with Atomic Components

More than 1 year has passed since last update.

自己紹介

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

7473222.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


Atomic Components

  • Atomic Designがベース
  • 5段階のコンポーネントに分類する
  • SPA向けにアレンジされていて、Templates, Pagesが置き換えられている
    • Templates, Pages以外でAtomic Designを導入してますという記事をよく見る
  • Joey Di NardoさんのMediumの記事
    • これ以外見たことない、多分誰もやってない :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


コンポーネントリスト

  • 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は実際いいのか!?

おわり