Adding in React + Redux Performance monitoring

- react-addons-perf
- redux-perf middleware
- React perf widget for !production environments
- React perf in the assinged to window in !production environments
- React perf in the assinged to window in !production environments

Update NODE to NODE_ENV

Adding in React + Redux Performance monitoring

frontend/package.json

@@ -97,9 +97,12 @@
     "node-hook": "^0.4.0",
     "nyc": "^10.1.2",
     "pre-commit": "^1.2.2",
+    "react-addons-perf": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
     "react-dev-utils": "^0.5.1",
+    "react-perf": "^1.0.1",
     "redux-ava": "^2.2.0",
+    "redux-perf-middleware": "^1.2.2",
     "require-hacker": "^2.1.4",
     "simple-mock": "^0.7.3",
     "style-loader": "^0.13.2",

frontend/src/containers/app.js

@@ -10,6 +10,7 @@ import Home from '@containers/home';
 import NotFound from '@containers/not-found';
 import Nav from '@components/navigation';
 import OrgNavigation from '@components/navigation/org';
+import PerfProfiler from '../perf-profiler';
 import React from 'react';
 
 const App = connect()(React.createClass({
@@ -49,17 +50,21 @@ const App = connect()(React.createClass({
 }));
 
 export default (props) => (
-  <App {...props}>
-    <Header />
-    <Nav name='application-org-navigation'>
-      <OrgNavigation />
-    </Nav>
-    <Article name='application-content'>
-      <Switch>
-        <Route component={Home} path='/:org?/:section?' />
-        <Route component={NotFound} />
-      </Switch>
-    </Article>
-    <Footer name='application-footer' />
-  </App>
+  <div>
+    { process.env.NODE_ENV !== 'production' && <PerfProfiler /> }
+
+    <App {...props}>
+      <Header />
+      <Nav name='application-org-navigation'>
+        <OrgNavigation />
+      </Nav>
+      <Article name='application-content'>
+        <Switch>
+          <Route component={Home} path='/:org?/:section?' />
+          <Route component={NotFound} />
+        </Switch>
+      </Article>
+      <Footer name='application-footer' />
+    </App>
+  </div>
 );

frontend/src/index.js

@@ -5,6 +5,7 @@ import qs from 'querystring';
 import a11y from 'react-a11y';
 import ReactDOM from 'react-dom';
 import React from 'react';
+import Perf from 'react-addons-perf';
 
 import App from '@containers/app';
 import MockStateTesting from './mock-state-testing.json';
@@ -17,6 +18,8 @@ if (process.env.NODE_ENV !== 'production') {
   a11y(React, {
     ReactDOM
   });
+
+  window.Perf = Perf;
 }
 
 const states = {

frontend/src/perf-profiler/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import Perf from 'react-addons-perf';
+import styled from 'styled-components';
+
+const Profiler = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 50px;
+  top: 20px;
+  padding: 10px;
+  background: #bada55;
+  border: 2px solid black;
+  text-align: center;
+  
+  & > h1 {
+    font-size: 1.5em;
+  }
+  
+  & > h1 {
+    font-size: 1.5em;
+  }
+`;
+
+export default class PerfProfiler extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      started: false
+    };
+  }
+
+  handleToggle = () => {
+    const {
+      started
+    } = this.state;
+
+    started ? Perf.stop() : Perf.start();
+
+    this.setState({
+      started: !started
+    });
+  }
+
+  handlePrintWasted = () => {
+    const lastMeasurements = Perf.getLastMeasurements();
+
+    Perf.printWasted(lastMeasurements);
+  }
+
+  handlePrintOperations = () => {
+    const lastMeasurements = Perf.getLastMeasurements();
+
+    Perf.printOperations(lastMeasurements);
+  }
+
+  render() {
+    const {
+      started
+    } = this.state;
+
+    return (
+      <Profiler>
+        <h1>Performance Profiler</h1>
+        <button onClick={this.handleToggle}>
+          {started ? 'Stop' : 'Start'}
+        </button>
+        <button onClick={this.handlePrintWasted}>
+          Print Wasted
+        </button>
+        <button onClick={this.handlePrintOperations}>
+          Print Operations
+        </button>
+      </Profiler>
+    );
+  }
+}

frontend/src/state/store.js

@@ -3,6 +3,7 @@ import { enableBatching } from 'redux-batched-actions';
 import promiseMiddleware from 'redux-promise-middleware';
 import { createStore, compose, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
+import perflogger from 'redux-perf-middleware';
 
 import createReducer from '@state/reducers';
 
@@ -16,7 +17,8 @@ export default (state = Object.freeze({})) => {
       applyMiddleware(
         createLogger(),
         promiseMiddleware(),
-        thunk
+        thunk,
+        process.env.NODE_ENV !== 'production' && perflogger
       )
     )
   );

frontend/yarn.lock

@@ -5825,6 +5825,10 @@ prepend-http@^1.0.0, prepend-http@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
 
+present@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/present/-/present-1.0.0.tgz#6d2f865be7a96885118f4660e83e2161fb71cf2b"
+
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
@@ -5991,6 +5995,13 @@ react-a11y@^0.3.3:
   dependencies:
     object.assign "^4.0.3"
 
+react-addons-perf:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-addons-test-utils@^15.4.2:
   version "15.4.2"
   resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2"
@@ -6046,6 +6057,10 @@ react-intl@^2.2.3:
     intl-relativeformat "^1.3.0"
     invariant "^2.1.1"
 
+react-perf:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-perf/-/react-perf-1.0.1.tgz#11c9ef3330b8f7d9431150d3dfc9dd7d1a781a3e"
+
 react-redux@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.3.tgz#86c3b68d56e74294a42e2a740ab66117ef6c019f"
@@ -6270,6 +6285,12 @@ redux-logger@^2.8.1:
   dependencies:
     deep-diff "0.3.4"
 
+redux-perf-middleware:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/redux-perf-middleware/-/redux-perf-middleware-1.2.2.tgz#099b4ca38d1f0a3beb77b66617d196ed0ef2f514"
+  dependencies:
+    present "^1.0.0"
+
 redux-promise-middleware@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-4.2.0.tgz#052a7ac2df0e3468e196279f14bdefe711d10cac"