Skip to content

Commit d1e1d5c

Browse files
krausestkrausest
committed
Merge branch 'mgibas-vanilla-dom'
2 parents a1f3cb2 + 60f99f6 commit d1e1d5c

File tree

5 files changed

+217
-0
lines changed

5 files changed

+217
-0
lines changed

‎frameworks/non-keyed/vanilla-dom/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>vanilla-dom</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'>
10+
<div class="container" id="mountPoint">
11+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
12+
</div>
13+
</div>
14+
<script src='dist/main.js'></script>
15+
</body>
16+
</html>

‎frameworks/non-keyed/vanilla-dom/package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "js-framework-benchmark-vanilla-dom",
3+
"version": "1.0.0",
4+
"description": "vanilla-dom demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"build-dev": "webpack -w -d",
8+
"build-prod": "webpack -p"
9+
},
10+
"author": "Maciej Gibas",
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/krausest/js-framework-benchmark.git"
14+
},
15+
"js-framework-benchmark": {
16+
"frameworkVersionFromPackage": "@vanilla-ftw/vanilla-dom"
17+
},
18+
"devDependencies": {
19+
"@vanilla-ftw/vanilla-dom-loader": "0.0.10",
20+
"webpack": "4.16.4",
21+
"webpack-cli": "3.1.0"
22+
}
23+
}

‎frameworks/non-keyed/vanilla-dom/src/main.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
'use strict';
2+
import template from './template.html'
3+
4+
var startTime;
5+
var lastMeasure;
6+
var startMeasure = function(name) {
7+
startTime = performance.now();
8+
lastMeasure = name;
9+
}
10+
var stopMeasure = function() {
11+
var last = lastMeasure;
12+
if (lastMeasure) {
13+
window.setTimeout(function () {
14+
lastMeasure = null;
15+
var stop = performance.now();
16+
var duration = 0;
17+
console.log(last+" took "+(stop-startTime));
18+
}, 0);
19+
}
20+
}
21+
22+
function _random(max) {
23+
return Math.round(Math.random()*1000)%max;
24+
}
25+
26+
27+
class VanillaDomComponent {
28+
constructor() {
29+
this.did = 1
30+
this.state = {
31+
data: []
32+
}
33+
this.render = template.bind(this)(window.document.body)
34+
}
35+
add() {
36+
startMeasure("add");
37+
this.state.data = this.state.data.concat(this.buildData(1000));
38+
this.render(this.state)
39+
stopMeasure();
40+
}
41+
run() {
42+
startMeasure("run");
43+
this.state.data = this.buildData(1000);
44+
this.render(this.state)
45+
stopMeasure();
46+
}
47+
runLots() {
48+
startMeasure("runLots");
49+
this.state.data = this.buildData(10000);
50+
this.render(this.state)
51+
stopMeasure();
52+
}
53+
clear() {
54+
startMeasure("clear");
55+
this.state.data = [];
56+
this.render(this.state)
57+
stopMeasure();
58+
}
59+
del(e) {
60+
startMeasure("delete");
61+
this.state.data.splice(e.target.dataset['index'], 1);
62+
this.render(this.state)
63+
stopMeasure();
64+
}
65+
select(e) {
66+
startMeasure("select");
67+
this.selected = e.target.dataset['index']
68+
this.render(this.state)
69+
stopMeasure();
70+
}
71+
swapRows() {
72+
startMeasure("swapRows");
73+
if(this.state.data.length > 998) {
74+
var tmp = this.state.data[1];
75+
this.state.data[1] = this.state.data[998];
76+
this.state.data[998] = tmp;
77+
}
78+
this.render(this.state)
79+
stopMeasure();
80+
}
81+
update() {
82+
startMeasure("update");
83+
for (let i=0;i<this.state.data.length;i+=10) {
84+
this.state.data[i].label = this.state.data[i].label + ' !!!'
85+
}
86+
this.render(this.state)
87+
stopMeasure();
88+
}
89+
handleClick(e) {
90+
if(e.target.matches('.select')) {
91+
this.select(e)
92+
}
93+
if(e.target.matches('.remove')) {
94+
this.del(e)
95+
}
96+
}
97+
itemClass(index) {
98+
return this.selected == index ? 'danger' : ''
99+
}
100+
buildData(count) {
101+
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"];
102+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
103+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
104+
var data = [];
105+
for (var i = 0; i < count; i++) {
106+
data.push({ id: this.did++, label: adjectives[this._random(adjectives.length)] + " " + colours[this._random(colours.length)] + " " + nouns[this._random(nouns.length)] });
107+
}
108+
return data;
109+
}
110+
_random(max) {
111+
return Math.round(Math.random() * 1000) % max;
112+
}
113+
}
114+
new VanillaDomComponent()

‎frameworks/non-keyed/vanilla-dom/src/template.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<div class="jumbotron">
2+
<div class="row">
3+
<div class="col-md-6">
4+
<h1>vanilla-dom</h1>
5+
</div>
6+
<div class="col-md-6">
7+
<div class="row">
8+
<div class="col-sm-6 smallpad">
9+
<button type='button' id="run" class='btn btn-primary btn-block' on-click='this.run'>Create 1,000 rows</button>
10+
</div>
11+
<div class="col-sm-6 smallpad">
12+
<button type='button' id="runlots" class='btn btn-primary btn-block' on-click='this.runLots'>Create 10,000 rows</button>
13+
</div>
14+
<div class="col-sm-6 smallpad">
15+
<button type='button' id="add" class='btn btn-primary btn-block' on-click='this.add'>Append 1,000 rows</button>
16+
</div>
17+
<div class="col-sm-6 smallpad">
18+
<button type='button' id="update" class='btn btn-primary btn-block' on-click='this.update'>Update every 10th row</button>
19+
</div>
20+
<div class="col-sm-6 smallpad">
21+
<button type='button' id="clear" class='btn btn-primary btn-block' on-click='this.clear'>Clear</button>
22+
</div>
23+
<div class="col-sm-6 smallpad">
24+
<button type='button' id="swaprows" class='btn btn-primary btn-block' on-click='this.swapRows'>Swap Rows</button>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
<table class="table table-hover table-striped test-data">
31+
<tbody>
32+
<tr repeat-for="{{st.data}}" class="{{this.itemClass(i)}}" on-click="this.handleClick">
33+
<td class="col-md-1">{{items[i].id}}</td>
34+
<td class="col-md-4">
35+
<a class="select" data-index="{{i}}">{{items[i].label}}</a>
36+
</td>
37+
<td class="col-md-1"><a><span data-index="{{i}}" class="glyphicon glyphicon-remove remove" aria-hidden="true"></span></a></td>
38+
<td class="col-md-6"></td>
39+
</tr>
40+
</tbody>
41+
</table>

‎frameworks/non-keyed/vanilla-dom/webpack.config.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict';
2+
var path = require('path')
3+
4+
module.exports = [{
5+
module: {
6+
rules: [
7+
{
8+
test: /template\.html$/,
9+
exclude: /(node_modules|bower_components)/,
10+
use: {
11+
loader: '@vanilla-ftw/vanilla-dom-loader'
12+
}
13+
}
14+
]
15+
},
16+
entry: {
17+
main: './src/main.js',
18+
},
19+
output: {
20+
path: path.resolve(__dirname, "dist"),
21+
filename: '[name].js'
22+
}
23+
}];

0 commit comments

Comments
 (0)