Skip to content

Commit 8c38b3c

Browse files
CodeMonkeyAlphaCodeMonkeyAlpha
committed
Added ResonateJS to the Keyed Benchmarks
1 parent d958202 commit 8c38b3c

File tree

5 files changed

+207
-0
lines changed

5 files changed

+207
-0
lines changed

‎frameworks/keyed/resonatejs/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>ResonateJS</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet" />
7+
<script src="dist/resonate.js" resonate-routing="clean"></script>
8+
<script src="dist/main.js"></script>
9+
</head>
10+
<body>
11+
<div id="main">
12+
<div class="container">
13+
<div class="jumbotron">
14+
<div class="row">
15+
<div class="col-md-6">
16+
<h1>ResonateJS</h1>
17+
</div>
18+
<div class="col-md-6">
19+
<div class="row">
20+
<div class="col-sm-6 smallpad">
21+
<button type="button" class="btn btn-primary btn-block" id="run" onclick="{run()}">Create 1,000 rows</button>
22+
</div>
23+
<div class="col-sm-6 smallpad">
24+
<button type="button" class="btn btn-primary btn-block" id="runlots" onclick="{runLots()}">Create 10,000 rows</button>
25+
</div>
26+
<div class="col-sm-6 smallpad">
27+
<button type="button" class="btn btn-primary btn-block" id="add" onclick="{add()}">Append 1,000 rows</button>
28+
</div>
29+
<div class="col-sm-6 smallpad">
30+
<button type="button" class="btn btn-primary btn-block" id="update" onclick="{update()}">Update every 10th row</button>
31+
</div>
32+
<div class="col-sm-6 smallpad">
33+
<button type="button" class="btn btn-primary btn-block" id="clear" onclick="{clear()}">Clear</button>
34+
</div>
35+
<div class="col-sm-6 smallpad">
36+
<button type="button" class="btn btn-primary btn-block" id="swaprows" onclick="{swapRows()}">Swap Rows</button>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
<table class="table table-hover table-striped test-data">
43+
<tbody>
44+
<tr foreach="{item in data}" class="{{'danger': $index === selected }}">
45+
<td class="col-md-1">{item.id}</td>
46+
<td class="col-md-4"><a onclick="{selectRow($index)}">{item.label}</a></td>
47+
<td class="col-md-1"><a onclick="{removeRow($index)}"><span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
48+
<td class="col-md-6"></td>
49+
</tr>
50+
</tbody>
51+
</table>
52+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
53+
</div>
54+
</div>
55+
</body>
56+
</html>

‎frameworks/keyed/resonatejs/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-resonatejs",
3+
"version": "1.0.0",
4+
"description": "ResonateJS Demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersion": ""
8+
},
9+
"scripts": {
10+
"build-dev": "webpack -w -d",
11+
"build-prod": "webpack -p"
12+
},
13+
"keywords": [
14+
"react",
15+
"webpack"
16+
],
17+
"author": "Stefan Krause",
18+
"license": "Apache-2.0",
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+
"babel-core": "6.24.1",
26+
"babel-loader": "7.0.0",
27+
"babel-preset-es2015": "6.24.1",
28+
"webpack": "2.5.1"
29+
}
30+
}

‎frameworks/keyed/resonatejs/src/main.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
resonate
2+
.createBodyComponent()
3+
.as(function (component) {
4+
5+
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"];
6+
var colors = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
7+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
8+
9+
var adjectivesCount = adjectives.length;
10+
var colorsCount = colors.length;
11+
var nounsCount = nouns.length;
12+
13+
var random = function (max) {
14+
return Math.round(Math.random() * 1000) % max;
15+
};
16+
17+
var nextId = 1;
18+
19+
var createData = function (count) {
20+
var data = new Array(count);
21+
22+
for (var i = 0; i < count; i++) {
23+
data[i] = {
24+
id: nextId++,
25+
label: adjectives[random(adjectivesCount)] + ' ' + colors[random(colorsCount)] + ' ' + nouns[random(nounsCount)]
26+
};
27+
}
28+
29+
return BindingArray.createFrom(data);
30+
};
31+
32+
component.data = [];
33+
component.selected = -1;
34+
35+
component.run = function () {
36+
component.data = createData(1000);
37+
};
38+
39+
component.runLots = function () {
40+
component.data = createData(10000);
41+
};
42+
43+
component.add = function () {
44+
var appended = createData(1000);
45+
for (var i = 0; i < appended.length; i++) {
46+
component.data.push(appended[i]);
47+
}
48+
};
49+
50+
component.update = function () {
51+
var data = component.data;
52+
for (var i = 0; i < data.length; i += 10) {
53+
data[i].label += ' !!!';
54+
}
55+
};
56+
57+
component.clear = function () {
58+
component.data = [];
59+
};
60+
61+
component.swapRows = function () {
62+
var data = component.data;
63+
if (data.length > 998) {
64+
var temp = data[1];
65+
data[1] = data[998];
66+
data[998] = temp;
67+
}
68+
};
69+
70+
component.removeRow = function (index) {
71+
component.data.splice(index, 1);
72+
};
73+
74+
component.selectRow = function (index) {
75+
component.selected = index;
76+
};
77+
});
78+
79+
resonate.initialize();

‎frameworks/keyed/resonatejs/src/resonate.min.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/keyed/resonatejs/webpack.config.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use strict';
2+
var path = require('path')
3+
var cache = {};
4+
var loaders = [
5+
{
6+
test: /\.js$/,
7+
loader: 'babel-loader'
8+
},
9+
{
10+
test: /\.css$/,
11+
loader: 'style-loader!css-loader'
12+
}
13+
];
14+
var extensions = [
15+
'.js', '.jsx', '.es6.js'
16+
];
17+
18+
module.exports = [{
19+
cache: cache,
20+
module: {
21+
loaders: loaders
22+
},
23+
entry: {
24+
main: './src/Main.js',
25+
resonate: './src/resonate.min.js',
26+
},
27+
output: {
28+
path: path.resolve(__dirname, "dist"),
29+
filename: '[name].js'
30+
},
31+
resolve: {
32+
extensions: extensions,
33+
modules: [
34+
__dirname,
35+
path.resolve(__dirname, "src"),
36+
"node_modules"
37+
],
38+
alias: {
39+
}
40+
}
41+
}];

0 commit comments

Comments
 (0)