アンチパターンから学ぶ Atomic Design with Vue.js

誰かに教わったデザインフレームワークやプラクティスをそのまま現場に適応しようとして、うまくいかなかった経験はないでしょうか。これはフロントエンド開発に限らずアジャイル開発やインフラ設計など普遍的な問題です。

本セッションでは、Vue.js と Atomic Design をフレーム通りにそのまま導入、実践をしてどう失敗したのかと、そこから得られた学びを発表します。さらに Atomic Design を発展させて、プロダクトやチーム、Vue.js に適応させた例を共有します。

TL;DR

• 思考を停止して Atomic Design を導入した結果の発表
  • ロジックの集中、コンポーネントの量産
• 導入するときは現場との差分（Vue.js、チーム、プロダクトの性質 etc..）を考えて追加する
• 視座をプロダクトのレベルまで高めて、設計判断をする
• 改めて Vue.js と Atomic Design ベースでコンポーネント開発を実践した時に考えたこと
  • ドメインを持たせたコンポーネントの組み合わせ
  • ロジックをリポジトリパターンで組み直す