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
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
380
Findyの開発生産性を上げるためにやったこと
puku0x
1
470
Angularコーディングスタイルガイドはいいぞ
puku0x
1
180
Nx CloudでCIを爆速にした話
puku0x
0
590
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
730
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.1k
Nxはいいぞ
puku0x
0
670
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
290
Other Decks in Technology
See All in Technology
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
エンジニア向け会社紹介資料
caddi_eng
14
220k
地理情報とAPIのトレンド
nagix
0
160
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
Featured
See All Featured
Navigating Team Friction
lara
181
13k
How to Ace a Technical Interview
jacobian
274
23k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
What the flash - Photography Introduction
edds
65
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
What's in a price? How to price your products and services
michaelherold
239
11k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
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