Skip to content

Commit d015023

Browse files
krausestkrausest
committed
Merge branch 'master' of https://github.com/vanviegen/js-framework-benchmark into vanviegen-master
2 parents 111c36f + b924b29 commit d015023

File tree

17 files changed

+565
-4
lines changed

17 files changed

+565
-4
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ node_modules
2828
jspm_packages
2929
bower_components
3030
dist
31+
shrinkwrap.yaml
3132

3233
.idea
3334
.vscode

‎frameworks/keyed/glasgow/.babelrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"plugins": [
3+
"transform-react-jsx",
4+
]
5+
}

‎frameworks/keyed/glasgow/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Glasgow</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'></div>
10+
<script src='dist/main.js'></script>
11+
</body>
12+
</html>

‎frameworks/keyed/glasgow/package.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "js-framework-benchmark-glasgow",
3+
"version": "1.0.0",
4+
"description": "Benchmark for glasgow framework",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "glasgow"
7+
},
8+
"scripts": {
9+
"build-dev": "rollup -c",
10+
"build-prod": "rollup -c --environment production"
11+
},
12+
"keywords": [
13+
"ractive"
14+
],
15+
"author": "Stefan Krause",
16+
"license": "Apache-2.0",
17+
"homepage": "https://github.com/krausest/js-framework-benchmark",
18+
"repository": {
19+
"type": "git",
20+
"url": "https://github.com/krausest/js-framework-benchmark.git"
21+
},
22+
"devDependencies": {
23+
"babel-core": "6.26.3",
24+
"babel-loader": "7.1.5",
25+
"babel-preset-stage-0": "6.24.1",
26+
"rollup": "^0.63.4",
27+
"rollup-plugin-alias": "^1.4.0",
28+
"rollup-plugin-babel": "^3.0.7",
29+
"rollup-plugin-commonjs": "^9.1.4",
30+
"rollup-plugin-node-resolve": "^3.3.0",
31+
"rollup-plugin-replace": "^2.0.0",
32+
"babel-plugin-transform-react-jsx": "^6.24.1"
33+
},
34+
"dependencies": {
35+
"glasgow": "0.2.7"
36+
}
37+
}

‎frameworks/keyed/glasgow/readme.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Glasgow Keyed
2+
Bundle is done using Rollup.

‎frameworks/keyed/glasgow/rollup.config.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const commonjsPlugin = require('rollup-plugin-commonjs');
2+
const nodeResolvePlugin = require('rollup-plugin-node-resolve');
3+
const babelPlugin = require('rollup-plugin-babel');
4+
const path = require('path');
5+
const replace = require('rollup-plugin-replace');
6+
const alias = require('rollup-plugin-alias');
7+
8+
const isProduction = process.env.production;
9+
10+
const extensions = ['.mjs', '.js', '.jsx'];
11+
12+
// see below for details on the options
13+
const plugins = [
14+
nodeResolvePlugin({
15+
preferBuiltins: false,
16+
extensions: extensions
17+
}),
18+
replace({
19+
'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development'),
20+
sourcemap: false
21+
}),
22+
babelPlugin({
23+
exclude: 'node_modules/**',
24+
sourceMaps: false
25+
}),
26+
commonjsPlugin({
27+
sourceMap: false,
28+
extensions: extensions
29+
}),
30+
];
31+
32+
33+
export default {
34+
input: path.join(__dirname, 'src/main.es6.js'),
35+
output: {
36+
name: 'glasgow',
37+
format: 'iife',
38+
file: path.join(__dirname, 'dist', 'main.js'),
39+
sourcemap: false
40+
},
41+
plugins: plugins
42+
}

‎frameworks/keyed/glasgow/src/controller.jsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
'use strict';
2+
3+
/** @jsx glasgow */
4+
5+
import { Store } from './store.es6'
6+
import glasgow from 'glasgow'
7+
8+
function selectRow(props) {
9+
props.store.select(props.id);
10+
}
11+
12+
function deleteRow(props) {
13+
props.store.delete(props.id);
14+
}
15+
16+
function Row({ d, id, styleClass }) {
17+
return (
18+
<tr className={styleClass}>
19+
<td className="col-md-1">{''+id}</td>
20+
<td className="col-md-4">
21+
<a onclick={selectRow}>{d.label}</a>
22+
</td>
23+
<td className="col-md-1">
24+
<a onclick={deleteRow}>
25+
<span className="glyphicon glyphicon-remove" aria-hidden="true"/>
26+
</a>
27+
</td>
28+
<td className="col-md-6"/>
29+
</tr>
30+
)
31+
}
32+
33+
function createRows(store) {
34+
const rows = [];
35+
const data = store.data;
36+
const selected = store.selected;
37+
38+
for (let i = 0; i < data.length; i++) {
39+
const d = data[i];
40+
const id = d.id;
41+
42+
rows.push(
43+
<Row
44+
store={store}
45+
styleClass={id === selected ? 'danger' : null}
46+
key={id}
47+
d={d}
48+
id={id}
49+
selected={selected}
50+
/>
51+
);
52+
}
53+
54+
return <tbody>{rows}</tbody>;
55+
}
56+
57+
function bind(obj,name) {
58+
let func = obj[name];
59+
return function(...args) {
60+
return func.apply(obj, args);
61+
}
62+
}
63+
64+
export function Controller(props) {
65+
66+
return <div className="container">
67+
<div className="jumbotron">
68+
<div className="row">
69+
<div className="col-md-6">
70+
<h1>Glasgow - keyed</h1>
71+
</div>
72+
<div className="col-md-6">
73+
<div className="row">
74+
<div className="col-sm-6 smallpad">
75+
<button type="button" className="btn btn-primary btn-block" id="run" onclick={bind(store,'run')}>Create 1,000
76+
rows
77+
</button>
78+
</div>
79+
<div className="col-sm-6 smallpad">
80+
<button type="button" className="btn btn-primary btn-block" id="runlots" onclick={bind(store,'runLots')}>Create
81+
10,000 rows
82+
</button>
83+
</div>
84+
<div className="col-sm-6 smallpad">
85+
<button type="button" className="btn btn-primary btn-block" id="add" onclick={bind(store,'add')}>Append 1,000
86+
rows
87+
</button>
88+
</div>
89+
<div className="col-sm-6 smallpad">
90+
<button type="button" className="btn btn-primary btn-block" id="update" onclick={bind(store,'update')}>Update
91+
every 10th row
92+
</button>
93+
</div>
94+
<div className="col-sm-6 smallpad">
95+
<button type="button" className="btn btn-primary btn-block" id="clear" onclick={bind(store,'clear')}>Clear
96+
</button>
97+
</div>
98+
<div className="col-sm-6 smallpad">
99+
<button type="button" className="btn btn-primary btn-block" id="swaprows" onclick={bind(store,'swapRows')}>Swap
100+
Rows
101+
</button>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
<table className="table table-hover table-striped test-data">
108+
{createRows(store)}
109+
</table>
110+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"/>
111+
</div>
112+
}
113+
114+
115+
const store = new Store();
116+
glasgow.setDebug(0);
117+
glasgow.mount(document.getElementById("main"), <Controller store={store}/>);
118+

‎frameworks/keyed/glasgow/src/main.es6.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use strict';
2+
3+
import './controller';

‎frameworks/keyed/glasgow/src/store.es6.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
'use strict';
2+
3+
function random(max) {
4+
return Math.round(Math.random() * 1000) % max;
5+
}
6+
7+
let rowId = 1;
8+
const adjectives = [
9+
"pretty",
10+
"large",
11+
"big",
12+
"small",
13+
"tall",
14+
"short",
15+
"long",
16+
"handsome",
17+
"plain",
18+
"quaint",
19+
"clean",
20+
"elegant",
21+
"easy",
22+
"angry",
23+
"crazy",
24+
"helpful",
25+
"mushy",
26+
"odd",
27+
"unsightly",
28+
"adorable",
29+
"important",
30+
"inexpensive",
31+
"cheap",
32+
"expensive",
33+
"fancy"
34+
];
35+
const colours = [
36+
"red",
37+
"yellow",
38+
"blue",
39+
"green",
40+
"pink",
41+
"brown",
42+
"purple",
43+
"brown",
44+
"white",
45+
"black",
46+
"orange"
47+
];
48+
const nouns = [
49+
"table",
50+
"chair",
51+
"house",
52+
"bbq",
53+
"desk",
54+
"car",
55+
"pony",
56+
"cookie",
57+
"sandwich",
58+
"burger",
59+
"pizza",
60+
"mouse",
61+
"keyboard"
62+
];
63+
64+
function buildData(count, result) {
65+
for (let i = 0; i < count; i++) {
66+
result.push({
67+
id: rowId++,
68+
label: adjectives[random(adjectives.length)] +
69+
" " +
70+
colours[random(colours.length)] +
71+
" " +
72+
nouns[random(nouns.length)]
73+
});
74+
}
75+
}
76+
77+
export class Store {
78+
constructor() {
79+
this.data = [];
80+
this.selected = undefined;
81+
this.id = 1;
82+
}
83+
84+
updateData() {
85+
let data = this.data;
86+
87+
for (let i = 0; i < data.length; i += 10) {
88+
const dataItem = data[i];
89+
90+
data[i] = {
91+
id: dataItem.id,
92+
label: dataItem.label + " !!!"
93+
};
94+
}
95+
}
96+
97+
delete(id) {
98+
const data = this.data;
99+
const idx = data.findIndex((d) => d.id === id);
100+
101+
data.splice(idx, 1);
102+
}
103+
104+
run() {
105+
this.data = [];
106+
this.add();
107+
this.selected = undefined;
108+
}
109+
110+
add() {
111+
buildData(1000, this.data);
112+
}
113+
114+
update() {
115+
this.updateData();
116+
}
117+
118+
select(id) {
119+
this.selected = id;
120+
}
121+
122+
runLots() {
123+
const newData = [];
124+
buildData(10000, newData);
125+
this.data = newData;
126+
this.selected = undefined;
127+
}
128+
129+
clear() {
130+
this.data = [];
131+
this.selected = undefined;
132+
}
133+
134+
swapRows() {
135+
let data = this.data;
136+
if (data.length > 998) {
137+
const a = data[1];
138+
data[1] = data[998];
139+
data[998] = a;
140+
}
141+
}
142+
}

0 commit comments

Comments
 (0)