Skip to content

Commit 5e579d3

Browse files
committed
Add knockout, fix angular 1.5.8 metric
1 parent 98a4db6 commit 5e579d3

File tree

7 files changed

+245
-1
lines changed

7 files changed

+245
-1
lines changed

angular-v1.5.8/src/HomeController.es6.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export class HomeController {
8484
this.printDuration();
8585
};
8686
swapRows() {
87-
startMeasure("clear");
87+
startMeasure("swapRows");
8888
if(this.data.length > 10) {
8989
var a = this.data[4];
9090
this.data[4] = this.data[9];

index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ <h3 class="panel-title">Choose a framework:</h3>
2626
<!-- <li><a href="ember-v2.6.1/dist/"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Ember v2.6.1</a></li> -->
2727
<li><a href="inferno-v0.7.26/index.html"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Inferno v0.7.26</a></li>
2828
<li><a href="kivi-v1.0.0-rc0/index.html"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> kivi v1.0.0-rc0</a></li>
29+
<li><a href="knockout-v3.4.0/index.html"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Knockout 3.4.0</a></li>
2930
<li><a href="mithril-v0.2.5/index.html"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Mithril v0.2.5</a></li>
3031
<li><a href="mithril-v1.0.0-alpha/index.html"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Mithril v1.0.0-alpha</a></li>
3132
<li><a href="plastiq-v1.33.0/index.html"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> plastiq v1.33.0</a></li>

knockout-v3.4.0/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets" : [ "babel-preset-es2015"]
3+
}

knockout-v3.4.0/index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Knockout JS</title>
6+
<link href="../css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
7+
<link href="../css/main.css" rel="stylesheet"/>
8+
</head>
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>Knockout v3.4.0</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" data-bind="click: run">Create 1,000 rows</button>
21+
</div>
22+
<div class="col-sm-6 smallpad">
23+
<button type="button" class="btn btn-primary btn-block" id="runlots" data-bind="click: runLots">Create 10,000 rows</button>
24+
</div>
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="add" data-bind="click: add">Append 1,000 rows</button>
27+
</div>
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id="update" data-bind="click: update">Update every 10th row</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="clear" data-bind="click: clear">Clear</button>
33+
</div>
34+
<div class="col-sm-6 smallpad">
35+
<button type="button" class="btn btn-primary btn-block" id="swaprows" data-bind="click: swapRows">Swap Rows</button>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
<table class="table table-hover table-striped test-data">
42+
<tbody data-bind="foreach: data">
43+
<tr data-bind="css: { danger: id() === $parent.selected() }">
44+
<td class="col-md-1" data-bind="text: id"></td>
45+
<td class="col-md-4">
46+
<a data-bind="text: label, click: select"></a>
47+
</td>
48+
<td class="col-md-1"><a data-bind="click: del"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
49+
<td class="col-md-6"></td>
50+
</tr>
51+
</tbody>
52+
</table>
53+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
54+
</div>
55+
</div>
56+
<script src='dist/main.js'></script>
57+
</body>
58+
</html>

knockout-v3.4.0/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "js-framework-benchmark-knockoutjs",
3+
"version": "1.0.0",
4+
"description": "Knockout v3.4 demo",
5+
"scripts": {
6+
"build-dev": "webpack -w -d -c webpack.config.js",
7+
"build-prod": "webpack -p -c webpack.config.js"
8+
},
9+
"author": "Stefan Krause",
10+
"license": "Apache-2.0",
11+
"devDependencies": {
12+
"babel-core": "6.10.4",
13+
"babel-loader": "6.2.4",
14+
"babel-preset-es2015": "6.9.0",
15+
"webpack": "1.13.1"
16+
},
17+
"dependencies": {
18+
"knockout": "3.4.0"
19+
}
20+
}

knockout-v3.4.0/src/Main.js

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
2+
const ko = require('knockout');
3+
4+
var startTime;
5+
var lastMeasure;
6+
7+
var startMeasure = function (name) {
8+
startTime = performance.now();
9+
lastMeasure = name;
10+
};
11+
var stopMeasure = function () {
12+
window.setTimeout(function () {
13+
var stop = performance.now();
14+
console.log(lastMeasure + " took " + (stop - startTime));
15+
}, 0);
16+
};
17+
18+
var HomeViewModel = function () {
19+
var self = this;
20+
self.id = 1;
21+
22+
function _random(max) {
23+
return Math.round(Math.random() * 1000) % max;
24+
}
25+
26+
function buildData(count) {
27+
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"];
28+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
29+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
30+
var data = [];
31+
for (var i = 0; i < count; i++) {
32+
data.push(new ItemViewModel({
33+
id: self.id++,
34+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
35+
}, self));
36+
}
37+
return data;
38+
}
39+
40+
self.selected = ko.observable(null);
41+
self.data = ko.observableArray();
42+
43+
self.run = function () {
44+
startMeasure("run");
45+
self.data(buildData(1000));
46+
self.selected(null);
47+
stopMeasure();
48+
};
49+
50+
self.runLots = function () {
51+
startMeasure("runLots");
52+
self.data(buildData(10000));
53+
self.selected(null);
54+
stopMeasure();
55+
};
56+
57+
self.add = function () {
58+
startMeasure("add");
59+
ko.utils.arrayPushAll(self.data, buildData(1000));
60+
stopMeasure();
61+
};
62+
63+
self.update = function () {
64+
startMeasure("update");
65+
var tmp = self.data();
66+
for (let i = 0; i < tmp.length; i += 10) {
67+
tmp[i].label(tmp[i].label() + ' !!!');
68+
}
69+
stopMeasure();
70+
};
71+
72+
self.clear = function () {
73+
startMeasure("clear");
74+
self.data.removeAll();
75+
self.selected(null);
76+
stopMeasure();
77+
};
78+
79+
self.swapRows = function () {
80+
startMeasure("swapRows");
81+
var tmp = self.data();
82+
if (tmp.length > 10) {
83+
var a = tmp[4];
84+
tmp[4] = tmp[9];
85+
tmp[9] = a;
86+
self.data(tmp);
87+
}
88+
stopMeasure();
89+
};
90+
91+
self.select = function (id) {
92+
startMeasure("select");
93+
self.selected(id);
94+
stopMeasure();
95+
};
96+
97+
self.del = function (item) {
98+
startMeasure("delete");
99+
var tmp = self.data();
100+
const idx = tmp.findIndex(d => d.id === item.id);
101+
self.data.splice(idx, 1);
102+
stopMeasure();
103+
};
104+
};
105+
106+
var ItemViewModel = function (data, parent) {
107+
var self = this;
108+
109+
self.id = ko.observable(data.id);
110+
self.label = ko.observable(data.label);
111+
112+
self.del = function () {
113+
parent.del(self);
114+
};
115+
116+
self.select = function () {
117+
parent.select(self.id());
118+
};
119+
};
120+
121+
ko.applyBindings(new HomeViewModel(), document.getElementById('main'));

knockout-v3.4.0/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+
3+
var cache = {};
4+
var loaders = [
5+
{
6+
test: /\.js$/,
7+
loader: 'babel-loader',
8+
exclude: /node_modules/
9+
},
10+
{
11+
test: /\.css$/,
12+
loader: 'style-loader!css-loader'
13+
}
14+
];
15+
var extensions = [
16+
'', '.js', '.jsx', '.es6.js'
17+
];
18+
19+
module.exports = [{
20+
cache: cache,
21+
module: {
22+
loaders: loaders
23+
},
24+
entry: {
25+
main: './src/Main.js',
26+
},
27+
output: {
28+
path: './dist',
29+
filename: '[name].js'
30+
},
31+
resolve: {
32+
extensions: extensions,
33+
root: [
34+
__dirname,
35+
__dirname + '/src'
36+
],
37+
alias: {
38+
"knockout": __dirname+"/node_modules/knockout/build/output/knockout-latest.js",
39+
}
40+
}
41+
}];

0 commit comments

Comments
 (0)