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
ファインディにおけるフロントエンド技術選定の歴史
puku0x
1
110
ファインディでのGitHub Actions活用事例
puku0x
9
2.2k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
390
Findyの開発生産性を上げるためにやったこと
puku0x
1
510
Angularコーディングスタイルガイドはいいぞ
puku0x
1
210
Nx CloudでCIを爆速にした話
puku0x
0
660
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.3k
Other Decks in Technology
See All in Technology
I tried the newly introduced certification "Applied Skills" on Microsoft Learn
mappie_kochi
0
270
今こそ変化対応力を向上させるとき 〜ログラスが FAST に挑戦する理由〜 / Why Loglass is Talking on the Challenge of Agile Framework FAST
shioyang
0
170
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
7
1.6k
Binary Hacks Rebooted 私選ハック集
nullpo_head
1
310
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
130
UE5の雑多なテク
ryuichikawano
0
450
From LibreOffice to « La Suite » : providing civil servants with Free Software sovereign tools
bluehats
0
110
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
12
3.7k
テストを楽に書きたい
tomorrowkey
1
220
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
380
Road to Single Activity Uncovered
yurihondo
0
100
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
350
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Unsuck your backbone
ammeep
668
57k
Debugging Ruby Performance
tmm1
73
12k
We Have a Design System, Now What?
morganepeng
50
7.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Speed Design
sergeychernyshev
22
490
Building Adaptive Systems
keathley
38
2.2k
Web Components: a chance to create the future
zenorocha
310
42k
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