Skip to content

Commit e1155ad

Browse files
committed
Merge branch 'solkimicreb-add/nx'
2 parents bce3063 + fdc38e2 commit e1155ad

File tree

13 files changed

+213
-5
lines changed

13 files changed

+213
-5
lines changed

index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html><head> <title>JS-Framkeworks Benchmark</title> <meta charset="UTF-8"> <link href="css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="css/main.css"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Choose a framework:</h3> </div> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="angular-v1.6.1-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> angular-v1.6.1-keyed</a></li> <li><a href="angular-v2.4.3-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> angular-v2.4.3-keyed</a></li> <li><a href="angular-v2.4.3-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> angular-v2.4.3-non-keyed</a></li> <li><a href="aurelia-v1.0.7/dist"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> aurelia-v1.0.7</a></li> <li><a href="binding.scala-v10.0.1/target/web/stage"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> binding.scala-v10.0.1</a></li> <li><a href="bobril-v5.0.4"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> bobril-v5.0.4</a></li> <li><a href="cyclejs-dom-v14.1.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> cyclejs-dom-v14.1.0</a></li> <li><a href="dio-v3.0.5"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> dio-v3.0.5</a></li> <li><a href="domvm-v2.0.1-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> domvm-v2.0.1-non-keyed</a></li> <li><a href="domvm-v2.0.1-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> domvm-v2.0.1-keyed</a></li> <li><a href="ember-v2.6.1/dist"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ember-v2.6.1</a></li> <li><a href="ember-v2.10.0-beta.3/dist"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ember-v2.10.0-beta.3</a></li> <li><a href="elm-v0.18.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> elm-v0.18.0</a></li> <li><a href="inferno-v1.2.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> inferno-v1.2.0</a></li> <li><a href="kivi-v1.0.0-rc2"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> kivi-v1.0.0-rc2</a></li> <li><a href="knockout-v3.4.1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> knockout-v3.4.1</a></li> <li><a href="mithril-v0.2.5"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> mithril-v0.2.5</a></li> <li><a href="mithril-v1.0.0-alpha"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> mithril-v1.0.0-alpha</a></li> <li><a href="nx-v1.0.0-beta.1.1.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> nx-v1.0.0-beta.1.1.0</a></li> <li><a href="plastiq-v1.33.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> plastiq-v1.33.0</a></li> <li><a href="polymer-v1.7.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> polymer-v1.7.0</a></li> <li><a href="preact-v7.1.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> preact-v7.1.0</a></li> <li><a href="svelte-v1.0.1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> svelte-v1.0.1</a></li> <li><a href="ractive-v0.8.9-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ractive-v0.8.9-keyed</a></li> <li><a href="ractive-v0.8.9"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ractive-v0.8.9</a></li> <li><a href="ractive-v0.8.9-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ractive-v0.8.9-non-keyed</a></li> <li><a href="ractive-edge"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ractive-edge</a></li> <li><a href="react-lite-v0.15.30"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-lite-v0.15.30</a></li> <li><a href="react-v15.4.2-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-v15.4.2-keyed</a></li> <li><a href="react-v15.4.2-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-v15.4.2-non-keyed</a></li> <li><a href="react-v15.4.2-mobX-v3.0.1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-v15.4.2-mobX-v3.0.1</a></li> <li><a href="react-v15.4.2-redux-v3.6.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-v15.4.2-redux-v3.6.0</a></li> <li><a href="riot-v3.0.7"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> riot-v3.0.7</a></li> <li><a href="simulacra-v1.5.5"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> simulacra-v1.5.5</a></li> <li><a href="tsers-v1.0.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> tsers-v1.0.0</a></li> <li><a href="vanillajs"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vanillajs</a></li> <li><a href="vanillajs-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vanillajs-keyed</a></li> <li><a href="vidom-v0.7.1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vidom-v0.7.1</a></li> <li><a href="vue-v2.1.10-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vue-v2.1.10-keyed</a></li> <li><a href="vue-v2.1.10-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vue-v2.1.10-non-keyed</a></li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="webdriver-ts/table.html"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Table Report</a></li> </ul> </div> </div></div></body></html>
1+
<!DOCTYPE html><html><head> <title>JS-Framkeworks Benchmark</title> <meta charset="UTF-8"> <link href="css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="css/main.css"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Choose a framework:</h3> </div> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="angular-v1.6.1-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> angular-v1.6.1-keyed</a></li> <li><a href="angular-v2.4.3-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> angular-v2.4.3-keyed</a></li> <li><a href="angular-v2.4.3-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> angular-v2.4.3-non-keyed</a></li> <li><a href="aurelia-v1.0.7/dist"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> aurelia-v1.0.7</a></li> <li><a href="binding.scala-v10.0.1/target/web/stage"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> binding.scala-v10.0.1</a></li> <li><a href="bobril-v5.0.4"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> bobril-v5.0.4</a></li> <li><a href="cyclejs-dom-v14.1.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> cyclejs-dom-v14.1.0</a></li> <li><a href="dio-v3.0.5"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> dio-v3.0.5</a></li> <li><a href="domvm-v2.0.1-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> domvm-v2.0.1-non-keyed</a></li> <li><a href="domvm-v2.0.1-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> domvm-v2.0.1-keyed</a></li> <li><a href="ember-v2.6.1/dist"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ember-v2.6.1</a></li> <li><a href="ember-v2.10.0-beta.3/dist"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ember-v2.10.0-beta.3</a></li> <li><a href="elm-v0.18.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> elm-v0.18.0</a></li> <li><a href="inferno-v1.2.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> inferno-v1.2.0</a></li> <li><a href="kivi-v1.0.0-rc2"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> kivi-v1.0.0-rc2</a></li> <li><a href="knockout-v3.4.1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> knockout-v3.4.1</a></li> <li><a href="mithril-v0.2.5"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> mithril-v0.2.5</a></li> <li><a href="mithril-v1.0.0-alpha"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> mithril-v1.0.0-alpha</a></li> <li><a href="nx-v1.0.0-beta.1.1.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> nx-v1.0.0-beta.1.1.0</a></li> <li><a href="nx-v1.0.0-beta.1.1.0-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> nx-v1.0.0-beta.1.1.0-keyed</a></li> <li><a href="plastiq-v1.33.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> plastiq-v1.33.0</a></li> <li><a href="polymer-v1.7.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> polymer-v1.7.0</a></li> <li><a href="preact-v7.1.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> preact-v7.1.0</a></li> <li><a href="svelte-v1.0.1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> svelte-v1.0.1</a></li> <li><a href="ractive-v0.8.9-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ractive-v0.8.9-keyed</a></li> <li><a href="ractive-v0.8.9"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ractive-v0.8.9</a></li> <li><a href="ractive-v0.8.9-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ractive-v0.8.9-non-keyed</a></li> <li><a href="ractive-edge"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> ractive-edge</a></li> <li><a href="react-lite-v0.15.30"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-lite-v0.15.30</a></li> <li><a href="react-v15.4.2-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-v15.4.2-keyed</a></li> <li><a href="react-v15.4.2-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-v15.4.2-non-keyed</a></li> <li><a href="react-v15.4.2-mobX-v3.0.1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-v15.4.2-mobX-v3.0.1</a></li> <li><a href="react-v15.4.2-redux-v3.6.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> react-v15.4.2-redux-v3.6.0</a></li> <li><a href="riot-v3.0.7"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> riot-v3.0.7</a></li> <li><a href="simulacra-v1.5.5"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> simulacra-v1.5.5</a></li> <li><a href="tsers-v1.0.0"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> tsers-v1.0.0</a></li> <li><a href="vanillajs"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vanillajs</a></li> <li><a href="vanillajs-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vanillajs-keyed</a></li> <li><a href="vidom-v0.7.1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vidom-v0.7.1</a></li> <li><a href="vue-v2.1.10-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vue-v2.1.10-keyed</a></li> <li><a href="vue-v2.1.10-non-keyed"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> vue-v2.1.10-non-keyed</a></li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="webdriver-ts/table.html"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Table Report</a></li> </ul> </div> </div></div></body></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>NX v1.0.0-beta.1.1.0-keyed</title>
6+
<link href="../css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
7+
<link href="../css/main.css" rel="stylesheet"/>
8+
<script src="dist/main.js"></script>
9+
</head>
10+
<body>
11+
<div class="container" id="main">
12+
<perf-app>
13+
<div class="jumbotron">
14+
<div class="row">
15+
<div class="col-md-6">
16+
<h1>NX v1.0.0-beta.1.1.0-keyed</h1>
17+
</div>
18+
<div class="col-md-6">
19+
<div class="row">
20+
<div class="col-sm-6 smallpad">
21+
<button type="button" class="btn btn-primary btn-block" id="run" #click="run()">Create 1,000 rows</button>
22+
</div>
23+
<div class="col-sm-6 smallpad">
24+
<button type="button" class="btn btn-primary btn-block" id="runlots" #click="runLots()">Create 10,000 rows</button>
25+
</div>
26+
<div class="col-sm-6 smallpad">
27+
<button type="button" class="btn btn-primary btn-block" id="add" #click="add()">Append 1,000 rows</button>
28+
</div>
29+
<div class="col-sm-6 smallpad">
30+
<button type="button" class="btn btn-primary btn-block" id="update" #click="update()">Update every 10th row</button>
31+
</div>
32+
<div class="col-sm-6 smallpad">
33+
<button type="button" class="btn btn-primary btn-block" id="clear" #click="clear()">Clear</button>
34+
</div>
35+
<div class="col-sm-6 smallpad">
36+
<button type="button" class="btn btn-primary btn-block" id="swaprows" #click="swapRows()">Swap Rows</button>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
<table class="table table-hover table-striped test-data">
43+
<tbody @repeat="rows" repeat-value="item" track-by="id">
44+
<tr @class="{danger: item === selected}" is="perf-row">
45+
<td class="col-md-1">@{item.id}</td>
46+
<td class="col-md-4">
47+
<a #click="select(item)">@{item.label}</a>
48+
</td>
49+
<td class="col-md-1"><a #click="remove(item)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
50+
<td class="col-md-6"></td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
55+
</perf-app>
56+
</div>
57+
</body>
58+
</html>
File renamed without changes.
File renamed without changes.
File renamed without changes.

nx-v1.0.0-beta.1.1.0/index.html renamed to nx-v1.0.0-beta.1.1.0-non-keyed/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h1>NX v1.0.0-beta.1.1.0</h1>
4040
</div>
4141
</div>
4242
<table class="table table-hover table-striped test-data">
43-
<tbody @repeat="rows" repeat-value="item" track-by="$index">
43+
<tbody @repeat="rows" repeat-value="item" $track-by="track">
4444
<tr @class="{danger: item === selected}" is="perf-row">
4545
<td class="col-md-1">@{item.id}</td>
4646
<td class="col-md-4">
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "js-framework-benchmark-nx",
3+
"version": "1.0.0",
4+
"description": "Benchmark for NX framework",
5+
"scripts": {
6+
"build-dev": "webpack ./src/app.js dist/main.js",
7+
"build-prod": "webpack ./src/app.js dist/main.js"
8+
},
9+
"devDependencies": {
10+
"webpack": "1.14.0"
11+
},
12+
"dependencies": {
13+
"@nx-js/framework": "^1.0.0-beta.1.1.0"
14+
}
15+
}
Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
'use strict';
2+
3+
const nx = require('@nx-js/framework')
4+
const randomSentence = require('./randomSentence')
5+
const timer = require('./timer')
6+
7+
let id = 1
8+
9+
// the app component uses all of the core nx middlewares by default
10+
// it can be instantiated with <perf-app></perf-app> in HTML
11+
nx.components.app()
12+
.use(setup)
13+
.register('perf-app')
14+
15+
// the performance sensitive component uses the required middlewares only
16+
// it can be instantiated with <tr is="perf-row"></tr> in HTML
17+
nx.component({element: 'tr', state: false, isolate: 'middlewares'})
18+
.useOnContent(nx.middlewares.observe)
19+
.useOnContent(nx.middlewares.interpolate)
20+
.useOnContent(nx.middlewares.events)
21+
.use(nx.middlewares.attributes)
22+
.use(nx.middlewares.style)
23+
.register('perf-row')
24+
25+
// this is a custom middleware to setup the state for the app component
26+
function setup (elem, state) {
27+
state.rows = []
28+
29+
state.add = function add () {
30+
timer.startMeasure('add')
31+
for (var i = 0; i < 1000; i++) {
32+
state.rows.push({ id: id++, label: randomSentence() })
33+
}
34+
timer.stopMeasure()
35+
}
36+
37+
state.remove = function remove (item) {
38+
timer.startMeasure('remove')
39+
const index = state.rows.indexOf(item)
40+
state.rows.splice(index, 1)
41+
timer.stopMeasure()
42+
}
43+
44+
state.select = function select (item) {
45+
timer.startMeasure('select')
46+
state.selected = item
47+
timer.stopMeasure()
48+
}
49+
50+
state.run = function run () {
51+
timer.startMeasure('add')
52+
state.rows = []
53+
for (var i = 0; i < 1000; i++) {
54+
state.rows.push({ id: id++, label: randomSentence() })
55+
}
56+
timer.stopMeasure()
57+
}
58+
59+
state.update = function update () {
60+
timer.startMeasure('update')
61+
for (let i = 0; i < state.rows.length; i++) {
62+
if (i % 10 === 0) state.rows[i].label += ' !!!'
63+
}
64+
timer.stopMeasure()
65+
}
66+
67+
state.runLots = function runLots () {
68+
timer.startMeasure('add')
69+
state.rows = []
70+
for (var i = 0; i < 10000; i++) {
71+
state.rows.push({ id: id++, label: randomSentence() })
72+
}
73+
timer.stopMeasure()
74+
}
75+
76+
state.clear = function clear () {
77+
timer.startMeasure('clear')
78+
state.rows = []
79+
timer.stopMeasure()
80+
}
81+
82+
state.swapRows = function swapRows () {
83+
timer.startMeasure('swapRows')
84+
if (10 < state.rows.length) {
85+
const item4 = state.rows[4]
86+
const item9 = state.rows[9]
87+
state.rows[4] = item9
88+
state.rows[9] = item4
89+
}
90+
timer.stopMeasure()
91+
}
92+
93+
state.track = function track (item1, item2) {
94+
return (item2 !== undefined)
95+
}
96+
}
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict'
2+
3+
const 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'];
4+
const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
5+
const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
6+
7+
function random (max) {
8+
return Math.round(Math.random() * 1000) % max
9+
}
10+
11+
module.exports = function randomSentence () {
12+
return `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`
13+
}

0 commit comments

Comments
 (0)