Detecting and solving pain points in Angular Applications

Detecting & solving
pain points in
applications

View Slide

PErsonal
Experience

View Slide

View Slide

Feature Modules

View Slide

Feature Modules
Libraries

View Slide

Feature Modules
Libraries
Monorepos

View Slide

Feature Modules
Libraries
Monorepos
Component Relation

View Slide

Feature Modules
Libraries
Monorepos
Component Relation
Component Communication

View Slide

Feature Modules
Libraries
Monorepos
Component Relation
Component Communication
Rxjs

View Slide

Detecting & solving
pain points in
applications

View Slide

View Slide

What is

View Slide

Platform

View Slide

Animations CDK CLI Compiler
Components Dependency
Injection
Forms Http

View Slide

L18n Karma Libraries Material
Protractor PWA Router Universal

View Slide

NgRx Cypress RxJs Language
Service
Lazy Loading

View Slide

Platform !

View Slide

THe Start

View Slide

View Slide

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
HelloComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

@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

Feature
Modules

View Slide

@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,
...
],
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,
]
})
export class Feature1Module { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

@NgModule({
imports: [
CommonModule
],
declarations: [
Feature2Component1,
Feature2Component2,
Feature2Component3,
Feature2Component4,
Feature2Component5,
Feature2Component6,
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

@NgModule({
imports: [ ],
declarations: [
AppComponent,
Feature1Component1,
Feature1Component2,
Feature1Component3,
Feature1Component4,
Feature1Component5,
Feature1Component6,
Feature2Component1,
Feature2Component2,
Feature2Component3,
Feature2Component4,
Feature2Component5,
Feature2Component6,
],
})
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

View Slide

@NgModule({
imports: [
CommonModule
],
declarations: [
Feature2Component1,
Feature2Component2,
Feature2Component3,
Feature2Component4,
Feature2Component5,
Feature2Component6,
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

@NgModule({
imports: [
CommonModule
],
declarations: [
Feature2Component1,
Feature2Component2,
Feature2Component3,
Feature2Component4,
Feature2Component5,
Feature2Component6,
],
exports: [
Feature2Component5,
Feature2Component6,
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

View Slide

@NgModule({
imports: [
CommonModule
],
declarations: [
Feature2Component1, // private
],
exports: [
Feature2Component5, // public
Feature2Component6, // public
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

View Slide

import { NgModule } from "@angular/core";
import { Feature1Module } from "./feature1-module/feature1.modu
import {
MyComponent
} from "./feature1-module/my-component/my.component";
@NgModule({
imports: [
Feature1Module,
Feature2Module
],
declarations: [
AppComponent,
MyComponent // DONT!
],
})
export class AppModule {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

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

View Slide

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

View Slide

Encapsulation

View Slide

Libraries

View Slide

Workspace

View Slide

View Slide

Workspace

View Slide

How to
consume
Libs?

View Slide

View Slide

import { NgModule, APP_INITIALIZER, Injectable } from '@angular/core';
import { /* ... */ } from 'lib-to-configure';
1
2
3
4
5
6
7
8

View Slide

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

View Slide

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

View Slide

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

View Slide

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

View Slide

import { /* ... */ } from './../../../lib-to-configure/src/lib/lib-configuration';
1
2
3
4
5
6
7
8

View Slide

import { /* ... */ } from './../../../lib-to-configure/src/lib/lib-configuration';
1
2
3
4
5
6
7
8
Don't

View Slide

import { /* ... */ } from 'lib-to-configure/public-api';
1
2
3
4
5
6
7
8

View Slide

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

View Slide

1
2
3
4
5
6
7
8
Don't

View Slide

View Slide

1
2
3
4
5
6
7
8
Do

View Slide

1
2
3
4
5
6
7
8

View Slide

Abstraction

View Slide

How to
consume
Libs

View Slide

How to
Con gure
Libs?

View Slide

View Slide

Build once
Deploy
Everywhere

View Slide

How to
Con gure
Libs?

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({
declarations: [AppComponent],
imports: [BrowserModule, LibToConfigureModule],
providers: [],
bootstrap: [AppComponent],
})
1
2
3
4
5
6
7

View Slide

static con g
export class LibToConfigureConfiguration {
name: string;
}
1
2
3

View Slide

static con g
name: string;
}
1
2
3
export * from './lib/lib-configuration';
1
export * from './lib/lib-to-configure.component';
2
export * from './lib/lib-to-configure.module';
3
export * from './lib/lib-to-configure.service';
4

View Slide

static con g
@NgModule({
})
1
2
3
4
5
6

View Slide

static con g
@NgModule({
/*...*/
})
export class LibToConfigureModule {
static forRoot(
libConfiguration: LibToConfigureConfiguration
): ModuleWithProviders {
return {
ngModule: LibToConfigureModule,
providers: [
{
provide: LibToConfigureConfiguration,
useValue: libConfiguration,
},
],
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

static con g
@NgModule({
imports: [
BrowserModule,
LibToConfigureModule.forRoot({ name: 'Fabian' })
],
providers: [],
})
1
2
3
4
5
6
7
8
9
10

View Slide

Dynamic con g
@NgModule({
imports: [
BrowserModule,
LibToConfigureModule.forRoot( ??? )
],
providers: [],
})
1
2
3
4
5
6
7
8
9
10

View Slide

Dynamic con g
@NgModule({
imports: [
BrowserModule,
LibToConfigureModule.forRoot( ??? )
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: appInitializerFn,
multi: true,
deps: [AppConfigService],
},
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

Dynamic con g
export class AppConfigService {
private appConfig;
constructor(private http: HttpClient) { }
loadAppConfig() {
return this.http.get('/assets/data/appConfig.json')
.toPromise()
.then(data => {
this.appConfig = data;
});
}
getConfig() {
return this.appConfig;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

Dynamic con g
const appInitializerFn = (appConfig: AppConfigService) => {
return () => {
return appConfig.loadAppConfig();
};
};
@NgModule({
imports: [
BrowserModule,
LibToConfigureModule,
HttpClientModule
],
providers: [
AppConfigService,
{
multi: true,
},
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

View Slide

Dynamic con g
return () => {
};
};
@NgModule({
imports: [
BrowserModule,
HttpClientModule
],
providers: [
AppConfigService,
{
multi: true,
},
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
return () => {
};
};
1
2
3
4
5
6
@NgModule({
7
8
imports: [
9
BrowserModule,
10
11
HttpClientModule
12
],
13
providers: [
14
AppConfigService,
15
{
16
17
18
multi: true,
19
20
},
21
],
22
23
})
24
25

View Slide

Dynamic con g
return () => {
};
};
@NgModule({
imports: [
BrowserModule,
HttpClientModule
],
providers: [
AppConfigService,
{
multi: true,
},
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
return () => {
};
};
1
2
3
4
5
6
@NgModule({
7
8
imports: [
9
BrowserModule,
10
11
HttpClientModule
12
],
13
providers: [
14
AppConfigService,
15
{
16
17
18
multi: true,
19
20
},
21
],
22
23
})
24
25
1
return () => {
2
3
};
4
};
5
6
@NgModule({
7
8
imports: [
9
BrowserModule,
10
11
HttpClientModule
12
],
13
providers: [
14
AppConfigService,
15
{
16
17
18
multi: true,
19
20
},
21
],
22
23
})
24
25

View Slide

Dynamic con g
LibToConfigureModule.forRoot(???),
1
return () => {
2
3
};
4
};
5
6
@NgModule({
7
8
imports: [
9
BrowserModule,
10
11
HttpClientModule
12
],
13
providers: [
14
AppConfigService,
15
{
16
17
18
multi: true,
19
20
},
21
],
22
23
})
24
25

View Slide

Dynamic con g

View Slide

Dynamic con g
some: string = '';
}
export class LibConfiguration {
config?: Provider;
}
@Injectable({ providedIn: 'root' })
export abstract class LibConfigurationProvider {
abstract get config(): LibToConfigureConfiguration;
}
export class DefaultLibConfiguration
implements LibConfigurationProvider {
get config(): LibToConfigureConfiguration {
return { some: `Fallback` };
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

View Slide

Dynamic con g
some: string = '';
}
config?: Provider;
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
some: string = '';
}
1
2
3
4
5
config?: Provider;
6
}
7
8
9
10
11
}
12
13
14
15
16
17
18
19
}
20
}
21

View Slide

Dynamic con g
some: string = '';
}
config?: Provider;
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
some: string = '';
}
1
2
3
4
5
config?: Provider;
6
}
7
8
9
10
11
}
12
13
14
15
16
17
18
19
}
20
}
21
config?: Provider;
}
1
some: string = '';
2
}
3
4
5
6
7
8
9
10
11
}
12
13
14
15
16
17
18
19
}
20
}
21

View Slide

Dynamic con g
some: string = '';
}
config?: Provider;
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
some: string = '';
}
1
2
3
4
5
config?: Provider;
6
}
7
8
9
10
11
}
12
13
14
15
16
17
18
19
}
20
}
21
config?: Provider;
}
1
some: string = '';
2
}
3
4
5
6
7
8
9
10
11
}
12
13
14
15
16
17
18
19
}
20
}
21
}
1
some: string = '';
2
}
3
4
5
config?: Provider;
6
}
7
8
9
10
11
12
13
14
15
16
17
18
19
}
20
}
21

View Slide

Dynamic con g
some: string = '';
}
config?: Provider;
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
some: string = '';
}
1
2
3
4
5
config?: Provider;
6
}
7
8
9
10
11
}
12
13
14
15
16
17
18
19
}
20
}
21
config?: Provider;
}
1
some: string = '';
2
}
3
4
5
6
7
8
9
10
11
}
12
13
14
15
16
17
18
19
}
20
}
21
}
1
some: string = '';
2
}
3
4
5
config?: Provider;
6
}
7
8
9
10
11
12
13
14
15
16
17
18
19
}
20
}
21
}
1
some: string = '';
2
}
3
4
5
config?: Provider;
6
}
7
8
9
10
11
}
12
13
14
15
16
17
18
19
20
}
21

View Slide

Dynamic con g
@NgModule({
/*...*/
})
static forRoot(
libModuleConfiguration: LibConfiguration = {}
return {
providers: [
libModuleConfiguration.config || {
provide: LibConfigurationProvider,
useClass: DefaultLibConfiguration,
},
],
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

Dynamic con g
@NgModule({
/*...*/
})
static forRoot(
return {
providers: [
},
],
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@NgModule({
1
/*...*/
2
})
3
4
static forRoot(
5
6
7
return {
8
9
providers: [
10
11
12
13
},
14
],
15
};
16
}
17
}
18

View Slide

Dynamic con g
@NgModule({
/*...*/
})
static forRoot(
return {
providers: [
},
],
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@NgModule({
1
/*...*/
2
})
3
4
static forRoot(
5
6
7
return {
8
9
providers: [
10
11
12
13
},
14
],
15
};
16
}
17
}
18
@NgModule({
1
/*...*/
2
})
3
4
static forRoot(
5
6
7
return {
8
9
providers: [
10
11
12
13
},
14
],
15
};
16
}
17
}
18

View Slide

Dynamic con g
export class ConfigurationStore {
private internalConfig: LibToConfigureConfiguration;
setConfig(config: LibToConfigureConfiguration) {
this.internalConfig = config;
}
getConfig() {
return this.internalConfig;
}
}
@NgModule({
/* .. */
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

Dynamic con g
}
getConfig() {
}
}
@NgModule({
/* .. */
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
}
getConfig() {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
@NgModule({
14
/* .. */
15
})
16
17

View Slide

Dynamic con g
export class ConfigurationStore { ... }
export function initApp(configurationStore: ConfigurationStore) {
return () => {
return new Promise((resolve) => {
setTimeout(() => {
configurationStore.setConfig({ some: 'Fabian' });
resolve();
}, 2000);
});
};
}
@NgModule({
/* .. */
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

Dynamic con g
return () => {
setTimeout(() => {
resolve();
}, 2000);
});
};
}
@NgModule({
/* .. */
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
return () => {
setTimeout(() => {
resolve();
}, 2000);
});
};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@NgModule({
15
/* .. */
16
})
17
18

View Slide

Dynamic con g
export function initApp(configurationStore: ConfigurationStore) { ...}
export class ConfigFromApp implements LibConfigurationProvider {
constructor(private configStore: ConfigurationStore) {}
return this.configStore.getConfig();
}
}
@NgModule({
/* .. */
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

Dynamic con g
}
}
@NgModule({
/* .. */
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@NgModule({
15
/* .. */
16
})
17
18

View Slide

Dynamic con g
export class ConfigFromApp implements LibConfigurationProvider { ... }
@NgModule({
imports: [
LibToConfigureModule.forRoot({
config: {
useClass: ConfigFromApp,
},
}),
],
providers: [
{
useFactory: initApp,
multi: true,
deps: [ConfigurationStore],
},
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

View Slide

Dynamic con g
@NgModule({
imports: [
config: {
},
}),
],
providers: [
{
multi: true,
},
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
config: {
},
}),
1
2
3
4
5
6
7
8
@NgModule({
9
imports: [
10
11
12
13
14
15
16
],
17
providers: [
18
{
19
20
21
multi: true,
22
23
},
24
],
25
26
})
27
28

View Slide

Dynamic con g
@NgModule({
imports: [
config: {
},
}),
],
providers: [
{
multi: true,
},
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
config: {
},
}),
1
2
3
4
5
6
7
8
@NgModule({
9
imports: [
10
11
12
13
14
15
16
],
17
providers: [
18
{
19
20
21
multi: true,
22
23
},
24
],
25
26
})
27
28
{
multi: true,
},
1
2
3
4
5
6
7
8
@NgModule({
9
imports: [
10
11
config: {
12
13
14
},
15
}),
16
],
17
providers: [
18
19
20
21
22
23
24
],
25
26
})
27
28

View Slide

https://github.com/FabianGosebrink/angular-library-conﬁguration

View Slide

https://bit.ly/32lPE4a

View Slide

Eager Loaded
Lazy Loaded

View Slide

1. Load my con g

View Slide

1. Load my con g
2. start my app

View Slide

Main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
1
2
3
4
5
6
7
8
9
10
11
12
https://timdeschryver.dev/blog/angular-build-once-deploy-to-multiple-environments

View Slide

Main.ts
fetch('/assets/config.json')
import { enableProdMode } from '@angular/core'
1
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
2
import { environment } from './environments/environment'
3
import { AppConfig, APP_CONFIG } from './app.config'
4
import { AppModule } from './app/app.module'
5
6
7
.then((response) => response.json())
8
.then((config) => {
9
10
enableProdMode()
11
}
12
13
platformBrowserDynamic([{ provide: APP_CONFIG, useValue: config }])
14
15
.catch((err) => console.error(err))
16
})
17

View Slide

Main.ts
1
2
3
4
5
6
7
8
.then((config) => {
9
10
enableProdMode()
11
}
12
13
14
15
16
})
17
1
2
3
4
5
6
7
8
.then((config) => {
9
10
enableProdMode()
11
}
12
13
14
15
16
})
17

View Slide

Main.ts
1
2
3
4
5
6
7
8
.then((config) => {
9
10
enableProdMode()
11
}
12
13
14
15
16
})
17
1
2
3
4
5
6
7
8
.then((config) => {
9
10
enableProdMode()
11
}
12
13
14
15
16
})
17
1
2
3
4
5
6
7
8
.then((config) => {
9
10
enableProdMode()
11
}
12
13
14
15
16
})
17

View Slide

Main.ts
export class AppConfig {
/* */
}
export let APP_CONFIG = new InjectionToken('APP_CONFIG')
1
2
3
4
5

View Slide

Main.ts
export class AppConfig {
/* */
}
export let APP_CONFIG = new InjectionToken('APP_CONFIG')
1
2
3
4
5
import { APP_CONFIG, AppConfig } from '...';
export class MyService
constructor(@Inject(APP_CONFIG) private config: AppConfig) {}
}
1
2
3
4
5
6
7

View Slide

View Slide

Monorepos

View Slide

Rethinking
Libraries

View Slide

Library
Share COde over x apps

View Slide

Library
Share COde over x apps
parts of a feature!

View Slide

Feature
Feature
Ui
Data access
Utils

View Slide

View Slide

Folders

View Slide

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

View Slide

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

View Slide

Ui
Feature
vs.

View Slide

Feature
Ui
vs.

View Slide

Container
Presentational
vs.

View Slide

Smart
Dumb
vs.

View Slide

Stateful
Stateless
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
14

View Slide

Stateless

No items found...

0; else noItems">
*ngFor="let item of items"
[item]="item"
>

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

View Slide

Stateless

No items found...

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

1
2
3
4
5
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

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

View Slide

Service
export class MyService {
// DON'T
somethingHappened = new EventEmitter();
throwSomethingHappened(data: any) {
this.somethingHappened.emit(data);
}
}
1
2
3
4
5
6
7
8
9
10
somethingHappened.subscribe(data => ...)
1

View Slide

Service
// DON'T
somethingHappened = new Subject();
this.somethingHappened.next(data);
}
}
1
2
3
4
5
6
7
8
9
10
1

View Slide

Service
private somethingHappenedInternal = new Subject();
get somethingHappened() {
return this.somethingHappenedInternal.asObservable();
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
1

View Slide

Service
}
}
}
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
1

View Slide

Service
}
}
}
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
}
1
2
3
4
5
6
7
8
9
10
11
}
12
}
13
1

View Slide

Service
}
}
}
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
}
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
1

View Slide

RxJs

View Slide

"if you're starting with
angular, you do not need an
angular course, you need an
rxjs course"

View Slide

"if you're starting with
angular, you do not need an
angular course, you need an
rxjs course"
Colleague - some time ago

View Slide

Tap
Map
SwitchMap
MergeMap
ConcatMap
ExhaustMap

View Slide

Keep the
stream

View Slide

.Subscribe()
Does not keep
the stream

View Slide

@Component({
selector: "my-app",
template: `{{ todos | json }}`
})
export class AppComponent implements OnInit {
todos: any[];
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http
.get("https://...")
.subscribe(result => {
this.todos = result;
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

@Component({
selector: "my-app",
})
todos: any[];
ngOnInit(): void {
this.http
.get("https://...")
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
todos: any[];
@Component({
1
selector: "my-app",
2
3
})
4
5
6
7
8
9
ngOnInit(): void {
10
this.http
11
.get("https://...")
12
13
14
});
15
}
16
}
17

View Slide

@Component({
selector: "my-app",
})
todos: any[];
ngOnInit(): void {
this.http
.get("https://...")
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
todos: any[];
@Component({
1
selector: "my-app",
2
3
})
4
5
6
7
8
9
ngOnInit(): void {
10
this.http
11
.get("https://...")
12
13
14
});
15
}
16
}
17
ngOnInit(): void {
this.http
.get("https://...")
});
}
@Component({
1
selector: "my-app",
2
3
})
4
5
todos: any[];
6
7
8
9
10
11
12
13
14
15
16
}
17

View Slide

.subscribe(result => this.todos = result);
@Component({
1
selector: "my-app",
2
3
})
4
5
todos: any[];
6
7
8
9
ngOnInit(): void {
10
this.http
11
.get("https://...")
12
13
}
14
}
15

View Slide

@Component({
selector: "my-app",
template: `{{ todos$ | async | json }}`,
styleUrls: ["./app.component.css"]
})
todos$: Observable;
ngOnInit(): void {
this.todos$ = this.http.get("https://...")
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

View Slide

@Component({
selector: "my-app",
})
todos$: Observable;
ngOnInit(): void {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ngOnInit(): void {
@Component({
1
selector: "my-app",
2
3
4
})
5
6
todos$: Observable;
7
8
9
10
11
12
13
}
14
}
15

View Slide

ngOnInit(): void {
.pipe(tap(result => console.log(result)));
@Component({
1
selector: "my-app",
2
3
4
})
5
6
todos$: Observable;
7
8
9
10
11
12
13
}
14
}
15

View Slide

@Component({
selector: "my-app",
})
todos$: Observable;
ngOnInit(): void {
.pipe(map(result => result.length));
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

View Slide

@Component({
selector: "my-app",
})
todos$: Observable;
ngOnInit(): void {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
todos$: Observable;
@Component({
1
selector: "my-app",
2
3
4
})
5
6
7
8
9
10
ngOnInit(): void {
11
12
13
}
14
}
15

View Slide

@Component({
selector: "my-app",
})
todos$: Observable;
ngOnInit(): void {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
todos$: Observable;
@Component({
1
selector: "my-app",
2
3
4
})
5
6
7
8
9
10
ngOnInit(): void {
11
12
13
}
14
}
15
ngOnInit(): void {
@Component({
1
selector: "my-app",
2
3
4
})
5
6
todos$: Observable;
7
8
9
10
11
12
13
}
14
}
15

View Slide

@Component({
selector: "my-app",
})
todos$: Observable;
ngOnInit(): void {
.pipe(map(result => result.filter(x => x.id > 5)));
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

View Slide

@Component({
selector: "my-app",
template: `
{{ todo | json }}
`,
})
todo: any;
url = "https://jsonplaceholder.typicode.com/todos";
ngOnInit(): void {
this.http
.get(this.url)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

View Slide

@Component({
selector: "my-app",
template: `
{{ todo | json }}
`,
})
todo: any;
ngOnInit(): void {
this.http
.get(this.url)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{ todo | json }}
todo: any;
@Component({
1
selector: "my-app",
2
template: `
3
4
`,
5
6
})
7
8
9
10
11
12
13
ngOnInit(): void {
14
this.http
15
.get(this.url)
16
17
18
19
20
21
}
22
}
23

View Slide

@Component({
selector: "my-app",
template: `
{{ todo | json }}
`,
})
todo: any;
ngOnInit(): void {
this.http
.get(this.url)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{ todo | json }}
todo: any;
@Component({
1
selector: "my-app",
2
template: `
3
4
`,
5
6
})
7
8
9
10
11
12
13
ngOnInit(): void {
14
this.http
15
.get(this.url)
16
17
18
19
20
21
}
22
}
23
this.http
.get(this.url)
@Component({
1
selector: "my-app",
2
template: `
3
{{ todo | json }}
4
`,
5
6
})
7
8
todo: any;
9
10
11
12
13
ngOnInit(): void {
14
15
16
17
18
19
20
21
}
22
}
23

View Slide

@Component({
selector: "my-app",
template: `
{{ todo | json }}
`,
})
todo: any;
ngOnInit(): void {
this.http
.get(this.url)
.subscribe(allItems => {
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

View Slide

@Component({
selector: "my-app",
template: `
{{ todo | json }}
`,
})
todo: any;
ngOnInit(): void {
this.http
.get(this.url)
this.http
.get(this.url + "/" + allItems[0].id)
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

View Slide

@Component({
selector: "my-app",
template: `
{{ todo | json }}
`,
})
todo: any;
ngOnInit(): void {
this.http
.get(this.url)
this.http
.subscribe(singleItem => (this.todo = singleItem));
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

View Slide

Switchmap()

View Slide

.subscribe(singleItem => (this.todo = singleItem));
@Component({
1
selector: "my-app",
2
template: `
3
{{ todo | json }}
4
`,
5
6
})
7
8
todo: any;
9
10
11
12
13
ngOnInit(): void {
14
this.http
15
.get(this.url)
16
17
this.http
18
19
20
});
21
}
22
}
23

View Slide

switchMap(allItems => {
return this.http.get(this.url + "/" + allItems[0].id);
})
@Component({
1
selector: "my-app",
2
template: `
3
{{ todo$ | async | json }}
4
`,
5
6
})
7
8
todo$: Observable;
9
10
11
12
13
ngOnInit(): void {
14
this.todo$ = this.http.get(this.url).pipe(
15
16
17
18
);
19
}
20
}
21

View Slide

switchMap(allItems => this.http.get(this.url + "/" + allItems[0].id))
@Component({
1
selector: "my-app",
2
template: `
3
{{ todo$ | async | json }}
4
`,
5
6
})
7
8
todo$: Observable;
9
10
11
12
13
ngOnInit(): void {
14
this.todo$ = this.http.get(this.url).pipe(
15
16
);
17
}
18
}
19

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
export class AppComponent {
amount: number;
url = "https://bank.com/transferMoney";
sendMoney(): void {
this.http
.post(this.url, { transfer: 100 })
.pipe(switchMap(() => this.http.get("...")))
.subscribe((newAmount) => {
this.amount = newAmount;
alert("transferred successfully")
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{ amount }}
amount: number;
@Component({
1
selector: "my-app",
2
template: `
3
4
Send $$$
5
`,
6
7
})
8
9
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{ amount }}
amount: number;
@Component({
1
selector: "my-app",
2
template: `
3
4
Send $$$
5
`,
6
7
})
8
9
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{ amount }}
amount: number;
@Component({
1
selector: "my-app",
2
template: `
3
4
Send $$$
5
`,
6
7
})
8
9
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
sendMoney(): void {
this.http
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
15
16
17
18
19
20
21
22
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{ amount }}
amount: number;
@Component({
1
selector: "my-app",
2
template: `
3
4
Send $$$
5
`,
6
7
})
8
9
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
sendMoney(): void {
this.http
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
15
16
17
18
19
20
21
22
23
}
24
this.http
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
16
17
18
19
20
21
});
22
}
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{ amount }}
amount: number;
@Component({
1
selector: "my-app",
2
template: `
3
4
Send $$$
5
`,
6
7
})
8
9
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
sendMoney(): void {
this.http
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
15
16
17
18
19
20
21
22
23
}
24
this.http
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{ amount }}
amount: number;
@Component({
1
selector: "my-app",
2
template: `
3
4
Send $$$
5
`,
6
7
})
8
9
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
sendMoney(): void {
this.http
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
15
16
17
18
19
20
21
22
23
}
24
this.http
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
});
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
22
}
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{ amount }}
amount: number;
@Component({
1
selector: "my-app",
2
template: `
3
4
Send $$$
5
`,
6
7
})
8
9
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
sendMoney(): void {
this.http
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
15
16
17
18
19
20
21
22
23
}
24
this.http
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
16
17
18
19
20
21
});
22
}
23
}
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
});
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
22
}
23
}
24
sendMoney(): void {
this.http
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
15
16
17
18
19
20
21
22
23
}
24

View Slide

MergeMap()

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
.pipe(mergeMap(() => this.http.get("...")))
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
22
23
}
24

View Slide

ConcatMap()

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
.pipe(concatMap(() => this.http.get("...")))
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
22
23
}
24

View Slide

exhaustMap()

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
.pipe(exhaustMap(() => this.http.get("...")))
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24

View Slide

@Component({
selector: "my-app",
template: `
{{ amount }}
Send $$$
`,
})
amount: number;
sendMoney(): void {
this.http
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
});
22
}
23
}
24
});
}
@Component({
1
selector: "my-app",
2
template: `
3
{{ amount }}
4
Send $$$
5
`,
6
7
})
8
9
amount: number;
10
11
12
13
14
sendMoney(): void {
15
this.http
16
17
18
19
20
21
22
23
}
24

View Slide

View Slide

Fabian
Gosebrink
@FabianGosebrink

View Slide

THe End

View Slide

Take Care!

View Slide

https://offering.solutions/blog/articles/2021/03/08/switchmap-
mergemap-concatmap-exhaustmap-explained/
https://timdeschryver.dev/blog/angular-build-once-deploy-to-
multiple-environments
https://offering.solutions/blog/articles/2019/10/20/ta
p-map-switchmap-explained/
https://offering.solutions
https://github.com/fabiangosebrink

View Slide

View Slide

Detecting and solving pain points in Angular Applications

Detecting and solving pain points in Angular Applications

Fabian Gosebrink

More Decks by Fabian Gosebrink

Other Decks in Technology

Featured

Transcript