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
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
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
230
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
230
Other Decks in Programming
See All in Programming
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
540
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
440
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
460
AIでLINEスタンプを作ってみた
eycjur
1
230
楽して成果を出すためのセルフリソース管理
clipnote
0
180
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
はじめてのMaterial3 Expressive
ym223
2
880
rage against annotate_predecessor
junk0612
0
170
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
A designer walks into a library…
pauljervisheath
207
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Language of Interfaces
destraynor
161
25k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
GitHub's CSS Performance
jonrohan
1032
460k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
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