Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ありがとうございました ありがとうございました