Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Managing Monorepos with Nx - Nrwl/Nxの近況 -
Search
puku0x
February 19, 2020
Technology
0
200
Managing Monorepos with Nx - Nrwl/Nxの近況 -
puku0x
February 19, 2020
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディでのGitHub Actions活用事例
puku0x
9
2k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
390
Findyの開発生産性を上げるためにやったこと
puku0x
1
500
Angularコーディングスタイルガイドはいいぞ
puku0x
1
200
Nx CloudでCIを爆速にした話
puku0x
0
640
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.2k
Nxはいいぞ
puku0x
0
690
Other Decks in Technology
See All in Technology
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
180
contenteditableと向き合う
kikuchikakeru
2
300
効果的なオンコール対応と障害対応
ryuichi1208
5
2.8k
SAVEPOINT α版
savepoint
0
660
Fediverse Discovery Providers overview
andypiper
0
160
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
170
より快適なエラーログ監視を目指して
leveragestech
4
1.4k
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
360
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
280
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7k
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
3
990
Functional TypeScript
naoya
11
4.7k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
GitHub's CSS Performance
jonrohan
1029
450k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
The Language of Interfaces
destraynor
153
23k
Designing with Data
zakiwarfel
98
5k
Infographics Made Easy
chrislema
239
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Transcript
Managing Monorepos with Nx - Nrwl/Nxの近況 - ng-japan OnAir #12
Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2
Monorepo? Nx? 3
Monorepo • A single repository containing multiple projects ◦ Monorepo
!== Monolith • Used by 4 ...
5 https://nx.dev/
Nx • Developed by Nrwl • Monorepo management tool ◦
Modern web development ◦ Effective change detection ◦ Automated migration 6 “Develop like Google, Facebook and Microsoft”
Version histories • v1.x〜(April, 2018) ◦ Extensions for Angular CLI
• v6.x ◦ Jest support • v7.x ◦ Cypress and Nest support • v8.x ◦ React, Next.js and Storybook support • v9.x ◦ Angular v9 support 7
$ npx create-nx-workspace : ? Workspace name (e.g., org name)
workspace ? What to create in the new workspace angular-nest ? Application name web ? Default stylesheet format SASS(.scss) Creating a workspace 8
Nx workspace • Similar to Angular workspace • Single version
policy ◦ package.json is a single source of truth 9
Scaffolding • Applications ◦ nx g @nrwl/angular:app • Libraries ◦
nx g @nrwl/angular:lib • Schematics ◦ nx g workspace-schematic 10
Testing • Jest ◦ nx test <project-name> • Cypress ◦
nx e2e <project-name-e2e> 11
$ npm i -D @nrwl/storybook $ npm i -D @storybook/angular
@storybook/addon-knobs $ nx g @nrwl/angular:storybook-configuration # Run storybook $ nx run project-name:storybook # E2E with Cypress $ nx e2e project-name-e2e Storybook 12
Linting/Formatting • ESLint/TSLint ◦ nx lint ◦ nx workspace-lint •
Prettier ◦ nx format:write ◦ '--uncommitted' option for lint-staged 13
enforce-module-boundaries • Dependency constraints https://nx.dev/web/guides/monorepo-tags 14
Dependency visualization • nx dep-graph • nx affected:dep-graph 15
Effective change detection • nx affected:lint • nx affected:test •
nx affected:build • nx affected:e2e 16
Distributed caching for faster CI 17 https://blog.nrwl.io/distributed-caching-in-nx-164edfbc68e0
Nx ecosystem • Nx Console ◦ VS Code extension •
Nx Plugin ◦ Custom builder • Nx Cloud ◦ Cloud distributed caching 18 https://nx.dev/nx-console
Nx v10 • https://github.com/nrwl/nx/issues/2152 ◦ Stability ◦ Smarter affected ◦
Distributed caching by default ◦ Mixing monorepo and polyrepo 19
Recap • Nx makes managing monorepos easy! ◦ Supports ◦
https://nx.dev/ • Try it now! 20 $ npx create-nx-workspace
Thank you! @puku0x Noriyuki Shinpuku