Skip to content

Commit 2f5872e

Browse files
author
Frank van Viegen
committed
Added keyed/aberdeen framework
1 parent 59854ac commit 2f5872e

File tree

6 files changed

+293
-0
lines changed

6 files changed

+293
-0
lines changed

‎frameworks/keyed/aberdeen/build-dummy-data.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
export function _random(max) {
2+
return Math.round(Math.random() * 1000) % max;
3+
}
4+
5+
const adjectives = [
6+
'pretty',
7+
'large',
8+
'big',
9+
'small',
10+
'tall',
11+
'short',
12+
'long',
13+
'handsome',
14+
'plain',
15+
'quaint',
16+
'clean',
17+
'elegant',
18+
'easy',
19+
'angry',
20+
'crazy',
21+
'helpful',
22+
'mushy',
23+
'odd',
24+
'unsightly',
25+
'adorable',
26+
'important',
27+
'inexpensive',
28+
'cheap',
29+
'expensive',
30+
'fancy'
31+
];
32+
const colors = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
33+
34+
const nouns = [
35+
'table',
36+
'chair',
37+
'house',
38+
'bbq',
39+
'desk',
40+
'car',
41+
'pony',
42+
'cookie',
43+
'sandwich',
44+
'burger',
45+
'pizza',
46+
'mouse',
47+
'keyboard'
48+
];
49+
50+
let id = 1;
51+
52+
export function buildData(count = 1000) {
53+
54+
const data = [];
55+
56+
for (let i = 0; i < count; i++) {
57+
const adjective = adjectives[_random(adjectives.length)];
58+
const color = colors[_random(colors.length)];
59+
const noun = nouns[_random(nouns.length)];
60+
const label = `${adjective} ${color} ${noun}`;
61+
62+
data.push({ id, label });
63+
64+
id++;
65+
}
66+
67+
return data;
68+
}

‎frameworks/keyed/aberdeen/idiomatic.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {$, copy, ref, proxy, onEach} from "./dist-min/aberdeen.js";
2+
import { buildData } from "./build-dummy-data.js";
3+
4+
const data = proxy([]); // [{id, label}, ...]
5+
const selected = proxy({}); // {[selectedId]: true} or {}
6+
7+
// Aberdeen mounts on document.body by default.
8+
$('div', {id: "main"}, 'div.container', () => {
9+
10+
// The buttons
11+
$('div.jumbotron', 'div.row', () => {
12+
$('div.col-md-6', 'h1:Aberdeen-"keyed"');
13+
$('div.col-md-6', 'div.row', () => {
14+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Create 1,000 rows', {
15+
type: "button",
16+
id: "run",
17+
click: () => data.splice(0, data.length, ...buildData())
18+
});
19+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Create 10,000 rows', {
20+
type: "button",
21+
id: "runlots",
22+
click: () => data.splice(0, data.length, ...buildData(10000))
23+
});
24+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Append 1,000 rows', {
25+
type: "button",
26+
id: "add",
27+
click: () => data.push(...buildData())
28+
});
29+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Update every 10th row', {
30+
type: "button",
31+
id: "update",
32+
click: () => {
33+
for(let i=0; i<data.length; i+=10) {
34+
data[i].label += ' !!!';
35+
}
36+
}
37+
});
38+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Clear', {
39+
type: "button",
40+
id: "clear",
41+
click: () => data.length = 0
42+
});
43+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Swap Rows', {
44+
type: "button",
45+
id: "swaprows",
46+
click: () => {
47+
if (data.length > 998) [data[1], data[998]] = [data[998], data[1]];
48+
}
49+
});
50+
});
51+
});
52+
53+
// The table
54+
$('table.table.table-hover.table-striped.test-data', 'tbody', () => {
55+
onEach(data, (item, index) => {
56+
$('tr', () => {
57+
$({".danger": selected[item.id]})
58+
$('td.col-md-1:'+item.id);
59+
$('td.col-md-4', 'a', {text: ref(item,'label')}, {
60+
click: function() {
61+
copy(selected, {[item.id]: true})
62+
}
63+
});
64+
$('td.col-md-1', 'a', 'span.glyphicon.glyphicon-remove', {
65+
"aria-hidden": "true",
66+
click: () => {
67+
// This is very slow, as all later items need to be recreated.
68+
data.splice(index, 1);
69+
}
70+
});
71+
$('td.col-md-6');
72+
});
73+
})
74+
});
75+
});

‎frameworks/keyed/aberdeen/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Aberdeen-"keyed"</title>
7+
<link href="/css/currentStyle.css" rel="stylesheet" />
8+
<script type="module" src="main.js"></script>
9+
</head>
10+
<body>
11+
</body>
12+
</html>

‎frameworks/keyed/aberdeen/main.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/**
2+
* This implementation uses a sprinkle of non-idiomatic optimization, as the
3+
* delete-row operation doesn't combine well with the row-position based
4+
* operations (swap and update) in Aberdeen.
5+
*
6+
* Aberdeen excels at showing changing list of things in some specified
7+
* sort order (which would be just as fast as sorting by array index, as
8+
* demonstrated by the sort-by-label bonus feature), and doing modifications
9+
* by id. (Which seems a lot more common than what js-framework-benchmark
10+
* wants?)
11+
*
12+
* The idiomatic implementation (with very slow deletes) is in `idiomatic.js`.
13+
*/
14+
15+
import {$, copy, ref, proxy, onEach} from "./dist/aberdeen.js";
16+
import { buildData } from "./build-dummy-data.js";
17+
18+
const unproxiedData = []; // [{id, label}, ...]
19+
const data = proxy(unproxiedData); // [{id, label}, ...]
20+
const selected = proxy({}); // {[selectedId]: true} or {}
21+
const sortByLabel = proxy(false);
22+
23+
// Aberdeen mounts on document.body by default.
24+
$('div', {id: "main"}, 'div.container', () => {
25+
26+
// The buttons
27+
$('div.jumbotron', 'div.row', () => {
28+
$('div.col-md-6', () => {
29+
$('h1:Aberdeen-"keyed"');
30+
$('div.checkbox', 'label', () => {
31+
$('input', {type: 'checkbox'}, {bind: sortByLabel})
32+
$(":Sort by label");
33+
});
34+
})
35+
$('div.col-md-6', 'div.row', () => {
36+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Create 1,000 rows', {
37+
type: "button",
38+
id: "run",
39+
click: () => copy(data, buildData())
40+
});
41+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Create 10,000 rows', {
42+
type: "button",
43+
id: "runlots",
44+
click: () => copy(data, buildData(10000))
45+
});
46+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Append 1,000 rows', {
47+
type: "button",
48+
id: "add",
49+
click: () => data.push(...buildData())
50+
});
51+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Update every 10th row', {
52+
type: "button",
53+
id: "update",
54+
click: () => {
55+
// We need to iterate, because our array can be sparse due to deletes.
56+
// For performance, we're scanning through the unproxied version of our data.
57+
let cnt = 0;
58+
for(let i=0; i<unproxiedData.length; i++) {
59+
if (unproxiedData[i]) {
60+
if (!(cnt++ % 10)) data[i].label += ' !!!';
61+
}
62+
}
63+
}
64+
});
65+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Clear', {
66+
type: "button",
67+
id: "clear",
68+
click: () => data.length = 0
69+
});
70+
$('div.col-sm-6.smallpad', 'button.btn.btn-primary.btn-block:Swap Rows', {
71+
type: "button",
72+
id: "swaprows",
73+
click: () => {
74+
// We need to iterate, because our array can be sparse due to deletes.
75+
// For performance, we're scanning through the unproxied version of our data.
76+
let cnt = 0, first, second;
77+
for(let i=0; i<unproxiedData.length; i++) {
78+
if (unproxiedData[i]) {
79+
if (cnt === 1) first = i;
80+
else if (cnt === 998) {
81+
second = i;
82+
[data[first], data[second]] = [data[second], data[first]];
83+
break;
84+
}
85+
cnt++;
86+
}
87+
}
88+
}
89+
});
90+
});
91+
});
92+
93+
// The table
94+
$('table.table.table-hover.table-striped.test-data', 'tbody', () => {
95+
onEach(data, (item, index) => {
96+
$('tr', () => {
97+
$(() => {
98+
if (selected[item.id]) $('.danger');
99+
})
100+
$('td.col-md-1:'+item.id);
101+
$('td.col-md-4', 'a', {text: ref(item,'label')}, {
102+
click: function() {
103+
copy(selected, {[item.id]: true})
104+
}
105+
});
106+
$('td.col-md-1', 'a', 'span.glyphicon.glyphicon-remove', {
107+
"aria-hidden": "true",
108+
click: () => delete data[index]
109+
});
110+
$('td.col-md-6');
111+
});
112+
}, sortByLabel.value ? item=>item.label : undefined);
113+
});
114+
});

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

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

‎frameworks/keyed/aberdeen/package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "js-framework-benchmark-aberdeen",
3+
"version": "1.0.0",
4+
"js-framework-benchmark": {
5+
"frameworkVersion": "1.0.0",
6+
"frameworkHomeURL": "https://aberdeenjs.org"
7+
},
8+
"scripts": {
9+
"dev": "exit 0",
10+
"build-prod": "exit 0"
11+
}
12+
}

0 commit comments

Comments
 (0)