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
Maintainable Architectures with Angular and Mon...
Search
Manfred Steyer
PRO
February 27, 2019
Programming
2
280
Maintainable Architectures with Angular and Monorepos
Manfred Steyer
PRO
February 27, 2019
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
56
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
120
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
280
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
180
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
83
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
94
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
71
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
790
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
0
140
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
310
カクヨムAndroidアプリのリブート
numeroanddev
0
430
Java on Azure で LangGraph!
kohei3110
0
160
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
940
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
760
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
290
SODA - FACT BOOK
sodainc
1
1.1k
Using AI Tools Around Software Development
inouehi
0
1.2k
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Tale of Four Properties
chriscoyier
160
23k
Producing Creativity
orderedlist
PRO
346
40k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
GraphQLとの向き合い方2022年版
quramy
46
14k
Designing for Performance
lara
609
69k
Music & Morning Musume
bryan
46
6.6k
Facilitating Awesome Meetings
lara
54
6.4k
Designing for humans not robots
tammielis
253
25k
It's Worth the Effort
3n
184
28k
Transcript
@ManfredSteyer Maintainable Architectures with Angular and Monorepos Manfred Steyer SOFTWAREarchitekt.at
ManfredSteyer
@ManfredSteyer Ever started a project from the scratch? Kick-off After
some weeks After some years
@ManfredSteyer Contents 1) npm Packages 2) Monorepos
@ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular
Trainings and Consultancy • Google Developer Expert (GDE) • Angular Tooling Team Page ▪ 5 Manfred Steyer Public: Frankfurt, Stuttgart, Wien In-House: everywhere http://softwarearchitekt.at/workshops
@ManfredSteyer 1) npm Packages
@ManfredSteyer Why Packages? Sub Project Sub Project Sub Project Sub
Project Sub Project Sub Project Sub Project Sub Project
@ManfredSteyer Structure of an npm Package • /node_modules • your-stuff
• package.json
@ManfredSteyer Properties in package.json (Selection) name version description dependencies peer-
dependencies dev- dependencies
@ManfredSteyer package.json { "dependencies": { "@angular/core": "7.3.0", "@angular/http": "7.3.0" }
}
@ManfredSteyer package.json { "dependencies": { "@angular/core": "7.3.0", "@angular/http": "7.3.0" }
}
@ManfredSteyer package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^7.0.0",
"@angular/http": "^7.0.0" } }
@ManfredSteyer package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^7.0.0",
"@angular/http": "^7.0.0" }, "devDependencies": { [...] } }
@ManfredSteyer Angular Package Format https://goo.gl/hjt7G3
@ManfredSteyer Lots of DETAILS
@ManfredSteyer ng-packagr
@ManfredSteyer Angular CLI 6+ supports Packages
@ManfredSteyer Create Library with CLI >= 6 npm install -g
@angular/cli ng new lib-project cd lib-project ng generate library flight-booking-lib ng generate application playground-app ng serve --project playground-app ng build --project flight-booking-lib
@ManfredSteyer Folder Structure
@ManfredSteyer DEMO
@ManfredSteyer Deployment
@ManfredSteyer Publishing to npm Registry • Increment version in package.json
• ng build --project flight-booking-lib • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
@ManfredSteyer Alternatives for setting the Registry • Global: npm set
registry http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root
@ManfredSteyer npm Registries Nexus Artifactory Team Foundation Server Verdaccio npm
i -g verdaccio verdaccio
@ManfredSteyer DEMO
@ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib
authors and app authors
@ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib
authors and app authors ;-)
@ManfredSteyer Disadvantages Distribution • Annoying within project • Prevents gritting
further libs Versioning • Old versions • Conflicts • How to force devs to use latest version? Decoupling • What if lib authors == app authors?
@ManfredSteyer 2) Monorepos
@ManfredSteyer Workspace
@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
No burden with distributing libs Creating new libs: Adding folder Experience: Successfully used at Google, Facebook, …
@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 DEMO
@ManfredSteyer Conclusion Packages: Reuse Monorepo: Structure CLI 6+ CLI 6+/
Nx
@ManfredSteyer Contact and Downloads [mail]
[email protected]
[web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d http://softwarearchitekt.at/workshops Slides & Examples