cargdev/angular
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(benchmarks): add targetable benchmarks back

Browse Source
This commit is contained in:
Tobias Bosch
2016-09-02 12:37:22 -07:00
committed by Martin Probst
parent d26a827494
commit b4363bc8af
17 changed files with 574 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
modules/benchmarks/src/largetable/baseline/index.html Normal file
View File

@ -0,0 +1,30 @@
<!doctype html>
<html>
<body>
<h2>Params</h2>
<form>
Cols:
<input type="number" name="cols" placeholder="cols" value="40">
<br>
Rows:
<input type="number" name="rows" placeholder="rows" value="200">
<br>
<button>Apply</button>
</form>
<h2>Baseline Largetable Benchmark</h2>
<p>
<button id="destroyDom">destroyDom</button>
<button id="createDom">createDom</button>
<button id="updateDomProfile">profile updateDom</button>
<button id="createDomProfile">profile createDom</button>
</p>
<div>
<largetable id="root"></largetable>
</div>
<script src="../../bootstrap_plain.js"></script>
</body>
</html>

25
modules/benchmarks/src/largetable/baseline/index.ts Normal file
View File

@ -0,0 +1,25 @@
import {bindAction, profile} from '../../util';
import {buildTable, emptyTable} from '../util';
import {TableComponent} from './table';
export function main() {
var table: TableComponent;
function destroyDom() { table.data = emptyTable; }
function createDom() { table.data = buildTable(); }
function noop() {}
function init() {
table = new TableComponent(document.querySelector('largetable'));
bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom);
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
}
init();
}

64
modules/benchmarks/src/largetable/baseline/table.ts Normal file
View File

@ -0,0 +1,64 @@
import {TableCell} from '../util';
export class TableComponent {
private _renderCells: any[][];
constructor(private _rootEl: any) {}
set data(data: TableCell[][]) {
if (data.length === 0) {
this._destroy();
} else if (this._renderCells) {
this._update(data);
} else {
this._create(data);
}
}
private _destroy() {
while (this._rootEl.lastChild) {
this._rootEl.lastChild.remove();
}
this._renderCells = null;
}
private _update(data: TableCell[][]) {
for (let r = 0; r < data.length; r++) {
const dataRow = data[r];
const renderRow = this._renderCells[r];
for (let c = 0; c < dataRow.length; c++) {
const dataCell = dataRow[c];
const renderCell = renderRow[c];
this._updateCell(renderCell, dataCell);
}
}
}
private _updateCell(renderCell: any, dataCell: TableCell) {
renderCell.textContent = dataCell.value;
}
private _create(data: TableCell[][]) {
const table = document.createElement('table');
this._rootEl.appendChild(table);
const tbody = document.createElement('tbody');
table.appendChild(tbody);
this._renderCells = new Array(data.length);
for (let r = 0; r < data.length; r++) {
const dataRow = data[r];
const tr = document.createElement('tr');
tbody.appendChild(tr);
const renderRow = new Array(dataRow.length);
this._renderCells[r] = renderRow;
for (let c = 0; c < dataRow.length; c++) {
const dataCell = dataRow[c];
const renderCell = document.createElement('td');
if (r % 2 === 0) {
renderCell.style.backgroundColor = 'grey';
}
tr.appendChild(renderCell);
renderRow[c] = renderCell;
this._updateCell(renderCell, dataCell);
}
}
}
}

30
modules/benchmarks/src/largetable/incremental_dom/index.html Normal file
View File

@ -0,0 +1,30 @@
<!doctype html>
<html>
<body>
<h2>Params</h2>
<form>
Cols:
<input type="number" name="cols" placeholder="cols" value="40">
<br>
Rows:
<input type="number" name="rows" placeholder="rows" value="200">
<br>
<button>Apply</button>
</form>
<h2>Incremental-Dom Largetable Benchmark</h2>
<p>
<button id="destroyDom">destroyDom</button>
<button id="createDom">createDom</button>
<button id="updateDomProfile">profile updateDom</button>
<button id="createDomProfile">profile createDom</button>
</p>
<div>
<largetable id="root"></largetable>
</div>
<script src="../../bootstrap_plain.js"></script>
</body>
</html>

25
modules/benchmarks/src/largetable/incremental_dom/index.ts Normal file
View File

@ -0,0 +1,25 @@
import {bindAction, profile} from '../../util';
import {buildTable, emptyTable} from '../util';
import {TableComponent} from './table';
export function main() {
var table: TableComponent;
function destroyDom() { table.data = emptyTable; }
function createDom() { table.data = buildTable(); }
function noop() {}
function init() {
table = new TableComponent(document.querySelector('largetable'));
bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom);
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
}
init();
}

30
modules/benchmarks/src/largetable/incremental_dom/table.ts Normal file
View File

@ -0,0 +1,30 @@
import {TableCell} from '../util';
const {patch, elementOpen, elementClose, elementOpenStart, elementOpenEnd, attr, text} =
require('incremental-dom');
export class TableComponent {
constructor(private _rootEl: any) {}
set data(data: TableCell[][]) { patch(this._rootEl, () => this._render(data)); }
private _render(data: TableCell[][]) {
elementOpen('table');
elementOpen('tbody');
for (let r = 0; r < data.length; r++) {
elementOpen('tr');
const row = data[r];
for (let c = 0; c < row.length; c++) {
elementOpenStart('td');
if (r % 2 === 0) {
attr('style', 'background-color: grey');
}
elementOpenEnd('td');
text(row[c].value);
elementClose('td');
}
elementClose('tr');
}
elementClose('tbody');
elementClose('table');
}
}

30
modules/benchmarks/src/largetable/ng2/index.html Normal file
View File

@ -0,0 +1,30 @@
<!doctype html>
<html>
<body>
<h2>Params</h2>
<form>
Cols:
<input type="number" name="cols" placeholder="cols" value="40">
<br>
Rows:
<input type="number" name="rows" placeholder="rows" value="200">
<br>
<button>Apply</button>
</form>
<h2>Ng2 Largetable Benchmark</h2>
<p>
<button id="destroyDom">destroyDom</button>
<button id="createDom">createDom</button>
<button id="updateDomProfile">profile updateDom</button>
<button id="createDomProfile">profile createDom</button>
</p>
<div>
<largetable id="root"></largetable>
</div>
<script src="../../bootstrap_ng2.js"></script>
</body>
</html>

40
modules/benchmarks/src/largetable/ng2/index.ts Normal file
View File

@ -0,0 +1,40 @@
import {ApplicationRef, NgModule, enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {bindAction, profile} from '../../util';
import {buildTable, emptyTable} from '../util';
import {AppModule, TableComponent} from './table';
export function main() {
var table: TableComponent;
var appRef: ApplicationRef;
function destroyDom() {
table.data = emptyTable;
appRef.tick();
}
function createDom() {
table.data = buildTable();
appRef.tick();
}
function noop() {}
function init() {
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
var injector = ref.injector;
appRef = injector.get(ApplicationRef);
table = appRef.components[0].instance;
bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom);
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
});
}
init();
}

20
modules/benchmarks/src/largetable/ng2/table.ts Normal file
View File

@ -0,0 +1,20 @@
import {Component, Input, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {TableCell, emptyTable} from '../util';
@Component({
selector: 'largetable',
template:
`<table><tbody><tr *ngFor="let row of data; trackBy: trackByIndex"><td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="cell.row % 2 ? '' : 'grey'">{{cell.value}}</td></tr></tbody></table>`
})
export class TableComponent {
@Input()
data: TableCell[][] = emptyTable;
trackByIndex(index: number, item: any) { return index; }
}
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
export class AppModule {
}

30
modules/benchmarks/src/largetable/ng2_switch/index.html Normal file
View File

@ -0,0 +1,30 @@
<!doctype html>
<html>
<body>
<h2>Params</h2>
<form>
Cols:
<input type="number" name="cols" placeholder="cols" value="40">
<br>
Rows:
<input type="number" name="rows" placeholder="rows" value="200">
<br>
<button>Apply</button>
</form>
<h2>Ng2 with NgSwitch Largetable Benchmark</h2>
<p>
<button id="destroyDom">destroyDom</button>
<button id="createDom">createDom</button>
<button id="updateDomProfile">profile updateDom</button>
<button id="createDomProfile">profile createDom</button>
</p>
<div>
<largetable id="root"></largetable>
</div>
<script src="../../bootstrap_ng2.js"></script>
</body>
</html>

40
modules/benchmarks/src/largetable/ng2_switch/index.ts Normal file
View File

@ -0,0 +1,40 @@
import {ApplicationRef, NgModule, enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {bindAction, profile} from '../../util';
import {buildTable, emptyTable} from '../util';
import {AppModule, TableComponent} from './table';
export function main() {
var table: TableComponent;
var appRef: ApplicationRef;
function destroyDom() {
table.data = emptyTable;
appRef.tick();
}
function createDom() {
table.data = buildTable();
appRef.tick();
}
function noop() {}
function init() {
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
var injector = ref.injector;
appRef = injector.get(ApplicationRef);
table = appRef.components[0].instance;
bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom);
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
});
}
init();
}

25
modules/benchmarks/src/largetable/ng2_switch/table.ts Normal file
View File

@ -0,0 +1,25 @@
import {Component, Input, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {TableCell, emptyTable} from '../util';
@Component({
selector: 'largetable',
template: `<table><tbody>
<tr *ngFor="let row of data">
<template ngFor [ngForOf]="row" let-cell>
<ng-container [ngSwitch]="cell.row % 2">
<td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td>
<td *ngSwitchDefault>{{cell.value}}</td>
</ng-container>
</template>
</tr></tbody></table>`
})
export class TableComponent {
@Input()
data: TableCell[][] = emptyTable;
}
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
export class AppModule {
}

42
modules/benchmarks/src/largetable/util.ts Normal file
View File

@ -0,0 +1,42 @@
import {getIntParameter} from '../util';
export class TableCell {
constructor(public row: number, public col: number, public value: string) {}
}
let tableCreateCount: number;
export let maxRow: number;
export let maxCol: number;
let numberData: TableCell[][];
let charData: TableCell[][];
init();
function init() {
maxRow = getIntParameter('rows');
maxCol = getIntParameter('cols');
tableCreateCount = 0;
numberData = [];
charData = [];
for (let r = 0; r <= maxRow; r++) {
const numberRow: TableCell[] = [];
numberData.push(numberRow);
const charRow: TableCell[] = [];
charData.push(charRow);
for (let c = 0; c <= maxCol; c++) {
numberRow.push(new TableCell(r, c, `${c}/${r}`));
charRow.push(new TableCell(r, c, `${charValue(c)}/${charValue(r)}`));
}
}
}
function charValue(i: number): string {
return String.fromCharCode('A'.charCodeAt(0) + (i % 26));
}
export const emptyTable: TableCell[][] = [];
export function buildTable(): TableCell[][] {
tableCreateCount++;
return tableCreateCount % 2 ? numberData : charData;
}