漸進的な変更を支えるフロントエンド設計

by jaxx2104

Slide 1

Slide 1 text

漸進的な変更を支えるフロントエンド設計漸進的な変更を支えるフロントエンド設計 Ginza.js #3 / Futoshi Iwashita

Slide 2

Slide 2 text

自己紹介自己紹介岩下太 (@jaxx2104) 株式会社リクルート Front-end engineer

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

飲食業務支援アプリレストランボード飲食業務支援アプリレストランボード

Slide 5

Slide 5 text

組織診断ツール Geppo 組織診断ツール Geppo

Slide 6

Slide 6 text

様々なプロダクトに関わってきて様々なプロダクトに関わってきて

Slide 7

Slide 7 text

自分が感じるフロントエンドの変化自分が感じるフロントエンドの変化一度構築したWEBアプリケーションのフロントエンドアーキテクチャを運用する仕事が増えた。 UIだけでなくデザインモック・テストなど複数環境がより高く求められるようになってきた。限られたリソース（人、時間、お金）のなかでエンハンスしながらどのようにアプリケーション更新するのかが課題。

Slide 8

Slide 8 text

みなさんはどうでしょうかみなさんはどうでしょうか

Slide 9

Slide 9 text

話すこと話すこと変化を予測・制御することについて漸進的な変更を支える設計について自分がやってみていること

Slide 10

Slide 10 text

変化を予測・制御するのって難しい変化を予測・制御するのって難しいビジネス要件から予期しないスケールの仕方をする新たな機能ドメインが必要になる開発体制が1年で10倍くらいに増える時として設計を見誤ることもある

Slide 11

Slide 11 text

どうやって向き合っていくかどうやって向き合っていくか

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Coupling between classes (the points on the perimeter) in a Big Ball of Mud from an unnamed client project. https://www.thoughtworks.com/insights/blog/microservices- evolutionary-architecture

Slide 14

Slide 14 text

良さそうな内容をいくつか良さそうな内容をいくつか変化が目的通りなのか指標を設ける再利用と疎結合を見極める依存管理コストを解消する

Slide 15

Slide 15 text

自分がやってみていること自分がやってみていること Vueで構築されたWEBアプリケーションの場合

Slide 16

Slide 16 text

変化が目的通りなのか指標を設ける変化が目的通りなのか指標を設ける vue-cli の packages 単位での移行 @vue/babel-preset-app がオススメ可能なら vue-cli 導入 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue

Slide 17

Slide 17 text

指標があることのメリット指標があることのメリット拡張している差分がわかりやすい可逆的な判断/対応もしやすい

Slide 18

Slide 18 text

再利用と疎結合を見極める再利用と疎結合を見極める自分で環境を作る場合に必要粒度感は先程のような packages を参考にモジュール化することが多い疎結合のために重複を許容することも必要

Slide 19

Slide 19 text

こんな感じこんな感じ package.json

Slide 20

Slide 20 text

依存管理コストを解消する依存管理コストを解消する依存モジュール更新を自動化する renovate や Greenkeeper を使う疎結合による重複のコストを減らす

Slide 21

Slide 21 text

更新頻度に対する考え方更新頻度に対する考え方開発者のコードがライブラリを呼び出すライブラリは必要になったら更新フレームワークは開発者のコードを呼び出すフレームワークは積極的に依存を更新 https://martinfowler.com/bliki/InversionOfControl.html

Slide 22

Slide 22 text

renovate の場合 renovate の場合 renovate.json

Slide 23

Slide 23 text

まとめまとめ指標を設けることで拡張した差分がわかりやすい再利用と疎結合を見極め、時には重複を許容するフレームワークは自動化で積極的に依存解消する

Slide 24

Slide 24 text

ここでは紹介しませんでしたが以下のトピックも面白いので読んでない人はおすすめです。テスト、CI、機能トグル落とし穴やアンチパターン組織構造とアーキテクチャ

Slide 25

Slide 25 text

ありがとうございましたありがとうございました