Business Architectures with Angular Libraries, NX and Monorepos

Business Architectures
with Angular Libraries,
NX and Monorepos

View Slide

Why?

View Slide

Encapsulation

View Slide

Angular
Modules

View Slide

Feature
Modules

View Slide

import { NgModule } from '@angular/core';
@NgModule({
imports: [ ... ],
declarations: [
AppComponent,
HelloComponent,
Hello1Component,
Hello2Component,
Hello3Component,
Hello4Component,
Hello5Component,
Hello6Component,
Hello7Component,
Hello8Component,
Hello9Component,
Hello10Component,
Hello11Component,
Hello12Component,
Hello13Component,
Hello14Component,
Hello15Component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

View Slide

@NgModule({
imports: [ ... ],
declarations: [
AppComponent,
Feature1Component1,
Feature1Component2,
Feature1Component3,
Feature1Component4,
Feature1Component5,
Feature1Component6,
Feature2Component1,
Feature2Component2,
Feature2Component3,
Feature2Component4,
Feature2Component5,
Feature2Component6,
...
],
bootstrap: [AppComponent]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

View Slide

import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: [
Feature1Component1,
Feature1Component2,
Feature1Component3,
Feature1Component4,
Feature1Component5,
Feature1Component6,
],
exports: [...]
})
export class Feature1Module { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: [
Feature2Component1,
Feature2Component2,
Feature2Component3,
Feature2Component4,
Feature2Component5,
Feature2Component6,
],
exports: [...]
})
export class Feature2Module { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

@NgModule({
imports: [ ],
declarations: [
AppComponent,
Feature1Component1,
Feature1Component2,
Feature1Component3,
Feature1Component4,
Feature1Component5,
Feature1Component6,
Feature2Component1,
Feature2Component2,
Feature2Component3,
Feature2Component4,
Feature2Component5,
Feature2Component6,
],
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

View Slide

import { Feature1Module } from './feature1-module/feature1.module';
@NgModule({
imports: [
BrowserModule,
FormsModule,
Feature1Module,
Feature2Module
],
declarations: [
AppComponent,
HelloComponent
],
bootstrap: [ AppComponent ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

@NgModule({
imports: [
BrowserModule,
FormsModule,
Feature1Module,
Feature2Module
],
declarations: [
AppComponent,
HelloComponent
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Feature1Module,
Feature2Module
1
2
3
4
@NgModule({
5
imports: [
6
BrowserModule,
7
FormsModule,
8
9
10
],
11
declarations: [
12
AppComponent,
13
HelloComponent
14
],
15
16
})
17
18

View Slide

Business Architectures
with Angular Libraries,
NX and Monorepos

View Slide

Libraries

View Slide

View Slide

NG Workspace

View Slide

View Slide

import { /* ... */ } from 'lib-to-configure';
import { NgModule, APP_INITIALIZER, Injectable } from '@angular/core';
1
import { BrowserModule } from '@angular/platform-browser';
2
3
4
5
import { AppComponent } from './app.component';
6
7
export class AppModule {}
8

View Slide

@NgModule({
declarations: [LibToConfigureComponent],
imports: [CommonModule],
exports: [LibToConfigureComponent],
})
export class LibToConfigureModule {}
1
2
3
4
5
6

View Slide

@NgModule({
})
1
2
3
4
5
6
@NgModule({
1
2
3
4
})
5
6
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, LibToConfigureModule],
providers: [],
bootstrap: [AppComponent],
})
1
2
3
4
5
6
7

View Slide

@NgModule({
})
1
2
3
4
5
6
@NgModule({
1
2
3
4
})
5
6
@NgModule({
providers: [],
})
1
2
3
4
5
6
7
@NgModule({
1
2
3
providers: [],
4
5
})
6
7

View Slide

View Slide

What is

View Slide

Bring
Order

View Slide

Have
Flexibility

View Slide

Tooling

View Slide

NX Workspace

View Slide

View Slide

Rethinking Libraries

View Slide

Libraries
Share code between apps

View Slide

Libraries
Provide feature to one app

View Slide

Libraries
Provide feature to one app
Multiple Libs = 1 Feature

View Slide

Feature
Feature
Ui
Data access
Utils

View Slide

View Slide

Folders

View Slide

Folders
Lib: Api
Lib: Data
Lib: Ui
Lib: Util
Lib: Feature

View Slide

https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book

View Slide

Feature
Ui
vs.

View Slide

Container
Presentational
vs.

View Slide

Stateful
import { /* ... */ } from '...';
@Component({
selector: 'workspace-groups-meetups-list',
templateUrl: './groups-meetups-list.component.html',
styleUrls: ['./groups-meetups-list.component.scss'],
})
export class GroupsMeetupsListComponent implements OnInit {
items$: Observable;
loading$: Observable;
constructor(private store: Store) {}
ngOnInit() {
this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading));
this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups));
this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup());
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

View Slide

Stateful
import { /* ... */ } from '...';
@Component({
})
items$: Observable;
ngOnInit() {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
items$: Observable;
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21

View Slide

Stateful
import { /* ... */ } from '...';
@Component({
})
items$: Observable;
ngOnInit() {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
items$: Observable;
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21

View Slide

Stateful
import { /* ... */ } from '...';
@Component({
})
items$: Observable;
ngOnInit() {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
items$: Observable;
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21

View Slide

Stateful
import { /* ... */ } from '...';
@Component({
})
items$: Observable;
ngOnInit() {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
items$: Observable;
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21

View Slide

Stateful
import { /* ... */ } from '...';
@Component({
})
items$: Observable;
ngOnInit() {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
items$: Observable;
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
1
2
@Component({
3
4
5
6
})
7
8
items$: Observable;
9
10
11
12
13
ngOnInit() {
14
15
16
17
18
19
}
20
}
21
import { /* ... */ } from '...';
@Component({
})
items$: Observable;
ngOnInit() {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

View Slide

Stateful

All Gatherings of the Group
*ngIf="loading$ | async; else list"
mode="indeterminate"
>

1
2
3
4
5
6
7
8
9
10
11
12
13

View Slide

Stateful

>

1
2
3
4
5
6
7
8
9
10
11
12
13

1
2
3
4
5
6
>
7
8

9
10
11

12

13

View Slide

Stateless
import { /* ... */ } from '...';
@Component({
selector: 'workspace-meetup-list',
templateUrl: './meetup-list.component.html',
styleUrls: ['./meetup-list.component.scss'],
})
export class MeetupListComponent {
@Input() items: Meetup[] = [];
}
1
2
3
4
5
6
7
8
9
10
11
12

View Slide

Stateless

No items found...

0; else noItems">

{{ item.name }}

1
2
3
4
5
6
7
8
9
10
11
12
13

View Slide

Stateless
*ngFor="let item of items"
[item]="item"
>

1

2
No items found...
3

4
5
0; else noItems">
6
7
8
9
10
11

12

13

View Slide

Stateless
[item]="item"
>

1

2
No items found...
3

4
5
0; else noItems">
6
7
8
9
10
11

12

13

No items found...

0; else noItems">
[item]="item"
>

1
2
3
4
5
6
7
8
9
10
11
12
13

View Slide

Stateless
[item]="item"
(itemClicked)="bubbleNavigateEvent($event)"
>

1

2
No items found...
3

4
5
0; else noItems">
6
7
8
9
10
11

12

13

14

View Slide

Stateless

No items found...

0; else noItems">
[item]="item"
(itemClicked)="bubbleNavigateEvent($event)"
>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

View Slide

Stateless
import { /* ... */ } from '...';
@Component({
selector: 'workspace-meetup-list',
templateUrl: './meetup-list.component.html',
styleUrls: ['./meetup-list.component.scss'],
})
export class MeetupListComponent {
@Input() items: Meetup[] = [];
@Output() itemClicked = new EventEmitter();
bubbleNavigationEvent(meetup: Meetup) {
this.itemClicked.emit(meetup);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

View Slide

Stateful
Stateless
[ ... ]
( ... )

View Slide

Stateful
Stateless
[ ... ]
( ... )
Stateless
[ ... ]
( ... )

View Slide

Overlook
The dependency graph

View Slide

“ Nx is built on a technology-agnostic core
that maintains modular units of code and
understands the dependency graph
between them. nx.dev

View Slide

Workspace

View Slide

What is it?
The dependency graph helps
you overlook all your
applications and libraries.
You learn about relations and
dependencies of each
module in your workspace.

View Slide

Why is it helpful?

View Slide

Graph

View Slide

Affected
Dependency Graph

View Slide

Why is it helpful?

View Slide

Restrict Module
dependencies

View Slide

Why is it helpful?
Control encapsulation of workspace
modules.
Prevent accidental module pollution.

View Slide

nx.json
eslintrc.json
or
tslint.json
Tag projects
nx-enforce-module-
boundaries
Declare dependencies

View Slide

nx.json
"projects": {
{
1
2
"gatherr": {
3
"tags": []
4
},
5
"gatherr-e2e": {
6
"tags": [],
7
"implicitDependencies": ["gatherr"]
8
},
9
"auth-feature": {
10
"tags": []
11
},
12
"groups-feature": {
13
"tags": []
14
},
15
"home-feature": {
16
"tags": []
17
},
18
"personal-feature": {
19
"tags": []
20
},
21
"profile-feature": {
22
"tags": []
23
}
24
}
25
}
26

View Slide

nx.json
"projects": {
{
1
2
"gatherr": {
3
"tags": []
4
},
5
"gatherr-e2e": {
6
"tags": [],
7
8
},
9
"auth-feature": {
10
"tags": []
11
},
12
"groups-feature": {
13
"tags": []
14
},
15
"home-feature": {
16
"tags": []
17
},
18
19
"tags": []
20
},
21
22
"tags": []
23
}
24
}
25
}
26
"gatherr": {
"gatherr-e2e": {
"auth-feature": {
"groups-feature": {
"home-feature": {
{
1
"projects": {
2
3
"tags": []
4
},
5
6
"tags": [],
7
8
},
9
10
"tags": []
11
},
12
13
"tags": []
14
},
15
16
"tags": []
17
},
18
19
"tags": []
20
},
21
22
"tags": []
23
}
24
}
25
}
26

View Slide

nx.json
"projects": {
{
1
2
"gatherr": {
3
"tags": []
4
},
5
"gatherr-e2e": {
6
"tags": [],
7
8
},
9
"auth-feature": {
10
"tags": []
11
},
12
"groups-feature": {
13
"tags": []
14
},
15
"home-feature": {
16
"tags": []
17
},
18
19
"tags": []
20
},
21
22
"tags": []
23
}
24
}
25
}
26
"gatherr": {
"gatherr-e2e": {
"auth-feature": {
"groups-feature": {
"home-feature": {
{
1
"projects": {
2
3
"tags": []
4
},
5
6
"tags": [],
7
8
},
9
10
"tags": []
11
},
12
13
"tags": []
14
},
15
16
"tags": []
17
},
18
19
"tags": []
20
},
21
22
"tags": []
23
}
24
}
25
}
26
"tags": []
"tags": [],
"tags": []
"tags": []
"tags": []
"tags": []
"tags": []
{
1
"projects": {
2
"gatherr": {
3
4
},
5
"gatherr-e2e": {
6
7
8
},
9
"auth-feature": {
10
11
},
12
"groups-feature": {
13
14
},
15
"home-feature": {
16
17
},
18
19
20
},
21
22
23
}
24
}
25
}
26

View Slide

nx.json "tags": ["app"]
"tags": ["app-feature"]
{
1
"projects": {
2
"gatherr": {
3
4
},
5
"gatherr-e2e": {
6
"tags": [],
7
8
},
9
"auth-feature": {
10
11
},
12
"groups-feature": {
13
14
},
15
"home-feature": {
16
17
},
18
19
20
},
21
22
23
}
24
}
25
}
26

View Slide

linter
"@nrwl/nx/enforce-module-boundaries": [
{
1
"rules": {
2
3
"error",
4
{
5
"enforceBuildableLibDependency": true,
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
"onlyDependOnLibsWithTags": ["*"]
11
}
12
}]
13
}
14
}
15

View Slide

linter
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15

View Slide

linter
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
"allow": [],
{
1
"rules": {
2
3
"error",
4
{
5
6
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15

View Slide

linter
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
"allow": [],
{
1
"rules": {
2
3
"error",
4
{
5
6
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
"depConstraints": [
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15

View Slide

linter
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
"allow": [],
{
1
"rules": {
2
3
"error",
4
{
5
6
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
"depConstraints": [
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
8
{
9
"sourceTag": "*",
10
11
}
12
}]
13
}
14
}
15
{
"sourceTag": "*",
}
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
9
10
11
12
}]
13
}
14
}
15

View Slide

linter
{
"sourceTag": "app",
"onlyDependOnLibsWithTags": ["app-feature"]
}]
{
1
"rules": {
2
3
"error",
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
},
12
13
14
15
16
}]
17
}
18
}
19

View Slide

linter "error",
{
1
"rules": {
2
3
4
{
5
6
"allow": [],
7
"depConstraints": [
8
{
9
"sourceTag": "*",
10
11
},
12
{
13
"sourceTag": "app",
14
"onlyDependOnLibsWithTags": ["app-feature"]
15
}]
16
}]
17
}
18
}
19

View Slide

Wildcards
https://nx.dev/latest/angular/structure/monorepo-tags#exceptions

View Slide

View Slide

Speed Up
Optimize Build- & Test-
Runs

View Slide

View Slide

"paths": {
"@workspace/shared/ui-common": ["libs/shared/ui-common/src/index.ts"],
"@workspace/shared/ui-layout": ["libs/shared/ui-layout/src/index.ts"],
"@workspace/shared/data": ["libs/shared/data/src/index.ts"],
"@workspace/shared/utils": ["libs/shared/utils/src/index.ts"],
"@workspace/category/data": ["libs/category/data/src/index.ts"],
"@workspace/category/api": ["libs/category/api/src/index.ts"],
"@workspace/auth/api": ["libs/auth/api/src/index.ts"],
"@workspace/auth/feature": ["libs/auth/feature/src/index.ts"],
"@workspace/auth/util": ["libs/auth/util/src/index.ts"],
"@workspace/auth/data": ["libs/auth/data/src/index.ts"],
"@workspace/home/feature": ["libs/home/feature/src/index.ts"],
"@workspace/home/ui": ["libs/home/ui/src/index.ts"],
"@workspace/maps/util": ["libs/maps/util/src/index.ts"],
"@workspace/groups/api": ["libs/groups/api/src/index.ts"],
"@workspace/groups/feature": ["libs/groups/feature/src/index.ts"],
"@workspace/groups/ui": ["libs/groups/ui/src/index.ts"],
"@workspace/groups/data": ["libs/groups/data/src/index.ts"],
"@workspace/personal/feature": ["libs/personal/feature/src/index.ts"],
{
1
"compileOnSave": false,
2
"compilerOptions": {
3
"rootDir": ".",
4
"sourceMap": true,
5
"declaration": false,
6
"moduleResolution": "node",
7
"emitDecoratorMetadata": true,
8
"experimentalDecorators": true,
9
"importHelpers": true,
10
"target": "es5",
11
"module": "esnext",
12
"typeRoots": ["node_modules/@types"],
13
"lib": ["es2017", "dom"],
14
"skipLibCheck": true,
15
"skipDefaultLibCheck": true,
16
"baseUrl": ".",
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

View Slide

libs/shared-utils

View Slide

libs/shared-utils
/ServiceA
libs/shared-utils

View Slide

libs/shared-utils
/ServiceA
libs/shared-utils
/ServiceB
libs/shared-utils

View Slide

Changes on Service A or B
builds both consumers!

View Slide

Move Command
nx g @nrwl/angular:move --project my-feature-lib shared/my-feature-lib
1

View Slide

NX Plugins
Cypress, Storybook, ...

View Slide

Wrap up

View Slide

Wrap up
Workspace Enterprise Applications

View Slide

Wrap up
Latest Toolset

View Slide

Wrap up
Latest Toolset
Affected Build & Cache

View Slide

Wrap up
Latest Toolset
SoC through Libs

View Slide

Wrap up
Latest Toolset
SoC through Libs
Dep Graph

View Slide

Wrap up
Latest Toolset
SoC through Libs
Dep Graph
Plugin Architecture

View Slide

Fabian
Gosebrink
@FabianGosebrink

View Slide

Thank you!

View Slide

Business Architectures with Angular Libraries, NX and Monorepos

Business Architectures with Angular Libraries, NX and Monorepos

Fabian Gosebrink

More Decks by Fabian Gosebrink

Other Decks in Technology

Featured

Transcript