Skip to content

Commit a84d015

Browse files
krausestkrausest
committed
Merge branch 'TerraTkai-master'
2 parents 76f0355 + 84def55 commit a84d015

File tree

6 files changed

+208
-6
lines changed

6 files changed

+208
-6
lines changed

‎README.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,6 @@ There should be no build errors and we can open the framework in the browser:
100100

101101
Some frameworks like binding.scala or ember can't be opened that way, because they need a 'dist' or 'target/web/stage' or something in the URL. You can find out the correct URL in the [index.html](http://localhost:8080/index.html) you've opened before or take a look whether there's a customURL property under js-framework-benchmark in the [package.json](https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/ember/package.json#L10) that represents the url.
102102

103-
Open the browser console and click a bit on the buttons and you should see some measurements printed on the console.
104-
![First Run](images/firstRun.png?raw=true "First run")
105-
106-
> What is printed on the console is not what is actually measured by the automated benchmark driver. The benchmark driver extracts events from chrome's timeline to calculate the duration for the operations. What get's printed on the console above is an approximation of the actual duration which is pretty close to the actual duration.
107-
108103
## Optional 3.1: Contributing a new implementation
109104

110105
For contributions it is basically sufficient to create a new directory for your framework that supports `npm install` and `npm run build-prod` and can be then opened in the browser. All other steps are optional. Let's simulate that by copying vanillajs.
@@ -125,7 +120,7 @@ In most cases you'll need `npm install` and `npm run build-prod` and then check
125120

126121
## 4. Running a single framework with the automated benchmark driver
127122

128-
As mentioned above the benchmark uses an automated benchmark driver using chromedriver to measure the duration for each operation using chrome's timeline. Here are the steps to run is for a single framework:
123+
The benchmark uses an automated benchmark driver using chromedriver to measure the duration for each operation using chrome's timeline. Here are the steps to run is for a single framework:
129124

130125
```
131126
cd ../../..

‎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)