Skip to content

Commit 1e04931

Browse files
BioPhotonBioPhoton
committed
added initial perf files
1 parent a8e9c9f commit 1e04931

18 files changed

+143386
-0
lines changed

‎.idea/.gitignore

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/misc.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/rx-angular-perf-measures.iml

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
11
# rx-angular-perf-measures
2+
23
Collection of all kind of measurement outcomes regarding load and runtime performance of RxAngualr
4+
5+
## Naming
6+
7+
<test-name>_<variant-name>__<package@semver>*_<package@semver>.<file-extension>
8+
e.g. `[email protected][email protected]__rxLet-hide-show__list-init-1000.json`
9+

‎eager-vs-lazy-template/list-10000.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Update a list of 10000 items
2+
3+
## Statically
4+
5+
```typescript
6+
7+
```
8+
9+
## Async Pipe
10+
11+
```typescript
12+
13+
```
14+
15+
## Push Pipe
16+
17+
```typescript
18+
19+
```
20+
21+
## LetDirective
22+
23+
```typescript
24+
25+
```
26+

‎eager-vs-lazy-template/[email protected]

+1
Large diffs are not rendered by default.

‎eager-vs-lazy-template/[email protected]

+1
Large diffs are not rendered by default.

‎eager-vs-lazy-template/[email protected]

+1
Large diffs are not rendered by default.

‎eager-vs-lazy-template/[email protected]

+1
Large diffs are not rendered by default.

‎passing-values-nested/passing-values-nested.md

+252
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
# Passing Values Nested
2+
3+
## Statically
4+
5+
```typescript
6+
7+
@Component({
8+
selector: 'rxa-recursive-static',
9+
template: `
10+
<ng-container *ngIf="level === 0; else: branch">
11+
<p>Level {{total-level}}</p>
12+
<ng-container *embeddedViewLet="value$; let value">{{value}}<ng-container>
13+
</ng-container>
14+
<ng-template #branch>
15+
<p>Level {{total-level}}</p>
16+
<rxa-recursive-static [total]="total" [level]="level-1" [value]="value"></rxa-recursive-static>
17+
</ng-template>
18+
`,
19+
host: {
20+
class: 'd-flex w-100'
21+
},
22+
providers: [CdHelper],
23+
changeDetection: ChangeDetectionStrategy.OnPush
24+
})
25+
export class RecursiveStaticComponent {
26+
27+
@Input()
28+
set depth(d){
29+
this.total = d;
30+
this.level = this.total -1;
31+
}
32+
33+
@Input()
34+
total = 0;
35+
36+
@Input()
37+
level = 0;
38+
39+
@Input()
40+
value;
41+
42+
}
43+
```
44+
45+
## Observable
46+
47+
```typescript
48+
@Component({
49+
selector: 'rxa-recursive-observable',
50+
template: `
51+
<ng-container *ngIf="level === 0; else: branch">
52+
<p>Level {{total - level}}</p>
53+
<ng-container *embeddedViewLet="value$; let value">{{value}}<ng-container>
54+
</ng-container>
55+
<ng-template #branch>
56+
<p>Level {{total - level}}</p>
57+
<rxa-recursive-observable [total]="total" [level]="level-1" [value$]="value$"></rxa-recursive-observable>
58+
</ng-template>
59+
`,
60+
host: {
61+
class: 'd-flex w-100'
62+
},
63+
changeDetection: ChangeDetectionStrategy.OnPush
64+
})
65+
export class RecursiveObservableComponent {
66+
67+
@Input()
68+
set depth(d) {
69+
this.total = d;
70+
this.level = this.total - 1;
71+
}
72+
73+
@Input()
74+
total = 0;
75+
76+
@Input()
77+
level = 0;
78+
79+
@Input() value$: Observable<any>;
80+
81+
}
82+
```
83+
84+
## Async Pipe
85+
86+
```typescript
87+
@Component({
88+
selector: 'rxa-recursive-async',
89+
template: `
90+
<ng-container *ngIf="level === 0; else: branch">
91+
<p>Level {{total-level}}</p>
92+
{{value$ | async}}
93+
</ng-container>
94+
<ng-template #branch>
95+
<p>Level {{total-level}}</p>
96+
<rxa-recursive-async [total]="total" [level]="level-1" [value]="value$ | async"></rxa-recursive-async>
97+
</ng-template>
98+
`,
99+
host: {
100+
class: 'd-flex w-100'
101+
},
102+
changeDetection: ChangeDetectionStrategy.OnPush
103+
})
104+
export class RecursiveAsyncComponent {
105+
@Input()
106+
set depth(d){
107+
this.total = d;
108+
this.level = this.total -1;
109+
}
110+
111+
@Input()
112+
total = 0;
113+
114+
@Input()
115+
level = 0;
116+
117+
value$ = new Subject();
118+
@Input()
119+
set value(v) {
120+
this.value$.next(v)
121+
};
122+
123+
}
124+
```
125+
126+
## Push Pipe
127+
128+
```typescript
129+
@Component({
130+
selector: 'rxa-recursive-push',
131+
template: `
132+
<ng-container *ngIf="level === 0; else: branch">
133+
<p>Level {{total-level}}</p>
134+
{{value$ | push}}
135+
</ng-container>
136+
<ng-template #branch>
137+
<p>Level {{total-level}}</p>
138+
<rxa-recursive-push [total]="total" [level]="level-1" [value]="value$ | push"></rxa-recursive-push>
139+
</ng-template>
140+
`,
141+
host: {
142+
class: 'd-flex w-100'
143+
},
144+
providers: [CdHelper],
145+
changeDetection: ChangeDetectionStrategy.OnPush
146+
})
147+
export class RecursivePushComponent {
148+
@Input()
149+
set depth(d){
150+
this.total = d;
151+
this.level = this.total -1;
152+
}
153+
154+
@Input()
155+
total = 0;
156+
157+
@Input()
158+
level = 0;
159+
160+
value$ = new Subject();
161+
@Input()
162+
set value(v) {
163+
this.value$.next(v)
164+
};
165+
166+
}
167+
```
168+
169+
## LetDirective - Component based Change Detection
170+
171+
```typescript
172+
@Component({
173+
selector: 'rxa-recursive-component-let',
174+
template: `
175+
<ng-container *ngIf="level === 0; else: branch">
176+
<p>Level {{total-level}}</p>
177+
<rxa-renders *componentLet="value$; let v" [value$]="v"></rxa-renders>
178+
</ng-container>
179+
<ng-template #branch>
180+
<p>Level {{total-level}}</p>
181+
<rxa-recursive-component-let [total]="total" *componentLet="value$; let v" [level]="level-1" [value]="v"></rxa-recursive-component-let>
182+
</ng-template>
183+
`,
184+
host: {
185+
class: 'd-flex w-100'
186+
},
187+
changeDetection: ChangeDetectionStrategy.OnPush
188+
})
189+
export class RecursiveComponentLetComponent {
190+
@Input()
191+
set depth(d){
192+
this.total = d;
193+
this.level = this.total -1;
194+
}
195+
196+
@Input()
197+
total = 0;
198+
199+
@Input()
200+
level = 0;
201+
202+
value$ = new ReplaySubject(1)
203+
@Input()
204+
set value(v) {
205+
this.value$.next(v)
206+
};
207+
208+
}
209+
```
210+
211+
## LetDirective - EmbeddedView based Change Detection
212+
213+
```typescript
214+
@Component({
215+
selector: 'rxa-recursive-embedded-view-let',
216+
template: `
217+
<ng-container *ngIf="level === 0; else: branch">
218+
<p>Level {{total-level}}</p>
219+
<ng-container *componentLet="value$; let value">{{value}}</ng-container>
220+
</ng-container>
221+
<ng-template #branch>
222+
<p>Level {{total-level}}</p>
223+
<rxa-recursive-embedded-view-let [total]="total" *componentLet="value$; let v" [level]="level-1" [value]="v"></rxa-recursive-embedded-view-let>
224+
</ng-template>
225+
`,
226+
host: {
227+
class: 'd-flex w-100'
228+
},
229+
changeDetection: ChangeDetectionStrategy.OnPush
230+
})
231+
export class RecursiveEmbeddedViewLetComponent {
232+
@Input()
233+
set depth(d){
234+
this.total = d;
235+
this.level = this.total -1;
236+
}
237+
238+
@Input()
239+
total = 0;
240+
241+
@Input()
242+
level = 0;
243+
244+
value$ = new ReplaySubject(1)
245+
@Input()
246+
set value(v) {
247+
this.value$.next(v)
248+
};
249+
250+
}
251+
```
252+

0 commit comments

Comments
 (0)