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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
310
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
480
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
1
280
rage against annotate_predecessor
junk0612
0
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Langfuseと歩む生成AI活用推進
licux
3
330
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
Testing Trophyは叫ばない
toms74209200
0
670
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
690
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.4k
Ruby Parser progress report 2025
yui_knk
1
290
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
470
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Rails Girls Zürich Keynote
gr2m
95
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
A Tale of Four Properties
chriscoyier
160
23k
Site-Speed That Sticks
csswizardry
10
810
Facilitating Awesome Meetings
lara
55
6.5k
Thoughts on Productivity
jonyablonski
70
4.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Embracing the Ebb and Flow
colly
87
4.8k
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