Update React to 16.8 and add new "deeptree" benchmark (#17)

* Use React 16.8 alpha

* Make ReactDOM an external for app builds

* Use React 16.8 final + profiling build

* Capture render profiling values

* Add initial deeptree benchmark

* Add RSK

* Build out deeptree benchmark

Author: markerikson

copy-to-public/react-dom.production.min.js

@@ -81,7 +81,7 @@ async function runBenchmarks() {
         const fpsValuesWithoutFirst = fpsValues.slice(1);
         const lastEntry = _.last(fpsValues);
 
-        const averageFPS = fpsValuesWithoutFirst.reduce((sum, entry) => sum + entry.FPS, 0) / fpsValuesWithoutFirst.length || 0;
+        const averageFPS = fpsValuesWithoutFirst.reduce((sum, entry) => sum + entry.FPS, 0) / fpsValuesWithoutFirst.length || 1;
 
         const pairwiseEntries = pairwise(fpsValuesWithoutFirst);
 
@@ -107,7 +107,16 @@ async function runBenchmarks() {
 
         const fps = {averageFPS, weightedFPS, values : fpsValuesWithoutFirst}
 
-        versionPerfEntries[version] = {fps, profile : {categories}};
+
+        const {reactTimingEntries} = fpsRunResults;
+
+        const [mountEntry, ...updateEntries] = reactTimingEntries;
+
+        const mountTime = mountEntry.actualTime;
+
+        const averageUpdateTime = updateEntries.reduce((sum, entry) => sum + entry.actualTime, 0) / updateEntries.length || 1;
+
+        versionPerfEntries[version] = {fps, profile : {categories}, mountTime, averageUpdateTime};
 
         server.close();
       } catch (e) {
@@ -127,13 +136,13 @@ async function runBenchmarks() {
     }
 
     const table = new Table({
-      head: ['Version', 'Avg FPS', ...traceCategories,  'FPS Values']
+      head: ['Version', 'Avg FPS', "Render\n(Mount, Avg)", ...traceCategories,  'FPS Values']
     });
 
     Object.keys(versionPerfEntries).sort().forEach(version => {
       const versionResults = versionPerfEntries[version];
 
-      const {fps, profile} = versionResults;
+      const {fps, profile, mountTime, averageUpdateTime,} = versionResults;
 
       let traceResults = [];
 
@@ -150,6 +159,7 @@ async function runBenchmarks() {
       table.push([
         version,
         fps.weightedFPS.toFixed(2),
+        `${mountTime.toFixed(1)}, ${averageUpdateTime.toFixed(1)}`,
         ...traceResults,
           fpsNumbers.toString()
       ])

copy-to-public/react.production.min.js

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

runBenchmarks.js

@@ -0,0 +1,16 @@
+module.exports = function override(config, env) {
+    //do stuff with the webpack config...
+    console.log(`Environment: ${env}`)
+
+    if(env === "production") {
+        config.externals = {
+            "react" : "React",
+            "redux" : "Redux",
+            "react-dom" : "ReactDOM",
+            "react-redux" : "ReactRedux",
+        }
+    }
+
+
+    return config;
+}

sources/deeptree/.gitignore

@@ -0,0 +1,38 @@
+{
+  "name": "deeptree",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "chance": "^1.0.16",
+    "fps-emit": "file:../../fps-emit",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "react-redux": "^5.1.0",
+    "react-scripts": "2.0.3",
+    "redux": "^4.0.0",
+    "redux-starter-kit": "^0.4.3",
+    "reselect": "^3.0.1"
+  },
+  "scripts": {
+    "start": "react-app-rewired  start",
+    "build": "react-app-rewired  build",
+    "test": "react-app-rewired  --env=jsdom",
+    "eject": "react-scripts eject",
+    "test:e2e": "jest --watch"
+  },
+  "browserslist": {
+    "development": [
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 edge versions"
+    ],
+    "production": [
+      ">0.25%",
+      "not op_mini all",
+      "ie 11"
+    ]
+  },
+  "devDependencies": {
+    "react-app-rewired": "^1.5.2"
+  }
+}

sources/deeptree/README.md

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="static/css/bootstrap.min.css" rel="stylesheet">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+
+
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div class="container" id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+
+
+    <script type="text/javascript" src="redux.min.js"></script>
+    <script type="text/javascript" src="react.production.min.js"></script>
+    <script type="text/javascript" src="react-dom.production.min.js"></script>
+    <script type="text/javascript" src="react-redux.min.js"></script>
+  </body>
+</html>

sources/deeptree/config-overrides.js

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}