Skip to content

Commit 66f2c4b

Browse files
krausestkrausest
committed
Merge branch 'hbroek-add-reken'
2 parents c04d50c + cd8773a commit 66f2c4b

File tree

5 files changed

+221
-0
lines changed

5 files changed

+221
-0
lines changed

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link href="/css/currentStyle.css" rel="stylesheet" />
7+
</head>
8+
9+
<body>
10+
<div id="main">
11+
<div class="container">
12+
<div class="jumbotron">
13+
<div class="row">
14+
<div class="col-md-6">
15+
<h1>Reken</h1>
16+
</div>
17+
<div class="col-md-6">
18+
<div class="row">
19+
<div class="col-sm-6 smallpad">
20+
<button type="button" class="btn btn-primary btn-block" id="run"
21+
data-action="store.run()">
22+
Create 1,000 rows
23+
</button>
24+
</div>
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="runlots"
27+
data-action="store.runLots()">
28+
Create 10,000 rows
29+
</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="add"
33+
data-action="store.add()">
34+
Append 1,000 rows
35+
</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type="button" class="btn btn-primary btn-block" id="update"
39+
data-action="store.update()">
40+
Update every 10th row
41+
</button>
42+
</div>
43+
<div class="col-sm-6 smallpad">
44+
<button type="button" class="btn btn-primary btn-block" id="clear"
45+
data-action="store.clear()">
46+
Clear
47+
</button>
48+
</div>
49+
<div class="col-sm-6 smallpad">
50+
<button type="button" class="btn btn-primary btn-block" id="swaprows"
51+
data-action="store.swapRows()">
52+
Swap Rows
53+
</button>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
<table class="table table-hover table-striped test-data">
60+
<tbody id="tbody" data-for="row:store.data">
61+
<tr data-class="danger:store.selected===row.item.id">
62+
<td class="col-md-1" data-text="${row.item.id}"></td>
63+
<td class="col-md-4">
64+
<a class="lbl" data-text="${row.item.label}" data-action="store.select(row.item.id)"></a>
65+
</td>
66+
<td class="col-md-1">
67+
<a class="remove" data-action="store.delete(row.item.id)">
68+
<span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span>
69+
</a>
70+
</td>
71+
<td class="col-md-6"></td>
72+
</tr>
73+
</tbody>
74+
</table>
75+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
76+
</div>
77+
</div>
78+
<script src="js/Main.js"></script>
79+
<script src="js/reken.js"></script>
80+
</body>
81+
82+
</html>

‎frameworks/non-keyed/reken/js/Main.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
'use strict';
2+
3+
/* Derived from the vanillajs Main.js, just the Store class */
4+
5+
function _random(max) {
6+
return Math.round(Math.random()*1000)%max;
7+
}
8+
9+
class Store {
10+
constructor() {
11+
this.data = [];
12+
this.backup = null;
13+
this.selected = null;
14+
this.id = 1;
15+
}
16+
buildData(count = 1000) {
17+
var 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"];
18+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
19+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
20+
var data = [];
21+
for (var i = 0; i < count; i++)
22+
data.push({id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
23+
return data;
24+
}
25+
updateData(mod = 10) {
26+
for (let i=0;i<this.data.length;i+=10) {
27+
this.data[i].label += ' !!!';
28+
}
29+
}
30+
delete(id) {
31+
const idx = this.data.findIndex(d => d.id==id);
32+
this.data = this.data.filter((e,i) => i!=idx);
33+
return this;
34+
}
35+
run() {
36+
this.data = this.buildData();
37+
this.selected = null;
38+
}
39+
add() {
40+
this.data = this.data.concat(this.buildData(1000));
41+
this.selected = null;
42+
}
43+
update() {
44+
this.updateData();
45+
this.selected = null;
46+
}
47+
select(id) {
48+
this.selected = id;
49+
}
50+
hideAll() {
51+
this.backup = this.data;
52+
this.data = [];
53+
this.selected = null;
54+
}
55+
showAll() {
56+
this.data = this.backup;
57+
this.backup = null;
58+
this.selected = null;
59+
}
60+
runLots() {
61+
this.data = this.buildData(10000);
62+
this.selected = null;
63+
}
64+
clear() {
65+
this.data = [];
66+
this.selected = null;
67+
}
68+
swapRows() {
69+
if(this.data.length > 998) {
70+
var a = this.data[1];
71+
this.data[1] = this.data[998];
72+
this.data[998] = a;
73+
}
74+
}
75+
}
76+
77+
const store = new Store();
78+
function runXTimes(func, times) {
79+
console.time('XTimes')
80+
const start = performance.now();
81+
for (let i = 0; i<times;i++) {
82+
store.runLots();
83+
reken.force_calculate();
84+
}
85+
const end = performance.now();
86+
const duration = end-start;
87+
const avg = duration/times;
88+
console.timeEnd('XTimes')
89+
console.log(duration, avg)
90+
}

‎frameworks/non-keyed/reken/js/reken.js

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

‎frameworks/non-keyed/reken/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/non-keyed/reken/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "js-framework-benchmark-reken",
3+
"version": "0.9.6",
4+
"description": "Benchmark for Reken framework",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersion": "0.9.6",
8+
"frameworkHomeURL": "https://reken.dev",
9+
"issues": [
10+
1139
11+
]
12+
},
13+
"scripts": {
14+
"dev": "exit 0",
15+
"build-prod": "exit 0"
16+
},
17+
"keywords": [
18+
"Reken",
19+
"HTML first",
20+
"UI",
21+
"UI Framework",
22+
"Reactive",
23+
"DOM",
24+
"DOM Manipulation",
25+
"Zero-Dependency",
26+
"React"
27+
],
28+
"author": "Henry van den Broek",
29+
"license": "MIT",
30+
"homepage": "https://reken.dev",
31+
"repository": {
32+
"type": "git",
33+
"url": "https://github.com/hbroek/reken.git"
34+
}
35+
}

0 commit comments

Comments
 (0)