Skip to content

Instantly share code, notes, and snippets.

View evgenyfedorenko's full-sized avatar

Evgeny Fedorenko evgenyfedorenko

  • Fannie Mae
  • Springfield, VA
View GitHub Profile
...
<tr [ngClass]="getRowClass(row)"
#transaction
(click)="lock(row, $event)"
[model]="row"
ngFor="let row of rows; trackBy:rowIdentity">
</tr>
...
CPU type/Number of rows 1 5 10
Optimal CPU 11ms 40ms 37ms
6x CPU slowdown 81ms 160ms 201ms
...
@Component({
selector: 'list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnChanges {
@Input() rows: Transaction[];
...
@Component({
selector: 'list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent implements OnChanges {
...
@Component({
selector: 'transaction',
templateUrl: './transaction.html',
styleUrls: ['./transaction.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TransactionComponent implements OnChanges {
CPU type/Number of rows 1 5 10
Optimal CPU 11ms 40ms 37ms
6x CPU slowdown 81ms 160ms 201ms
Optimal CPU (change detection optimizations) 17ms 18ms 22ms
6x CPU Slowdown (change detection optimizations) 83ms 99ms 103ms
CPU type/Number of rows 1 5 10
Optimal CPU 11ms 40ms 37ms
6x CPU slowdown 81ms 160ms 201ms
Optimal CPU (change detection optimizations) 17ms 18ms 22ms
6x CPU Slowdown (change detection optimizations) 83ms 99ms 103ms
Optimal CPU (cd optimizations and list modification) 13ms 14ms 18ms
6x CPU Slowdown (cd optimizations and list modification) 83ms 83ms 85ms
import { Injectable } from '@angular/core';
import {
BehaviorSubject,
Observable,
queueScheduler,
} from 'rxjs';
import { observeOn, scan, withLatestFrom, map, distinctUntilChanged } from 'rxjs/operators';
import { reducers } from './reducers';
export interface Action {
...
actions$: BehaviorSubject<Action>;
state$: BehaviorSubject<any>;
constructor() {
this.actions$ = new BehaviorSubject({ type: 'INIT' });
const actionsOnQueue$: Observable<Action> = this.actions$.pipe(observeOn(queueScheduler));
const reducer$: Observable<
ActionReducer<any, any>
> = new BehaviorSubject(reducerFactory(reducers));
function reducerFactory(reducers) {
return function combination(state, action) {
const nextState: any = {};
const reducerKeys = Object.keys(reducers);
for (let i = 0; i < reducerKeys.length; i++) {
const key = reducerKeys[i];
const reducer: any = reducers[key];
nextState[key] = reducer(state[key], action);
}
return nextState;