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
Enterprise Angular with Nx: Robust Architectures and Fast Builds @iJS London 2021
Search
Manfred Steyer
PRO
April 19, 2021
Programming
0
250
Enterprise Angular with Nx: Robust Architectures and Fast Builds @iJS London 2021
Manfred Steyer
PRO
April 19, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends with Web Standards
manfredsteyer
PRO
0
190
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
160
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
140
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
92
NGRX Signal Store
manfredsteyer
PRO
0
180
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
89
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
470
Angular Architectures with Signals
manfredsteyer
PRO
2
600
Other Decks in Programming
See All in Programming
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
0
610
GitHub Copilot Tips and Tricks
yuichielectric
2
220
CSC308B Lecture 12
javiergs
PRO
0
100
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
130
TDDと今まで
kanayannet
0
110
開発者体験を変えるInfrastructure as Codeの新機能6選!
konokenj
4
840
一休.comレストランのRustバックエンド開発の様子
kymmt90
13
7.9k
シェルの履歴とイクンリメンタル検索を使う
naoya
7
2.3k
RISC-V カスタムのためのツールチェーン拡張 ― GNU Binutils と GCC の拡張・コミュニティへの参加編 (未完成版)
a4lg
0
190
WasmOS: Wasmを実行する自作Microkernel
riru
0
360
人口ダッシュボード作成講座資料
jo76shin
0
170
Docker ハンズオン / docker-hands-on
suzukihoge
48
15k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.6k
Faster Mobile Websites
deanohume
296
30k
What's new in Ruby 2.0
geeforr
335
31k
Teambox: Starting and Learning
jrom
126
8.3k
RailsConf 2023
tenderlove
0
500
Infographics Made Easy
chrislema
237
17k
Adopting Sorbet at Scale
ufuk
66
8.5k
How to train your dragon (web standard)
notwaldorf
71
5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Atom: Resistance is Futile
akmur
258
25k
Being A Developer After 40
akosma
56
580k
Transcript
@BASTAcon & @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Enterprise Angular with
Nx: Robust Architectures and Fast Builds
@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Monorepo Structure
@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
Sharing Libs: Easy
@ManfredSteyer Moving back and forth Npm Registry
@ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project
Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
@ManfredSteyer Creating a Workspace with the CLI npm install -g
@angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
@ManfredSteyer Tooling & Generator https://nrwl.io/nx
@ManfredSteyer Visualize Module Structure
@ManfredSteyer Creating a Workspace with the CLI npm install -g
@angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
@ManfredSteyer Creating a Workspace with Nx npm install -g @angular/cli
npm init nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
@ManfredSteyer Creating a Workspace with NX npm install -g @angular/cli
npm init nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib --directory my-domain ng serve --project my-app ng build --project my-app
@ManfredSteyer DEMO
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Tagging Apps and Libs (nx.json) "booking": { "tags": ["domain:booking",
"type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
@ManfredSteyer Tagging Apps and Libs (nx.json) "booking": { "tags": ["domain:booking",
"type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
@ManfredSteyer Linting (.eslintrc) { "sourceTag": "domain:booking", "onlyDependOnLibsWithTags": ["domain:booking", "domain:shared"] }
@ManfredSteyer DEMO
@ManfredSteyer
@ManfredSteyer Options File System Nx Cloud Custom Cache
@ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", […]
} },
@ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", "options":
{ "cacheableOperations": ["build", "lint", "test", "e2e"], […] } } },
@ManfredSteyer Using nx build app-or-lib --with-deps
@ManfredSteyer Prerequisite for Incremental Builds ng g lib lib-name --buildable
@ManfredSteyer DEMO
@ManfredSteyer Also Test and Lint-Results Can be Cached nx build
app-or-lib --with-deps nx lint app-or-lib --with-deps nx test app-or-lib --with-deps nx e2e app-or-lib --with-deps
@ManfredSteyer Nx Console for Visual Studio Code
@ManfredSteyer • • • •
@ManfredSteyer Free eBook ANGULARarchitects.io/book
@ManfredSteyer • • • •
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops