Skip to content

Commit 8371b20

Browse files
committed
Add non-keyed test
1 parent 2b9b622 commit 8371b20

File tree

6 files changed

+279
-1
lines changed

6 files changed

+279
-1
lines changed
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+
}
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>ScarletsFrame-"keyed"</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div class="container" sf-controller="bench-mark">
10+
<div class="jumbotron">
11+
<div class="row">
12+
<div class="col-md-6">
13+
<h1>ScarletsFrame-"keyed"</h1>
14+
</div>
15+
<div class="col-md-6">
16+
<div class="row">
17+
<div class="col-sm-6 smallpad">
18+
<button type='button' class='btn btn-primary btn-block' id='run' sf-click='b_run()'>Create 1,000 rows</button>
19+
</div>
20+
<div class="col-sm-6 smallpad">
21+
<button type='button' class='btn btn-primary btn-block' id='runlots' sf-click='b_runlots()'>Create 10,000 rows</button>
22+
</div>
23+
<div class="col-sm-6 smallpad">
24+
<button type='button' class='btn btn-primary btn-block' id='add' sf-click='b_add()'>Append 1,000 rows</button>
25+
</div>
26+
<div class="col-sm-6 smallpad">
27+
<button type='button' class='btn btn-primary btn-block' id='update' sf-click='b_update()'>Update every 10th row</button>
28+
</div>
29+
<div class="col-sm-6 smallpad">
30+
<button type='button' class='btn btn-primary btn-block' id='clear' sf-click='b_clear()'>Clear</button>
31+
</div>
32+
<div class="col-sm-6 smallpad">
33+
<button type='button' class='btn btn-primary btn-block' id='swaprows' sf-click='b_swaprows()'>Swap Rows</button>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
<table class="table table-hover table-striped test-data">
40+
<tbody id="tbody">
41+
<tr sf-repeat-this="x in list" class="{{ x.isSelected ? 'danger' : '' }}">
42+
<td class="col-md-1">{{ x.id }}</td>
43+
<td class="col-md-4">
44+
<a class="lbl" sf-click="b_select(this)">{{ x.label }}</a>
45+
</td>
46+
<td class="col-md-1">
47+
<a class="remove" sf-click="b_remove(this)">
48+
<span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span>
49+
</a>
50+
</td>
51+
<td class="col-md-6"></td>
52+
</tr>
53+
</tbody>
54+
</table>
55+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
56+
</div>
57+
<script src='dist/main.js'></script>
58+
</body>
59+
</html>
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "js-framework-benchmark-scarletsframe",
3+
"version": "1.0.0",
4+
"description": "ScarletsFrame 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+
"scarletsframe"
15+
],
16+
"author": "StefansArya",
17+
"license": "Apache-2.0",
18+
"homepage": "https://github.com/krausest/js-framework-benchmark",
19+
"repository": {
20+
"type": "git",
21+
"url": "https://github.com/krausest/js-framework-benchmark.git"
22+
},
23+
"dependencies": {
24+
"scarletsframe": "0.10.4"
25+
},
26+
"devDependencies": {
27+
"babel-core": "6.24.1",
28+
"babel-loader": "7.0.0",
29+
"babel-preset-es2015": "6.24.1",
30+
"webpack": "2.5.1"
31+
}
32+
}
Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
var sf = require('scarletsframe');
2+
var $ = sf.dom;
3+
4+
// Declare variable for the model
5+
sf.model.for('bench-mark', function(self){
6+
self.list = [];
7+
self.selected = -1;
8+
// window.test = self;
9+
});
10+
11+
// Declare functions that controlling the model
12+
sf.controller.run('bench-mark', function(self, root){
13+
var Measurer = root('measurer');
14+
15+
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"];
16+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
17+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
18+
19+
var nextId = 1;
20+
21+
function _random(max) {
22+
return Math.round(Math.random()*1000)%max;
23+
}
24+
25+
self.buildData = function(count = 1000){
26+
var data = [];
27+
for (var i = 0; i < count; i++)
28+
data.push({
29+
id: nextId++,
30+
isSelected:false,
31+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
32+
});
33+
34+
return data;
35+
}
36+
37+
self.unselect = function(){
38+
if(self.selected === -1) return;
39+
40+
if(self.list[self.selected] !== undefined){
41+
self.list[self.selected].isSelected = false;
42+
self.list.refresh(self.selected);
43+
}
44+
45+
self.selected = -1;
46+
}
47+
48+
// Handle button
49+
self.b_run = function(){
50+
// Measurer.start("run");
51+
self.list = self.buildData();
52+
self.selected = -1;
53+
// Measurer.stop();
54+
}
55+
56+
self.b_runlots = function(){
57+
// Measurer.start("runLots");
58+
self.list = self.buildData(10000);
59+
self.selected = -1;
60+
// Measurer.stop();
61+
}
62+
63+
self.b_add = function(){
64+
// Measurer.start("add");
65+
self.list = self.list.concat(self.buildData(1000));
66+
// Measurer.stop();
67+
}
68+
69+
self.b_update = function(){
70+
// Measurer.start("update");
71+
for (var i = 0; i < self.list.length; i += 10) {
72+
self.list[i].label += ' !!!';
73+
self.list.refresh(i, 'label');
74+
}
75+
// Measurer.stop();
76+
}
77+
78+
self.b_clear = function(){
79+
// Measurer.start("clear");
80+
self.list.splice(0);
81+
self.selected = -1;
82+
// Measurer.stop();
83+
}
84+
85+
self.b_swaprows = function(){
86+
// Measurer.start("swapRows");
87+
88+
if(self.list.length > 998)
89+
self.list.swap(1, 998);
90+
91+
// Measurer.stop();
92+
}
93+
94+
self.b_select = function(el){
95+
// Measurer.start("select");
96+
self.unselect();
97+
98+
var rowIndex = $.parent(el, '[sf-bind-list]');
99+
self.selected = rowIndex = sf.model.index(rowIndex);
100+
101+
self.list[rowIndex].isSelected = true;
102+
self.list.refresh(rowIndex);
103+
// Measurer.stop();
104+
}
105+
106+
self.b_remove = function(el){
107+
// Measurer.start("delete");
108+
109+
var rowIndex = $.parent(el, '[sf-bind-list]');
110+
rowIndex = sf.model.index(rowIndex);
111+
112+
self.list.splice(rowIndex, 1);
113+
114+
if(rowIndex === self.selected)
115+
self.selected = -1;
116+
117+
// Measurer.stop();
118+
}
119+
});
120+
121+
// Declare measure function in different scope
122+
sf.controller.run('measurer', function(self){
123+
var startTime;
124+
var lastMeasure;
125+
126+
self.start = function(name) {
127+
startTime = performance.now();
128+
lastMeasure = name;
129+
}
130+
self.stop = function() {
131+
var last = lastMeasure;
132+
if (lastMeasure) {
133+
window.setTimeout(function () {
134+
lastMeasure = null;
135+
var stop = performance.now();
136+
var duration = 0;
137+
console.log(last+" took "+(stop-startTime));
138+
}, 0);
139+
}
140+
}
141+
});
142+
143+
// We're not using dynamic resource loader
144+
sf.loader.off();
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
},
26+
output: {
27+
path: path.resolve(__dirname, "dist"),
28+
filename: '[name].js'
29+
},
30+
resolve: {
31+
extensions: extensions,
32+
modules: [
33+
__dirname,
34+
path.resolve(__dirname, "src"),
35+
"node_modules"
36+
],
37+
alias: {
38+
}
39+
}
40+
}];

0 commit comments

Comments
 (0)