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 Monorepos
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
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
58
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
46
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
390
Micro Frontends with Web Standards
manfredsteyer
PRO
1
290
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
210
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
100
NGRX Signal Store
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
6
910
Ruby GitHub Packages
bkuhlmann
0
620
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
Java 22 Overview
kishida
1
170
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
420
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Product Roadmaps are Hard
iamctodd
43
9.7k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Designing Experiences People Love
moore
136
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Music & Morning Musume
bryan
41
5.6k
A Tale of Four Properties
chriscoyier
150
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Practical Orchestrator
shlominoach
181
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
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