Skip to content

Commit 51828ed

Browse files
krausestkrausest
committed
Merge branch 'master' of github.com:krausest/js-framework-benchmark
2 parents bb3f002 + 9e82910 commit 51828ed

File tree

12 files changed

+539
-0
lines changed

12 files changed

+539
-0
lines changed

‎frameworks/keyed/doohtml/index.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>DooHTML</title>
6+
<link href="/css/currentStyle.css" rel="preload" as="style"/>
7+
<link href="/css/currentStyle.css" rel="stylesheet"/>
8+
<link href="./js/doo.html.min.js" rel="preload" as="script"/>
9+
<script src="./js/doo.html.min.js"></script>
10+
<script type="module" src="./js/Main.class.js" defer ></script>
11+
</head>
12+
<body>
13+
<div id="main">
14+
<div class="container">
15+
<div class="jumbotron">
16+
<div class="row">
17+
<div class="col-md-6">
18+
<h1>DooHTML - keyed</h1><span class="ver"></span>
19+
</div>
20+
<div class="col-md-6">
21+
<div class="row">
22+
<div class="col-sm-6 smallpad">
23+
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
24+
</div>
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
27+
</div>
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
33+
</div>
34+
<div class="col-sm-6 smallpad">
35+
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
<doo-main
45+
context="shadow"
46+
link="/css/currentStyle.css"
47+
bind="rows"
48+
template="./templates/main.html"
49+
></doo-main>
50+
</div>
51+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
52+
</div>
53+
</body>
54+
</html>

‎frameworks/keyed/doohtml/js/Main.class.js

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
'use strict'
2+
3+
const _random = max => Math.random() * max | 0
4+
5+
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"]
6+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]
7+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]
8+
9+
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
10+
11+
Doo.define(
12+
class Main extends Doo {
13+
constructor() {
14+
super(100)
15+
this.scrollTarget = '.table'
16+
this.defaultDataSet = 'rows'
17+
this.ID = 1
18+
this.data = {
19+
[this.defaultDataSet]: []
20+
}
21+
this.add = this.add.bind(this)
22+
this.run = this.run.bind(this)
23+
this.runLots = this.runLots.bind(this)
24+
this.update = this.update.bind(this)
25+
this.clear = this.clear.bind(this)
26+
this.swaprows = this.swapRows.bind(this)
27+
this.addEventListeners()
28+
this.selectedRow = undefined
29+
document.querySelector(".ver").innerHTML += ` ${Doo.version} (keyed)`
30+
document.title += ` ${Doo.version} (keyed)`
31+
}
32+
33+
async dooAfterRender() {
34+
this.tbody = this.shadow.querySelector('#tbody')
35+
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
36+
e.preventDefault()
37+
if (e.target.parentElement.matches('.remove')) {
38+
this.delete(e.target.parentElement)
39+
} else if (e.target.tagName === 'A') {
40+
this.select(e.target)
41+
}
42+
})
43+
}
44+
45+
getParentRow(elem) {
46+
while (elem) {
47+
if (elem.tagName === "TR") {return elem}
48+
elem = elem.parentNode
49+
}
50+
return undefined
51+
}
52+
53+
buildData(count = 1000) {
54+
const data = []
55+
for (let i = 0; i < count; i++) {
56+
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
57+
}
58+
return data
59+
}
60+
61+
getIndex(row) {
62+
let idx = this.data.rows.findIndex((item, i) => {
63+
if (item.id === row.key) {
64+
return i
65+
}
66+
})
67+
return idx
68+
}
69+
70+
getIndex(row) {
71+
let idx = this.data.rows.findIndex((item, i) => {
72+
if (item.id === row.key) {
73+
return i
74+
}
75+
})
76+
return idx
77+
}
78+
79+
delete(elem) {
80+
let row = this.getParentRow(elem)
81+
if (row) {
82+
let idx = this.getIndex(row)
83+
this.tbody.removeChild(row)
84+
if (idx !== undefined) {
85+
this.data.rows.splice(idx,1)
86+
}
87+
}
88+
}
89+
90+
run() {
91+
this.clear()
92+
this.data.rows = this.buildData()
93+
this.renderTable()
94+
}
95+
96+
add() {
97+
let start = this.data.rows.length
98+
this.data.rows = this.data.rows.concat(this.buildData())
99+
this.append(this.data.rows, this.tbody, start)
100+
}
101+
102+
runLots() {
103+
this.clear()
104+
this.data.rows = this.buildData(10000)
105+
this.renderTable()
106+
}
107+
108+
update() {
109+
for (let i=0, len = this.data.rows.length;i<len;i+=10) {
110+
this.tbody.childNodes[i].childNodes[1].childNodes[0].innerText = this.data.rows[i].label += ' !!!'
111+
}
112+
}
113+
114+
select(elem) {
115+
if (this.selectedRow) {
116+
this.selectedRow.classList.remove('danger')
117+
this.selectedRow = undefined
118+
}
119+
this.toggleSelect(this.getParentRow(elem))
120+
}
121+
122+
toggleSelect(elem) {
123+
let row = this.getParentRow(elem)
124+
if (row) {
125+
row.classList.toggle('danger')
126+
if (row.classList.contains('danger')) {
127+
this.selectedRow = row
128+
}
129+
}
130+
}
131+
132+
clear() {
133+
this.data.rows = []
134+
this.tbody.textContent = ''
135+
}
136+
137+
swapRows() {
138+
if (this.data.rows.length > 998) {
139+
let node1 = this.tbody.firstChild.nextSibling,
140+
node2 = node1.nextSibling,
141+
node998 = this.tbody.childNodes[998],
142+
node999 = node998.nextSibling,
143+
row1 = this.data.rows[1]
144+
145+
this.data.rows[1] = this.data.rows[998];
146+
this.data.rows[998] = row1
147+
148+
this.tbody.insertBefore(node998, node2)
149+
this.tbody.insertBefore(node1, node999)
150+
}
151+
}
152+
153+
addEventListeners() {
154+
document.getElementById("main").addEventListener('click', e => {
155+
e.preventDefault()
156+
if (e.target.matches('#runlots')) {
157+
this.runLots()
158+
} else if (e.target.matches('#run')) {
159+
this.run()
160+
} else if (e.target.matches('#add')) {
161+
this.add()
162+
} else if (e.target.matches('#update')) {
163+
this.update()
164+
} else if (e.target.matches('#clear')) {
165+
this.clear()
166+
} else if (e.target.matches('#swaprows')) {
167+
this.swapRows()
168+
}
169+
})
170+
}
171+
}
172+
)

‎frameworks/keyed/doohtml/js/doo.html.min.js

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

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

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

‎frameworks/keyed/doohtml/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "js-framework-benchmark-doohtml",
3+
"version": "0.80.2",
4+
"description": "DooHTML JS-Benchmark",
5+
"main": "Main.class.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersion": "",
8+
"frameworkHomeURL": "https://doohtml.com",
9+
"useShadowRoot": true,
10+
"shadowRootName": "doo-main",
11+
"buttonsInShadowRoot": false,
12+
"issues": [772, 1139]
13+
},
14+
"scripts": {
15+
"build-dev": "exit 0",
16+
"build-prod": "exit 0"
17+
},
18+
"keywords": [],
19+
"author": "Henrik Javen",
20+
"license": "Apache-2.0",
21+
"homepage": "https://doohtml.com",
22+
"repository": {
23+
"type": "git",
24+
"url": "https://github.com/hman61/js-framework-benchmark"
25+
}
26+
}
27+

‎frameworks/keyed/doohtml/templates/main.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<template>
3+
<table class="table table-hover table-striped test-data">
4+
<link href="${link}" rel="stylesheet">
5+
<tbody id="tbody"><tr bind="rows"><td class="col-md-1">{{id}}</td><td class="col-md-4"><a>{{label}}</a></td><td class="col-md-1"><a class="remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr></tbody>
6+
</table>
7+
</template>

‎frameworks/non-keyed/doohtml/index.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>DooHTML</title>
6+
<link href="/css/currentStyle.css" rel="preload" as="style"/>
7+
<link href="/css/currentStyle.css" rel="stylesheet"/>
8+
<link href="./js/doo.html.min.js" rel="preload" as="script"/>
9+
<script src="./js/doo.html.min.js"></script>
10+
<script type="module" src="./js/Main.class.js" defer ></script>
11+
</head>
12+
<body>
13+
<div id="main">
14+
<div class="container">
15+
<div class="jumbotron">
16+
<div class="row">
17+
<div class="col-md-6">
18+
<h1>DooHTML - non-keyed</h1><span class="ver"></span>
19+
</div>
20+
<div class="col-md-6">
21+
<div class="row">
22+
<div class="col-sm-6 smallpad">
23+
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
24+
</div>
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
27+
</div>
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
33+
</div>
34+
<div class="col-sm-6 smallpad">
35+
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
<doo-main
45+
context="shadow"
46+
link="/css/currentStyle.css"
47+
bind="rows"
48+
template="./templates/main.html"
49+
></doo-main>
50+
</div>
51+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
52+
</div>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)