Skip to content

Commit f20da44

Browse files
krausestkrausest
committed
Merge branch 'add-oldscull-benchmark' of https://github.com/alexeyoganezov/js-framework-benchmark into alexeyoganezov-add-oldscull-benchmark
2 parents d767423 + 81a1298 commit f20da44

File tree

13 files changed

+1497
-0
lines changed

13 files changed

+1497
-0
lines changed

‎frameworks/keyed/oldskull/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Old Skull Framework</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'>
10+
11+
</div>
12+
<script src='/frameworks/keyed/oldskull/dist/main.js'></script>
13+
</body>
14+
</html>

‎frameworks/keyed/oldskull/package-lock.json‎

Lines changed: 1135 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/oldskull/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "js-framework-benchmark-oldscull",
3+
"version": "0.1.0",
4+
"description": "Old Skull Framework benchmark",
5+
"main": "index.js",
6+
"scripts": {
7+
"build-prod": "webpack"
8+
},
9+
"author": "Alexey Oganezov <[email protected]>",
10+
"license": "MIT",
11+
"devDependencies": {
12+
"ts-loader": "9.1.2",
13+
"typescript": "4.2.4",
14+
"webpack": "5.37.0",
15+
"webpack-cli": "4.7.0"
16+
},
17+
"js-framework-benchmark": {
18+
"frameworkVersion": "0.1.2"
19+
},
20+
"dependencies": {
21+
"oldskull": "0.1.2"
22+
}
23+
}

‎frameworks/keyed/oldskull/src/Application.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { OsfApplication } from 'oldskull';
2+
3+
import { BenchmarkController } from './BenchmarkController';
4+
5+
export class Application extends OsfApplication {
6+
async init(): Promise<void> {
7+
const controller = new BenchmarkController();
8+
await this.mainRegion.show(controller);
9+
}
10+
}

‎frameworks/keyed/oldskull/src/BenchmarkController.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {
2+
OsfModel,
3+
OsfCollection,
4+
OsfPresenter,
5+
} from 'oldskull';
6+
7+
import { ItemModel } from './ItemModel';
8+
import { BenchmarkView } from './BenchmarkView';
9+
10+
export interface IData {
11+
items: OsfCollection<ItemModel>,
12+
}
13+
14+
export class BenchmarkController extends OsfPresenter<OsfModel<IData>, BenchmarkView> {
15+
model = new OsfModel({
16+
items: new OsfCollection<ItemModel>(),
17+
});
18+
view = new BenchmarkView(this.model);
19+
}

‎frameworks/keyed/oldskull/src/BenchmarkView.ts‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import {
2+
OsfModel,
3+
OsfRegion,
4+
OsfModelView,
5+
} from 'oldskull';
6+
7+
import type { IData } from './BenchmarkController';
8+
import { ItemView } from './ItemView';
9+
import { ItemModel } from './ItemModel';
10+
import { ItemCollectionView } from './ItemCollectionView';
11+
import { getData } from './utils';
12+
13+
export class BenchmarkView extends OsfModelView<OsfModel<IData>> {
14+
getHTML() {
15+
return `
16+
<div class="container">
17+
<div class="jumbotron">
18+
<div class="row">
19+
<div class="col-md-6">
20+
<h1>Old Skull Framework</h1>
21+
</div>
22+
<div class="col-md-6">
23+
<div class="row">
24+
<div class="col-sm-6 smallpad">
25+
<button type='button' class='btn btn-primary btn-block' id='run'>Create 1,000 rows</button>
26+
</div>
27+
<div class="col-sm-6 smallpad">
28+
<button type='button' class='btn btn-primary btn-block' id='runlots'>Create 10,000 rows</button>
29+
</div>
30+
<div class="col-sm-6 smallpad">
31+
<button type='button' class='btn btn-primary btn-block' id='add'>Append 1,000 rows</button>
32+
</div>
33+
<div class="col-sm-6 smallpad">
34+
<button type='button' class='btn btn-primary btn-block' id='update'>Update every 10th row</button>
35+
</div>
36+
<div class="col-sm-6 smallpad">
37+
<button type='button' class='btn btn-primary btn-block' id='clear'>Clear</button>
38+
</div>
39+
<div class="col-sm-6 smallpad">
40+
<button type='button' class='btn btn-primary btn-block' id='swaprows'>Swap Rows</button>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
<table class="table table-hover table-striped test-data">
47+
48+
</table>
49+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
50+
</div>`;
51+
}
52+
tableRegion = new OsfRegion(this, 'table');
53+
domEvents = [
54+
{
55+
el: '#run', on: 'click', call: this.createThousandRows.bind(this),
56+
},
57+
{
58+
el: '#runlots', on: 'click', call: this.createTenThousandRows.bind(this),
59+
},
60+
{
61+
el: '#add', on: 'click', call: this.appendThousandRows.bind(this),
62+
},
63+
{
64+
el: '#update', on: 'click', call: this.updateEveryTenthRow.bind(this),
65+
},
66+
{
67+
el: '#clear', on: 'click', call: this.clear.bind(this),
68+
},
69+
{
70+
el: '#swaprows', on: 'click', call: this.swap.bind(this),
71+
},
72+
];
73+
async afterInit() {
74+
const itemsCollectionView = new ItemCollectionView(this.model.attrs.items, ItemView);
75+
await this.tableRegion.show(itemsCollectionView);
76+
}
77+
createThousandRows(): void {
78+
const items = getData(1000);
79+
const models = items.map(item => new ItemModel(item));
80+
this.model.attrs.items.set(models, true);
81+
}
82+
createTenThousandRows(): void {
83+
const items = getData(10000);
84+
const models = items.map(item => new ItemModel(item));
85+
this.model.attrs.items.set(models, true);
86+
}
87+
appendThousandRows() {
88+
const items = getData(1000);
89+
const models = items.map(item => new ItemModel(item));
90+
this.model.attrs.items.add(models);
91+
}
92+
updateEveryTenthRow() {
93+
const models = this.model.attrs.items.models;
94+
for (let i = 0; i < models.length; i += 10) {
95+
const model = models[i];
96+
model.set({
97+
id: model.attrs.id,
98+
label: `${model.attrs.label} !!!`,
99+
});
100+
}
101+
}
102+
clear() {
103+
this.model.attrs.items.set([], true);
104+
}
105+
swap() {
106+
if (this.tableRegion.view && this.tableRegion.view instanceof ItemCollectionView) {
107+
this.tableRegion.view.swap();
108+
}
109+
}
110+
}

‎frameworks/keyed/oldskull/src/ItemCollectionView.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {
2+
OsfView,
3+
OsfCollectionView,
4+
MODEL_ADDED_EVENT,
5+
COLLECTION_RESETED_EVENT,
6+
} from 'oldskull';
7+
8+
import { ItemModel } from './ItemModel';
9+
import { ItemView } from './ItemView';
10+
import { insertAfter } from './utils';
11+
12+
export class ItemCollectionView extends OsfCollectionView<ItemModel, ItemView, OsfView> {
13+
collectionEvents = [
14+
{ on: MODEL_ADDED_EVENT, call: this.handleAdd },
15+
{ on: COLLECTION_RESETED_EVENT, call: this.handleReset },
16+
];
17+
childViewEvents = [
18+
{
19+
on: 'unhighlight', call: this.unhighlight.bind(this),
20+
},
21+
];
22+
getHTML(): string {
23+
return `<tbody id="tbody"></tbody>`;
24+
}
25+
async handleAdd(model: unknown) {
26+
await this.addChildView(<ItemModel>model);
27+
}
28+
async handleReset() {
29+
this.removeAllChildViews();
30+
this.addChildView(this.collection.models);
31+
}
32+
unhighlight() {
33+
this.children.forEach((child: ItemView) => child.unhighlight());
34+
}
35+
swap() {
36+
if(this.children.length > 998) {
37+
const view0 = this.children[0];
38+
const view1 = this.children[1];
39+
const view997 = this.children[997];
40+
const view998 = this.children[998];
41+
if (
42+
view0.el &&
43+
view1.el &&
44+
view997.el &&
45+
view998.el
46+
) {
47+
insertAfter(view998.el, view0.el);
48+
insertAfter(view1.el, view997.el);
49+
const cache = this.children[1];
50+
this.children[1] = this.children[998];
51+
this.children[998] = cache;
52+
}
53+
}
54+
}
55+
}

‎frameworks/keyed/oldskull/src/ItemModel.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { OsfModel } from 'oldskull';
2+
3+
interface IItem {
4+
id: number;
5+
label: string;
6+
}
7+
8+
export class ItemModel extends OsfModel<IItem> {
9+
getId(): number {
10+
return this.attrs.id;
11+
}
12+
}

‎frameworks/keyed/oldskull/src/ItemView.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import {
2+
OsfModelView,
3+
OsfReference,
4+
MODEL_CHANGED_EVENT,
5+
} from 'oldskull';
6+
7+
import { ItemModel } from './ItemModel';
8+
9+
export class ItemView extends OsfModelView<ItemModel> {
10+
getHTML(): string {
11+
const m = this.model.attrs;
12+
return `
13+
<tr>
14+
<td class='col-md-1'>
15+
${ m.id }
16+
</td>
17+
<td class='col-md-4'>
18+
<a class='lbl'>
19+
${ m.label }
20+
</a>
21+
</td>
22+
<td class='col-md-1'>
23+
<a class='remove'><span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span></a>
24+
</td>
25+
<td class='col-md-6'>
26+
27+
</td>
28+
</tr>
29+
30+
`;
31+
}
32+
modelEvents = [
33+
{ on: MODEL_CHANGED_EVENT, call: this.updateLabel.bind(this) },
34+
];
35+
domEvents = [
36+
{ el: '.lbl', on: 'click', call: this.highlight.bind(this) },
37+
{ el: '.remove', on: 'click', call: this.remove.bind(this) },
38+
];
39+
label = new OsfReference(this, '.lbl');
40+
updateLabel() {
41+
const el = this.label.get();
42+
if (el) {
43+
el.innerHTML = this.model.attrs.label;
44+
}
45+
}
46+
highlight() {
47+
if (this.el) {
48+
this.trigger('unhighlight');
49+
this.el.classList.add('danger');
50+
}
51+
}
52+
unhighlight() {
53+
if (this.el) {
54+
this.el.classList.remove('danger');
55+
}
56+
}
57+
}

‎frameworks/keyed/oldskull/src/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { Application } from './Application';
2+
3+
const app = new Application('#main');
4+
app.init();

0 commit comments

Comments
 (0)