Help us understand the problem. What is going on with this article?

Component Driven Development with Atomic Components

More than 1 year has passed since last update.

Component Driven Development with Atomic Components

by maaz118
1 / 27

自己紹介

  • 西田雅博
  • 株式会社ビズリーチ
  • 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は実際いいのか!?

おわり

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away