Skip to content

Commit 6a55471

Browse files
committed
Merge branch 'StefansArya-master'
2 parents 8cf544f + a635703 commit 6a55471

File tree

5 files changed

+277
-0
lines changed

5 files changed

+277
-0
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.status }}">
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.9.13"
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: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
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+
});
9+
10+
// Declare functions that controlling the model
11+
sf.controller.run('bench-mark', function(self, root){
12+
var Measurer = root('measurer');
13+
14+
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"];
15+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
16+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
17+
18+
var nextId = 1;
19+
20+
function _random(max) {
21+
return Math.round(Math.random()*1000)%max;
22+
}
23+
24+
self.buildData = function(count = 1000){
25+
var data = [];
26+
for (var i = 0; i < count; i++)
27+
data.push({
28+
id: nextId++,
29+
status:'',
30+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
31+
});
32+
33+
return data;
34+
}
35+
36+
self.unselect = function(){
37+
if(self.selected === -1) return;
38+
39+
if(self.list[self.selected] !== undefined){
40+
self.list[self.selected].status = '';
41+
self.list.softRefresh(self.selected);
42+
}
43+
44+
self.selected = -1;
45+
}
46+
47+
// Handle button
48+
self.b_run = function(){
49+
Measurer.start("run");
50+
self.list = self.buildData();
51+
self.selected = -1;
52+
Measurer.stop();
53+
}
54+
55+
self.b_runlots = function(){
56+
Measurer.start("runLots");
57+
self.list = self.buildData(10000);
58+
self.selected = -1;
59+
Measurer.stop();
60+
}
61+
62+
self.b_add = function(){
63+
Measurer.start("add");
64+
self.list = self.list.concat(self.buildData(1000));
65+
Measurer.stop();
66+
}
67+
68+
self.b_update = function(){
69+
Measurer.start("update");
70+
for (var i = 0; i < self.list.length; i += 10) {
71+
self.list[i].label += ' !!!';
72+
self.list.softRefresh(i);
73+
}
74+
Measurer.stop();
75+
}
76+
77+
self.b_clear = function(){
78+
Measurer.start("clear");
79+
self.list.splice(0);
80+
self.selected = -1;
81+
Measurer.stop();
82+
}
83+
84+
self.b_swaprows = function(){
85+
Measurer.start("swapRows");
86+
87+
if(self.list.length > 998)
88+
self.list.swap(1, 998);
89+
90+
Measurer.stop();
91+
}
92+
93+
self.b_select = function(el){
94+
Measurer.start("select");
95+
self.unselect();
96+
97+
var rowIndex = $.parent(el, '[sf-bind-list]');
98+
self.selected = rowIndex = sf.model.index(rowIndex);
99+
100+
self.list[rowIndex].status = 'danger';
101+
self.list.softRefresh(rowIndex);
102+
Measurer.stop();
103+
}
104+
105+
self.b_remove = function(el){
106+
Measurer.start("delete");
107+
108+
var rowIndex = $.parent(el, '[sf-bind-list]');
109+
rowIndex = sf.model.index(rowIndex);
110+
111+
self.list.splice(rowIndex, 1);
112+
113+
if(rowIndex === self.selected)
114+
self.selected = -1;
115+
116+
Measurer.stop();
117+
}
118+
});
119+
120+
// Declare measure function in different scope
121+
sf.controller.run('measurer', function(self){
122+
var startTime;
123+
var lastMeasure;
124+
125+
self.start = function(name) {
126+
startTime = performance.now();
127+
lastMeasure = name;
128+
}
129+
self.stop = function() {
130+
var last = lastMeasure;
131+
if (lastMeasure) {
132+
window.setTimeout(function () {
133+
lastMeasure = null;
134+
var stop = performance.now();
135+
var duration = 0;
136+
console.log(last+" took "+(stop-startTime));
137+
}, 0);
138+
}
139+
}
140+
});
141+
142+
// We're not using dynamic resource loader
143+
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)