Added login

Page progress
FREEZX · Mar 3, 2015 · 4c4bd1c · 4c4bd1c
1 parent 94f5abe
commit 4c4bd1c
Show file tree

Hide file tree

Showing 12 changed files with 366 additions and 122 deletions.
diff --git a/bower.json b/bower.json
@@ -17,6 +17,9 @@
   "dependencies": {
     "q": "1.0.1",
     "lodash": "~3.3.1",
-    "bootstrap": "~3.3.2"
+    "bootstrap": "~3.3.2",
+    "fontawesome": "~4.3.0",
+    "highcharts-release": "~4.1.3",
+    "jquery": "~2.1.3"
   }
 }
diff --git a/config/env/all.js b/config/env/all.js
@@ -18,10 +18,13 @@ module.exports = {
 			'/primus/primus.js#nomin#nocdn',
 			'lib/lodash/lodash.js',
 			'lib/q/q.js',
+			'lib/jquery/dist/jquery.js',
+			'lib/highcharts-release/highcharts.js',
 			'js/bundle.js'
 		],
 		css: [
 			'css/global.css',
+			'lib/fontawesome/css/font-awesome.css',
 			'lib/bootstrap/dist/css/bootstrap.css'
 		]
 	}

diff --git a/config/env/development.js b/config/env/development.js
@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+	db: {
+		uri: 'mongodb://localhost:27017/nukejs-dev'
+	}
+};
diff --git a/public/css/global.css b/public/css/global.css
@@ -2,8 +2,17 @@ body {
 	padding-top: 50px;
 }
 
+html {
+	overflow-y: scroll;
+}
+
+.input-group-addon .addon-icon {
+	width: 23px;
+	font-size: 1.5em;
+}
+
 .jumbotron .nuke_symbol {
-	font-size: 23em;
-	margin-top: -90px;
+	font-size: 20em;
+	margin-top: -30px;
 	margin-bottom: -90px;
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/js/bundle.js b/public/js/bundle.js
diff --git a/public/js/components/.jshintrc b/public/js/components/.jshintrc
@@ -22,7 +22,8 @@
 		"$": true,
 		"Q": true,
 		"Primus": true,
-		"primus": true
+		"primus": true,
+		"Highcharts": true
 	},
 	"indent": 4, // Specify indentation spacing
 	"devel": true, // Allow development statements e.g. `console.log();`.

diff --git a/public/js/components/Benchmarks.react.jsx b/public/js/components/Benchmarks.react.jsx
@@ -0,0 +1,79 @@
+'use strict';
+
+var React = require('react');
+var Router = require('react-router');
+var Link = Router.Link;
+
+var Home = React.createClass({
+	componentDidMount: function () {
+		Highcharts.setOptions({colors: ['rgb(166,206,227)','rgb(31,120,180)','rgb(178,223,138)','rgb(51,160,44)','rgb(251,154,153)','rgb(227,26,28)','rgb(253,191,111)','rgb(255,127,0)','rgb(202,178,214)','rgb(106,61,154)']});
+		$('#socket_chart').highcharts({
+			chart: {
+					type: 'line',
+					zoomType: 'y'
+			},
+			title: {
+					text: '100 message(s) per socket (lower is better)'
+			},
+			subtitle: {
+					text: 'Windows_NT win32 x64 6.2.9200'
+			},
+			xAxis: {
+					title: {
+						text:'Number of sockets'
+					}
+			},
+			yAxis: {
+					title: {
+							text: 'Time(seconds)'
+					}
+			},
+			series: [{"name":"engine.io","lineWidth":1,"data":[[1,0.13813304901123047],[25000,70.02608704566956],[50000,150.56325221061707],[75000,230.6990249156952],[100000,638.6028079986572]]},{"name":"faye","lineWidth":1,"data":[[1,0.1582961082458496],[25000,85.06349301338196],[50000,174.80246591567993],[75000,263.1010580062866],[100000,341.3560268878937]]},{"name":"primus_engine.io","lineWidth":1,"data":[[1,0.4798250198364258],[25000,110.09547400474548],[50000,224.97953605651855],[75000,747.2488839626312],[100000,1150.7764830589294]]},{"name":"primus_faye","lineWidth":1,"data":[[1,0.19319486618041992],[25000,123.71367907524109],[50000,257.75497579574585],[75000,386.2208249568939],[100000,520.1780779361725]]},{"name":"primus_socket.io","lineWidth":1,"data":[[1,0.2504088878631592],[25000,129.39305591583252],[50000,260.2693819999695],[75000,393.2368199825287],[100000,527.048045873642]]},{"name":"primus_sockjs","lineWidth":1,"data":[[1,0.2426900863647461],[25000,159.10842990875244],[50000,319.87158393859863],[75000,464.3382980823517],[100000,626.6034281253815]]},{"name":"primus_websockets","lineWidth":1,"data":[[1,0.19027018547058105],[25000,115.14632296562195],[50000,239.5975968837738],[75000,365.8227951526642],[100000,458.8659658432007]]},{"name":"socket.io","lineWidth":1,"data":[[1,0.18517804145812988],[25000,126.34303998947144],[50000,273.6571707725525],[75000,379.33140993118286],[100000,504.6554729938507]]},{"name":"sockjs","lineWidth":1,"data":[[1,0.10114693641662598],[25000,115.79992985725403],[50000,233.08337688446045],[75000,347.3627841472626],[100000,460.3710479736328]]},{"name":"ws","lineWidth":1,"data":[[1,0.14113497734069824],[25000,94.77279496192932],[50000,171.8866720199585],[75000,271.96254801750183],[100000,356.60363507270813]]}]
+	 	});
+
+		$('#primus_http_chart').highcharts({
+			chart: {
+					type: 'line',
+					zoomType: 'y'
+			},
+			title: {
+					text: 'Response time with two concurrent users (lower is better)'
+			},
+			subtitle: {
+					text: 'Windows_NT win32 x64 6.2.9200'
+			},
+			xAxis: {
+					title: {
+						text:'Number of requests'
+					}
+			},
+			yAxis: {
+					title: {
+							text: 'Time(seconds)'
+					}
+			},
+			series: [{"name":"Express HTTP","lineWidth":1,"data":[[100,280],[500,2700],[1000,4900]]},{"name":"Primus WS","lineWidth":1,"data":[[100,250],[500,400],[1000,507]]}]
+	 	});
+	},
+	render: function () {
+		return (
+			<div className="container">
+				<h2>Websocket technologies benchmarks</h2>
+				<p>We have created a node realtime engine benchmarking tool called <a href="https://github.com/FREEZX/SockBench">SockBench</a> which generated the following graph.<br/>
+				A writeup about our methods and conclusions is available in this <a href="https://www.dropbox.com/s/6dgnftmjcjf2g5o/bare_conf.pdf">scientific paper</a>.</p>
+				<div id="socket_chart">
+				</div>
+				<p>The paper shows that primus is the best choice due to great performance, considering it offers effortless switching of realtime engines and it implements best practices for all supported engines.</p>
+				<p>Nuke.js uses the websockets transformer by default, because it is the fastest transformer available, and does not require sticky sessions on the load balancer.</p>
+
+				<h2>Primus vs HTTP</h2>
+				<p>This benchmark measures the needed time to make HTTP requests and Primus requests. We took advantage of primus and kept the connection open for all requests. <br/>
+				This highlights the biggest drawback of HTTP, which is that it's not reusing existing connections, but instead makes new connections for every request.</p>
+				<div id="primus_http_chart">
+				</div>
+			</div>
+		);
+	}
+});
+
+module.exports = Home;
diff --git a/public/js/components/Header.react.jsx b/public/js/components/Header.react.jsx
@@ -30,7 +30,7 @@ var Header = React.createClass({
               <span className="icon-bar"></span>
               <span className="icon-bar"></span>
             </button>
-            <Link to="/" className="navbar-brand">Nuke.js</Link>
+            <Link to="/" className="navbar-brand">☢ NUKE.JS</Link>
           </div>
           <nav className="collapse navbar-collapse bs-navbar-collapse">
             <ul className="nav navbar-nav">

diff --git a/public/js/components/Home.react.jsx b/public/js/components/Home.react.jsx
@@ -7,40 +7,40 @@ var Link = Router.Link;
 var Home = React.createClass({
   render: function () {
     return (
-    	<div>
-      		<div className="jumbotron">
-      			<div className="container">
-              <div className="col-md-3 nuke_symbol">☢</div>
-              <div className="col-md-9">
-                <h1>Nuke.js</h1>
-                <p>Nuke is an extremely fast and performant node.js full-stack web framework, made with realtime in mind.<br />
-                It combines the fastest and most powerful technologies to deliver explosive raw performance where you need it!</p>
-                <blockquote>
-                  <p>"Creating and using nuke.js every day is a blast!"</p>
-                  <footer>Kristijan Trajkovski, creator of nuke.js</footer>
-                </blockquote>
-              </div>
-  				  </div>
-          </div>
+      <div>
+        <div className="jumbotron">
           <div className="container">
-            <h1>What?</h1>
-            <p>Traditional HTTP is not a very fast way to do things. Each time you make a request, a connection is opened, headers are sent,
-            session data is retrieved, a response is sent back and the connection is closed. </p>
-            <p>What if you need to do this many times? Precious bandwidth and time is lost to do all of these steps again and again and again.</p>
-            <p>Our framework aims to reduce this by using socket technologies, which keep the connection open. This removes the overhead for opening and closing of the connection,
-            and removes the need to retrieve session data for subsequent requests, as they all operate on the same connection. </p>
-            <h1>How?</h1>
-            <p>
-              We are have <a href="http://primus.io">primus</a>, <a href="http://expressjs.com/">express</a>, <a href="http://facebook.github.io/react/">react</a>, <a href="http://www.mongodb.org/">mongodb</a> and <a href="http://redis.io/">redis</a> in our stack.<br/>
-              <Link to="benchmarks">Benchmarks</Link> have proven these technologies provide the best raw performance, and provide a great feature set.
-            </p>
-            <h1>Swag</h1>
-            <p>
-              Keep this logo on your site to prove you're awesome. <br/>
-              <img src="/img/logo.png" />
-            </p>
+            <div className="col-md-3 nuke_symbol">☢</div>
+            <div className="col-md-9">
+              <h1>Nuke.js</h1>
+              <p>Nuke is an extremely fast and performant node.js full-stack web framework, made with realtime in mind.<br />
+              It combines the fastest and most powerful technologies to deliver explosive raw performance where you need it!</p>
+              <blockquote>
+                <p>"Creating and using nuke.js every day is a blast!"</p>
+                <footer>Kristijan Trajkovski, creator of nuke.js</footer>
+              </blockquote>
+            </div>
           </div>
-  		</div>
+        </div>
+        <div className="container">
+          <h1>What?</h1>
+          <p>Traditional HTTP is not a very fast way to do things. Each time you make a request, a connection is opened, headers are sent,
+          session data is retrieved, a response is sent back and the connection is closed. </p>
+          <p>What if you need to do this many times? Precious bandwidth and time is lost to do all of these steps again and again and again.</p>
+          <p>Our framework aims to reduce this by using socket technologies, which keep the connection open. This removes the overhead for opening and closing of the connection,
+          and removes the need to retrieve session data for subsequent requests, as they all operate on the same connection. </p>
+          <h1>How?</h1>
+          <p>
+            We are have <a href="http://primus.io">primus</a>, <a href="http://expressjs.com/">express</a>, <a href="http://facebook.github.io/react/">react</a>, <a href="http://www.mongodb.org/">mongodb</a> and <a href="http://redis.io/">redis</a> in our stack.<br/>
+            <Link to="benchmarks">Benchmarks</Link> have proven these technologies provide the best raw performance, and provide a great feature set.
+          </p>
+          <h1>Swag</h1>
+          <p>
+            Keep this logo on your site to prove you're awesome. <br/>
+            <img src="/img/logo.png" />
+          </p>
+        </div>
+      </div>
     );
   }
 });

diff --git a/public/js/components/Login.react.jsx b/public/js/components/Login.react.jsx
@@ -1,12 +1,13 @@
 'use strict';
 
 var React = require('react');
+var Router = require('react-router');
+var Navigation = Router.Navigation;
 
 var SigninForm = React.createClass({
+  mixins: [Navigation],
   getInitialState: function () {
-    return {
-      username: 'Username'
-    };
+    return {};
   },
   _setUsername: function (event){
     this.setState({
@@ -19,30 +20,59 @@ var SigninForm = React.createClass({
     });
   },
   signin: function (event){
-  	event.preventDefault();
-  	var self = this;
-  	primus.request('/auth/signin', this.state)
-  	.then(function(data){
-  		self.setState({
-  			success: 'Successfully logged in user '+data.displayName
-  		});
-  	})
-  	.fail(function(error){
-  		self.setState({
-  			success: 'Login failed with error '+error.message
-  		});
-  	});
+    event.preventDefault();
+    var self = this;
+    primus.request('/auth/signin', this.state)
+    .then(function(data){
+      self.setState({
+        success: 'Successfully logged in user '+data.displayName
+      });
+      setTimeout(function(){
+        self.transitionTo('home');
+      }, 500);
+    })
+    .fail(function(error){
+      self.setState({
+        success: 'Login failed with error '+error.message
+      });
+    });
   },
   render: function () {
     return (
-      <form onSubmit={this.signin}>
-      	<br/>
-      	<label>Sign in</label><br/>
-      	<input name="username" type="text" value={this.state.username} onChange={this._setUsername}></input><br/>
-      	<input name="password" type="password" value={this.state.password} onChange={this._setPassword}></input><br/>
-        <input type="submit"></input><br/>
-        <label>{this.state.success}</label>
-      </form>
+      <div>
+        <div className="jumbotron">
+          <div className="container">
+            <div className="col-md-offset-4 col-md-4">
+              <div className="panel panel-default">
+                <div className="panel-heading">
+                  <h3 className="panel-title">Sign in</h3>
+                </div>
+                <div className="panel-body">
+                  <form role="form" onSubmit={this.signin}>
+                    <div className="form-group">
+                      <div className="input-group">
+                        <div className="input-group-addon"><i className="fa fa-user addon-icon"></i></div>
+                        <input type="text" className="form-control input-lg" name="username" placeholder="Enter username" value={this.state.username} onChange={this._setUsername}></input>
+                      </div>
+                    </div>
+                    <div className="form-group">
+                      <div className="input-group">
+                        <div className="input-group-addon"><i className="fa fa-key addon-icon"></i></div>
+                        <input type="password" className="form-control input-lg" name="password" placeholder="Enter password" value={this.state.password} onChange={this._setPassword}></input>
+                      </div>
+                    </div>
+                    <input type="submit" className="btn btn-success"></input><br/><br/>
+                    <div className={this.state.success ? 'alert alert-success' : ''} role="alert">{this.state.success}</div>
+                  </form>
+                </div>
+              </div>
+            </div>
+            <div className="col-md-offset-4 col-md-4 well">
+              Login with username: "demo" and password: "demo123"
+            </div>
+          </div>
+        </div>
+      </div>
     );
   }
 });

diff --git a/public/js/components/Routes.react.jsx b/public/js/components/Routes.react.jsx
@@ -9,11 +9,12 @@ var App = require('./App.react');
 var Login = require('./Login.react');
 var Logout = require('./Logout.react');
 var Home = require('./Home.react');
+var Benchmarks = require('./Benchmarks.react');
 
 var routes = (
   <Route handler={App}>
     <Route name="home" path="/" handler={Home}/>
-    <Route name="benchmarks" handler={Home}/>
+    <Route name="benchmarks" handler={Benchmarks}/>
     <Route name="login" handler={Login}/>
     <Route name="logout" handler={Logout}/>
   </Route>