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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
79
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
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
98
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
710
XP, Testing and ninja testing
m_seki
3
220
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
230
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
WindowInsetsだってテストしたい
ryunen344
1
220
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
330
童醫院敏捷轉型的實踐經驗
cclai999
0
210
RailsGirls IZUMO スポンサーLT
16bitidol
0
130
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Practical Orchestrator
shlominoach
188
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Gamification - CAS2011
davidbonilla
81
5.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building Adaptive Systems
keathley
43
2.6k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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