Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonmiles
jonmiles committed Apr 12, 2015
0 parents commit a0f217c
Show file tree
Hide file tree
Showing 20 changed files with 553 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .bowerrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"directory": "public/bower_components"
}
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
public/bower_components/
23 changes: 23 additions & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

react: {
single_file_output: {
files: {
'public/js/react/dashboard.js': 'public/js/react/dashboard.jsx'
}
}
},

watch: {
files: ['public/**/*.jsx'],
tasks: ['default']
}
});

grunt.loadNpmTasks('grunt-react');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['react', 'watch']);
};
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# React.js Dashboard Performance Tests

30 changes: 30 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@

/**
* Module dependencies.
*/

var express = require('express');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, '/public')));
app.use(express.static(path.join(__dirname, '/tests')));
app.use(express.static(path.join(__dirname, '/dist')));

// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
34 changes: 34 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"name": "react-performance-tests",
"description": "React.js, jQuery and Angular.js rendering performance tests",
"version": "0.0.1",
"homepage": "https://github.com/jonmiles/react-performance-tests",
"main": [],
"keywords": [
"javascript",
"react",
"react.js",
"react-component",
"jQuery",
"angular",
"angular.js",
"rendering",
"performance",
"tests",
"performance tests"
],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": ">= 3.0.0",
"react": "~0.13.1",
"jquery": "~2.1.3",
"angular": "~1.3.15"
},
"devDependencies": {}
}
43 changes: 43 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"name": "react-performance-tests",
"description": "React.js, jQuery and Angular.js rendering performance tests",
"version": "0.0.1",
"homepage": "https://github.com/jonmiles/react-performance-tests",
"author": {
"name": "Jonathan Miles"
},
"repository": {
"type": "git",
"url": "git://github.com/jonmiles/react-performance-tests.git"
},
"main": [],
"scripts": {
"install": "bower install",
"start": "node app"
},
"engines": {
"node": ">= 0.10.0"
},
"dependencies": {
"express": "3.4.4"
},
"devDependencies": {
"bower": "1.3.x",
"grunt": "0.4.x",
"grunt-react": "~0.12.0",
"grunt-contrib-watch": "~0.6.1"
},
"keywords": [
"javascript",
"react",
"react.js",
"react-component",
"jQuery",
"angular",
"angular.js",
"rendering",
"performance",
"tests",
"performance tests"
]
}
Binary file added performance_tests/angular-timeline.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added performance_tests/jquery-timeline.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added performance_tests/react-timeline.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions public/angular.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<html>
<head>
<title>React.js Performance Tests</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>React.js Performance Tests</i></h1>
<br>
<ul class="nav nav-pills">
<li role="presentation"><a href="react.html">React</a></li>
<li role="presentation"><a href="jquery.html">jQuery</a></li>
<li role="presentation" class="active"><a href="angular.html">Angular</a></li>
</ul>
<br>
<div class="row">
<div class="col-sm-9">
<div id="dashboard" ng-app="dashboardApp" ng-controller="DashboardCtrl">
<div class="item"
ng-repeat="item in items track by $index"
ng-style="{ 'backgroundColor' : item }"
>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="total-input">Total: </label>
<input type="text" class="form-control init" id="total-input" value="10000">
</div>
<div class="form-group">
<label for="change-input">Change: </label>
<input type="text" class="form-control init" id="change-input" value="2000">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="update-btn">Update</button>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/data.js"></script>
<script src="js/angular/dashboard.js"></script>
<script>

var scope;

function initialize() {

factory.init({
maxCount: $('#total-input').val(),
changeCount: $('#change-input').val()
});

scope = angular.element($('#dashboard')).scope();
scope.initialize({ factory: factory });
}

function update() {
scope.update();
}

$(function () {
initialize();
$('input.init').on('change', initialize);
$('#update-btn').on('click', update);
});
</script>
</body>
</html>
15 changes: 15 additions & 0 deletions public/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
#dashboard {
padding-bottom: 50px;
display: inline-block;
}

#dashboard .item {
width: 5px;
height: 5px;
float: left;
}

#progress-out {
margin-top: 50px;
font-size: 4rem;
}
9 changes: 9 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<html>
<head>
<title>React.js Performance Tests</title>
<meta http-equiv="refresh" content="0; url=/react.html" />
</head>
<body>

</body>
</html>
62 changes: 62 additions & 0 deletions public/jquery.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<html>
<head>
<title>React.js Performance Tests</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>React.js Performance Tests</i></h1>
<br>
<ul class="nav nav-pills">
<li role="presentation"><a href="react.html">React</a></li>
<li role="presentation" class="active"><a href="jquery.html">jQuery</a></li>
<li role="presentation"><a href="angular.html">Angular</a></li>
</ul>
<br>
<div class="row">
<div class="col-sm-9">
<div id="dashboard"></div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="total-input">Total: </label>
<input type="text" class="form-control init" id="total-input" value="10000">
</div>
<div class="form-group">
<label for="change-input">Change: </label>
<input type="text" class="form-control init" id="change-input" value="2000">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="update-btn">Update</button>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/data.js"></script>
<script src="js/jquery/dashboard.js"></script>
<script>

function initialize() {

factory.init({
maxCount: $('#total-input').val(),
changeCount: $('#change-input').val()
});

$('#dashboard').dashboard({ factory: factory });
}

function update() {
$('#dashboard').dashboard('update');
}

$(function () {
initialize();
$('input.init').on('change', initialize);
$('#update-btn').on('click', update);
});
</script>
</body>
</html>
16 changes: 16 additions & 0 deletions public/js/angular/dashboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
angular.module('dashboardApp', [])

.controller('DashboardCtrl', function ($scope) {

$scope.items = [];

$scope.initialize = function (options) {
this.options = options;
$scope.update();
};

$scope.update = function () {
$scope.items = this.options.factory.update().data;
$scope.$apply();
};
});
50 changes: 50 additions & 0 deletions public/js/data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
var factory = (function () {

var options = {};

var data = [];

function init(optionsIn) {
options = optionsIn;
this.data = [];
for (i = 0; i < options.maxCount; i++) {
this.data[i] = getStateColor(Math.round(Math.random() * 100));
}
return this;
}

function update() {
for (i = 0; i < options.changeCount; i++) {
this.data[Math.round(Math.random() * options.maxCount)] = getStateColor(Math.round(Math.random() * 100));
}
return this;
}

function getStateColor(state) {

var colour = 'lightGray';
var stateNum = +state;

if (stateNum === 0) {
colour = 'red';
}
else if (stateNum === 100) {
colour = 'lime';
}
else if ((stateNum > 0) && (stateNum < 1)) {
colour = 'rgb(255, 141, 0)';
}
else if ((stateNum >= 1) && (stateNum < 100)) {
colour = 'rgb(255, ' + (140 + Math.floor(stateNum)) + ', 0)';
}

return colour;
}

return {
init: init,
update: update,
data: data
};

})();
Loading

0 comments on commit a0f217c

Please sign in to comment.