Skip to content

Commit 3d589e5

Browse files
fabioricalifabioricali
committed
add doz
1 parent 022bdf7 commit 3d589e5

File tree

4 files changed

+168
-0
lines changed

4 files changed

+168
-0
lines changed

‎frameworks/keyed/doz/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+
<title>Doz</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id="main"></div>
10+
<script src="dist/index.js"></script>
11+
</body>
12+
</html>

‎frameworks/keyed/doz/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "js-framework-benchmark-doz",
3+
"version": "1.0.0",
4+
"description": "Doz benchmark",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "doz"
8+
},
9+
"scripts": {
10+
"build-dev": "parcel watch src/index.js --no-cache",
11+
"build-prod": "parcel build src/index.js --no-cache"
12+
},
13+
"keywords": [
14+
"doz",
15+
"benchmark"
16+
],
17+
"author": "Fabio Ricali",
18+
"license": "MIT",
19+
"homepage": "https://github.com/krausest/js-framework-benchmark",
20+
"repository": {
21+
"type": "git",
22+
"url": "https://github.com/krausest/js-framework-benchmark.git"
23+
},
24+
"devDependencies": {
25+
"parcel-bundler": "1.10.1"
26+
},
27+
"dependencies": {
28+
"doz": "1.6.4"
29+
}
30+
}

‎frameworks/keyed/doz/src/index.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import Doz from 'doz'
2+
import utils from './utils.js'
3+
4+
let currentBench = "";
5+
6+
new Doz({
7+
mixin: utils,
8+
root: '#main',
9+
store: 'list',
10+
props: {
11+
rows: []
12+
},
13+
template(h) {
14+
return h`
15+
<div class="container">
16+
<div class="jumbotron">
17+
<div class="row">
18+
<div class="col-md-6">
19+
<h1>Doz keyed</h1>
20+
</div>
21+
<div class="col-md-6">
22+
<div class="row">
23+
<div class="col-sm-6 smallpad">
24+
<button type='button' class='btn btn-primary btn-block' onclick='this.run(1)'>Create 1,000 rows</button>
25+
</div>
26+
<div class="col-sm-6 smallpad">
27+
<button type='button' class='btn btn-primary btn-block' onclick='this.runLots(1000)'>Create 10,000 rows</button>
28+
</div>
29+
<div class="col-sm-6 smallpad">
30+
<button type='button' class='btn btn-primary btn-block' onclick='this.add()'>Append 1,000 rows</button>
31+
</div>
32+
<div class="col-sm-6 smallpad">
33+
<button type='button' class='btn btn-primary btn-block' onclick='this.update()'>Update every 10th row</button>
34+
</div>
35+
<div class="col-sm-6 smallpad">
36+
<button type='button' class='btn btn-primary btn-block' onclick='this.clear()'>Clear</button>
37+
</div>
38+
<div class="col-sm-6 smallpad">
39+
<button type='button' class='btn btn-primary btn-block' onclick='this.swapRows()'>Swap Rows</button>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
<table class="table table-hover table-striped test-data">
46+
<tbody>
47+
${this.each(this.props.rows, row => `
48+
<tr>
49+
<td class="col-md-1">${row.id}</td>
50+
<td class="col-md-4">${row.label}</td>
51+
<td class="col-md-1">
52+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
53+
</td>
54+
<td class="col-md-6"></td>
55+
</tr>`
56+
)}
57+
</tbody>
58+
</table>
59+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
60+
</div>
61+
`
62+
},
63+
64+
onCreate() {
65+
this.currentBench = '';
66+
},
67+
68+
onUpdate() {
69+
console.log('update', this.currentBench);
70+
console.timeEnd(this.currentBench);
71+
}
72+
});

‎frameworks/keyed/doz/src/utils.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
'use strict';
2+
const _random = (max) => {
3+
return Math.round(Math.random() * 1000) % max;
4+
};
5+
const updateData = (data, mod = 10) => {
6+
const newData = [...data];
7+
for (let i = 0; i < newData.length; i += 10) {
8+
newData[i] = Object.assign({}, newData[i], {label: newData[i].label + ' !!!'});
9+
}
10+
return newData
11+
};
12+
const buildData = (id, count = 1000) => {
13+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
14+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
15+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
16+
const data = [];
17+
for (let i = 0; i < count; i++)
18+
data.push({
19+
id: id++,
20+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
21+
});
22+
return {data, id};
23+
};
24+
25+
module.exports = {
26+
add(id, data) {
27+
const newData = buildData(id, 1000);
28+
return {data: [...data, ...newData.data], id: newData.id};
29+
},
30+
run(id) {
31+
console.time(this.currentBench = 'run');
32+
this.getStore('list').rows = buildData(id).data;
33+
},
34+
runLots(id) {
35+
return buildData(id, 10000);
36+
},
37+
update(data) {
38+
return updateData(data);
39+
},
40+
swapRows(data) {
41+
const newData = [...data];
42+
if (newData.length > 998) {
43+
let temp = newData[1];
44+
newData[1] = newData[998];
45+
newData[998] = temp;
46+
}
47+
return newData;
48+
},
49+
deleteRow(data, id) {
50+
return data.filter(d => {
51+
return d.id !== id
52+
});
53+
}
54+
};

0 commit comments

Comments
 (0)