Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Clean Architecture with Vue

Clean Architecture with Vue

Attempting Clean Architecture with Vue.js and Vuex.

Event Link: https://kfug.connpass.com/event/90962/
GitHub Link: https://github.com/andoshin11/clean-architecture-example-vue

andoshin11

June 30, 2018
Tweet

More Decks by andoshin11

Other Decks in Technology

Transcript

  1. Who am I ? • Andy (@andoshin11) • Vue.js Japan

    User Group • Frontend Developer @FOLIO • JS, Ruby, Go, Perl, Python, PHP, Rust(?)
  2. MVC(割愛) ・Model - View - Controller ・Railsが採用しているやつ ・ViewがModelをObserve ・Fat Model,

    Fat Controller問題 ・「データの振舞い」を定義する余地がない
  3. 今回の設計方針 ・より厳密なレイヤー分割を行う ・業務上の関心と技術上の関心を分離 → Domain Modelの活用(DDD Like) ・シンプルなイベント伝達 → 単方向データフロー(Flux

    Like) ・依存性も単方向にしてよりテスタブルに → Clean Architecture ・フレームワークや外部のI/Fに依存しない → Gatewayの活用
  4. Container • UIの表示単位 • Atomic DesignでいうPages? • ContainerごとにUse Caseと Presenterを持つ

    • Containerを1つのドメインとみなした DucksなStore実装も可能
  5. Testing • UIコンポーネント - Presenterの写像なので再現が簡単 • Repositories - Data Store

    LayerへのRead & Write APIをテスト • Use Cases - Given ConditionとしてRepositoryとServiceのモックをDIするだけ • Entities- Use Casesと同様