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
Sustainable Angular Architectures: Strategic De...
Search
Manfred Steyer
PRO
November 10, 2020
Programming
1
350
Sustainable Angular Architectures: Strategic Design with Nx Monorepos
Free eBook about this topic:
https://www.angulararchitects.io/book/
Manfred Steyer
PRO
November 10, 2020
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
All About Angular's New Signal Forms
manfredsteyer
PRO
0
23
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
94
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
76
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
50
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
31
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
380
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
640
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
510
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
Swift Concurrency - 状態監視の罠
objectiveaudio
2
320
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
1.4k
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
クラシルを支える技術と組織
rakutek
0
190
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
300
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
850
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
150
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
690
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
660
iOSDC.pdf
chronos2500
2
640
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
840
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
Docker and Python
trallard
46
3.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
4 Signs Your Business is Dying
shpigford
185
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Transcript
@ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Sustainable Angular Architectures: Strategic Design
with Nx Monorepos
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Methodology for bridging the gap b/w requirements and architecture/
design
@ManfredSteyer Monolith? Flight System Flight System
@ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage Sub-Domains
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Monorepo Structure
@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
@ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project
Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
@ManfredSteyer Moving back and forth Npm Registry
@ManfredSteyer Tooling & Generator https://nrwl.io/nx
@ManfredSteyer Visualize Module Structure
@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
@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature
Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Smart Comp. Dumb Comp.
@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API
API Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer
@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API
API Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer
@ManfredSteyer
@ManfredSteyer • • •
@ManfredSteyer
@ManfredSteyer Distributed Cache 1) npm install @apployees-nx/level-task-runner -D 2) npm
install mongodown -D 3) Configure @apployees-nx/level-task-runner in nx.json
@ManfredSteyer
@ManfredSteyer Works with Several Databases MongoDB Redis MySQL PostgreSQL …
@ManfredSteyer Where‘s the Catch? Inofficial Solution Official Solution: Nx Cloud
Nx Cloud: Far more possibilities
@ManfredSteyer Free eBook https://ANGULARarchitects.io/book
@ManfredSteyer
• • •
None
@ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House:
everywhere http://softwarearchitekt.at/workshops