Vue Fes Japan 2019
採択
フルセッション(40分)

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

keinuma15 ぬまた keinuma15
2

概要
私はこれまで教わったデザインフレームワークやプラクティスをそのまま現場に適応しようすることが多かったです。
これはフロントエンド開発に限らずアジャイル開発やインフラ設計など普遍的な問題でした。
今回は私がVue.js & Atomic Designをフレーム通りにそのまま導入、実践をしてどう失敗したのかとそこから得られた学びを発表します。
さらにAtomic Designを発展させて、プロダクトやチーム・Vue.jsに適応させた例を共有していきます。

TL;DR

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