Nxはファーストプロダクトから使ってほしい

イベント名：Startup Angular #9 バレンタインLT会
イベントURL：https://voicy.connpass.com/event/342447

Transcript

1. Nxはファーストプロダクトから使ってほしい 株式会社Hubble 齋藤 航平 バ レ ン タ イ ン L T 会 00
2. 自 己 紹 介 01 @KOHETs 株式会社 Hubble - Frontend Engineer 齋藤 航平 AngularJSの頃から10年近くAngularばかりやってます
3. 会 社 紹 介 02
4. 皆さんはNx使ってますか？ は 何 が 出 来 る ？ 03
5. Nxでできること は 何 が 出 来 る ？ 04 開発速度の最適化 🚀 ❖ 影響範囲分析による無駄な処理の削 減 ❖ 並列実行とキャッシュによる CI/CDの 高速化 ❖ 大規模プロジェクトでもスムーズな動 作 コード品質の維持 🛠 ❖ カスタムルールやジェネレーターによ る統一感の確保 ❖ モノレポ環境での一貫した開発フ ローの実現 ❖ リンターやフォーマッターの組み込み による品質管理 開発環境の最新化 🔄 ❖ StorybookやPlaywrightなどの簡単 な導入 ❖ 依存関係の自動更新によるメンテナ ンスの軽減 ❖ プラグイン活用による開発環境の最 適化
6. Nxでできること は 何 が 出 来 る ？ 04 開発速度の最適化 🚀 ❖ 影響範囲分析による無駄な処理の 削減 ❖ 並列実行とキャッシュによるCI/CD の高速化 ❖ 大規模プロジェクトでもスムーズな動 作 コード品質の維持 🛠 ❖ カスタムルールやジェネレーターによ る統一感の確保 ❖ モノレポ環境での一貫した開発フ ローの実現 ❖ リンターやフォーマッターの組み込み による品質管理 開発環境の最新化 🔄 ❖ StorybookやPlaywrightなどの簡単 な導入 ❖ 依存関係の自動更新によるメンテナ ンスの軽減 ❖ プラグイン活用による開発環境の最 適化
7. の 影 響 範 囲 分 析 が 凄 い 05 App Lib 1 Lib 2 Lib 1.1 Lib 1.2 Lib 2.2 Lib 2.1 Lib 1.1.1 Lib Shared
8. の 影 響 範 囲 分 析 が 凄 い 05 App Lib 1 Lib 2 Lib 1.1 Lib 1.2 Lib 2.2 Lib 2.1 Lib 1.1.1 Lib Shared
9. の 影 響 範 囲 分 析 が 凄 い 05 App Lib 1 Lib 2 Lib 1.1 Lib 1.2 Lib 2.2 Lib 2.1 Lib 1.1.1 Lib Shared
10. の 影 響 範 囲 分 析 が 凄 い 05 App Lib 1 Lib 2 Lib 1.1 Lib 1.2 Lib 2.2 Lib 2.1 Lib 1.1.1 Lib Shared
11. の 影 響 範 囲 分 析 が 凄 い 05 App Lib 1 Lib 2 Lib 1.1 Lib 1.2 Lib 2.2 Lib 2.1 Lib 1.1.1 Lib Shared
12. Test の 並 列 実 行 と キ ャ ッ シ ン グ も 凄 い 06 CIで直列実行する場合は時間がかかる Lint Build
13. Test の 並 列 実 行 と キ ャ ッ シ ン グ も 凄 い 06 並列実行で時間短縮 Lint Build
14. Test Idle Time の 並 列 実 行 と キ ャ ッ シ ン グ も 凄 い 06 並列化しても待ち時間は避けられない Lint Idle Time Build
15. の 並 列 実 行 と キ ャ ッ シ ン グ も 凄 い 06 Nxを利用してライブラリに分割
16. の 並 列 実 行 と キ ャ ッ シ ン グ も 凄 い 06 Nx Cloudで分散・並列実行される
17. の 並 列 実 行 と キ ャ ッ シ ン グ も 凄 い 06 影響範囲分析で必要なものだけ実行される
18. の 並 列 実 行 と キ ャ ッ シ ン グ も 凄 い 06 すでに実行されてたことがある場合はキャッシュを利用
19. Nxはファーストプロダクトから使ってほしい 今 日 の 本 題 07 なぜなら… Angularのルーティング と相性が良いから！
20. の デ ィ レ ク ト リ と ル I テ ィ ン グ 08 # directory structure first-app └─ src └─ app ├─ core ├─ heroes │ └─ heroes.routes.ts ├─ shared ├─ villains │ └─ villains.routes.ts ├─ app.component.ts └─ app.routes.ts // app.routes.ts const routes: Route[] = [ { path: 'heroes', loadChildren: () => import('./heroes/heroes.routes ') .then(m => m.heroesRoutes) }, { path: 'villains', loadChildren: () => import('./villains/villains.routes ') .then(m => m.villainsRoutes ) }, { ... } ];
21. こ う 変 わ る だ け 09 # directory structure org ├─ apps/first-app │ └─ src/app │ ├─ app.component.ts │ └─ app.routes.ts └─ libs/first-app ├─ core │ └─ src/lib ├─ heroes │ └─ src/lib │ └─ heroes.routes.ts ├─ shared │ └─ src/lib └─ villains └─ src/lib └─ villains.routes.ts ※ ディレクトリ構造は自由に設定可能 // app.routes.ts const routes: Route[] = [ { path: 'heroes', loadChildren: () => import('@org/first-app/heroes/heroes.routes ') .then(m => m.heroesRoutes) }, { path: 'villains', loadChildren: () => import('@org/first-app/villains/villains.routes ') .then(m => m.villainsRoutes ) }, { ... } ];
22. H U B B L E の 現 在 10 202 Libraries 10 Applications 35m 33s Recent execution time includes all tasks 4h 55m 47s Total execution time of all machines of above
23. 成 長 と と も に 感 じ る 恩 恵 11 開発速度の最適化 🚀 ❖ 影響範囲分析による無駄な処理の 削減 ❖ 並列実行とキャッシュによるCI/CD の高速化 ❖ 大規模プロジェクトでもスムーズな動 作 コード品質の維持 🛠 ❖ カスタムルールやジェネレーターによ る統一感の確保 ❖ モノレポ環境での一貫した開発フ ローの実現 ❖ リンターやフォーマッターの組み込み による品質管理 開発環境の最新化 🔄 ❖ StorybookやPlaywrightなどの簡単 な導入 ❖ 依存関係の自動更新によるメンテナ ンスの軽減 ❖ プラグイン活用による開発環境の最 適化
24. 成 長 と と も に 感 じ る 恩 恵 11 開発速度の最適化 🚀 ❖ 影響範囲分析による無駄な処理の削 減 ❖ 並列実行とキャッシュによる CI/CDの 高速化 ❖ 大規模プロジェクトでもスムーズな 動作 コード品質の維持 🛠 ❖ カスタムルールやジェネレーターに よる統一感の確保 ❖ モノレポ環境での一貫した開発フ ローの実現 ❖ リンターやフォーマッターの組み込み による品質管理 開発環境の最新化 🔄 ❖ StorybookやPlaywrightなどの簡単 な導入 ❖ 依存関係の自動更新によるメンテナ ンスの軽減 ❖ プラグイン活用による開発環境の最 適化
25. お わ り END ご清聴ありがとうございました