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
190
Managing Monorepos with Nx - Nrwl/Nxの近況 -
puku0x
February 19, 2020
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
340
Findyの開発生産性を上げるためにやったこと
puku0x
1
430
Angularコーディングスタイルガイドはいいぞ
puku0x
1
140
Nx CloudでCIを爆速にした話
puku0x
0
510
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.5k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
700
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.8k
Nxはいいぞ
puku0x
0
640
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
250
Other Decks in Technology
See All in Technology
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
現代CSSフレームワークの内部実装とその仕組み
poteboy
6
1.9k
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
550
Discord とビルダー&チャットボットの使い方 / How to use Discord and Builder & Chatbots
ks91
PRO
0
130
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
14
35k
ChatGPT for IT Service Management (IT Pro)
dahatake
4
270
アプリがつくるNOT A HOTELブランド
hokuts
1
450
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
3.7k
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
140
ユーザーストーリーのレビューを自動化したみたの
bun913
1
330
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
630
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
4 Signs Your Business is Dying
shpigford
175
21k
The Cult of Friendly URLs
andyhume
74
5.7k
In The Pink: A Labor of Love
frogandcode
138
21k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
It's Worth the Effort
3n
180
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Atom: Resistance is Futile
akmur
258
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Raft: Consensus for Rubyists
vanstee
132
6.2k
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