Add benchmarks page to documentation site

build.cake

@@ -20,7 +20,11 @@ Task("Benchmarks")
 
         DotNetCoreRun(
             $"{BENCHMARK_APPLICATIONS_PATH}/dotnet/Chr.Avro.Benchmarks.csproj",
-            $"{BENCHMARK_RESULTS_PATH}/dotnet.csv"
+            $"{BENCHMARK_RESULTS_PATH}/dotnet.csv",
+            new DotNetCoreRunSettings()
+            {
+                Configuration = configuration
+            }
         );
     });
 

docs/src/components/benchmarks/benchmarks-table.js

@@ -0,0 +1,105 @@
+import React, { useMemo } from 'react'
+
+import styles from './benchmarks-table.module.scss'
+
+export default ({ suites }) => {
+  const libraries = useMemo(() => {
+    const map = new Map()
+
+    for (const suite of suites) {
+      for (const result of suite.results) {
+        if (!map.has(result.library.id)) {
+          map.set(result.library.id, result.library)
+        }
+      }
+    }
+
+    return Array.from(map.values())
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }, [suites])
+
+  const grid = useMemo(() => suites.map(suite => {
+    const rows = []
+
+    for (const result of suite.results) {
+      let row = rows.find(r =>
+        r.component === result.component &&
+        r.iterations === result.iterations
+      )
+
+      if (!row) {
+        row = {
+          component: result.component,
+          iterations: result.iterations,
+          results: new Array(libraries.length).fill(null)
+        }
+
+        rows.push(row)
+      }
+
+      const index = libraries.findIndex(l => l.id === result.library.id)
+
+      if (index > -1) {
+        row.results[index] = {
+          averageValue: result.times.reduce((a, b) => a + b) / result.times.length,
+          values: result.times
+        }
+      }
+    }
+
+    return {
+      rows: rows
+        .map(row => ({
+          ...row,
+          component: row.component.toLowerCase(),
+          iterations: row.iterations.toLocaleString({
+            useGrouping: true
+          })
+        }))
+        .sort((a, b) => a.component.localeCompare(b.component)),
+      suite
+    }
+  }).sort((a, b) => a.suite.name.localeCompare(b.suite.name)), [suites])
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th colSpan={2} rowSpan={2}>Benchmark</th>
+          <th colSpan={libraries.length}>Average time (ms)</th>
+        </tr>
+        <tr>
+          {libraries.map(library =>
+            <th className={styles.column} key={library.id}>{library.name}</th>
+          )}
+        </tr>
+      </thead>
+
+      <tbody>
+        {grid.map(({ rows, suite }) => rows.map((row, index) =>
+          <tr key={index}>
+            {index === 0 &&
+              <th className={styles.suite} rowSpan={rows.length}>
+                {suite.name}
+              </th>
+            }
+
+            <td className={styles.component}>
+              <div>{row.component}</div>
+              <div className={styles.iterationCount}>{row.iterations} iterations</div>
+            </td>
+
+            {row.results.map((result, index) =>
+              <td className={result ? styles.result : styles.missing} key={index}>
+                {result
+                  ? result.averageValue.toFixed(3)
+                  : 'n/a'
+                }
+              </td>
+            )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

docs/src/components/benchmarks/benchmarks-table.module.scss

@@ -0,0 +1,29 @@
+@import '../../styles/colors';
+@import '../../styles/typography';
+
+.column {
+  width: 12em;
+}
+
+.component {
+  text-align: center;
+}
+
+.iteration-count {
+  color: $gray;
+  font-size: 0.8em;
+}
+
+.missing {
+  color: $gray;
+  text-align: center;
+}
+
+.result {
+  font-family: $code-font-family;
+  text-align: right;
+}
+
+.suite {
+  text-align: center;
+}

docs/src/components/site/navigation.js

@@ -36,6 +36,12 @@ const Navigation = ({ cliVerbs, dotnetNamespaces, ...others }) =>
         </Link>
       </li>
 
+      <li>
+        <Link to='/internals/benchmarks'>
+          Performance and benchmarks
+        </Link>
+      </li>
+
       <li>
         <Link to='/internals/schema-compatibility'>
           Schema compatibility

docs/src/pages/internals/benchmarks.js

@@ -0,0 +1,57 @@
+import { graphql, useStaticQuery } from 'gatsby'
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+import BenchmarksTable from '../../components/benchmarks/benchmarks-table'
+import ExternalLink from '../../components/site/external-link'
+
+const title = 'Performance and benchmarks'
+
+export default () => {
+  const {
+    allBenchmarkSuite: { nodes: suites },
+    site: {
+      siteMetadata: { githubUrl, projectName }
+    }
+  } = useStaticQuery(graphql`
+    query {
+      allBenchmarkSuite {
+        nodes {
+          id
+          name
+          results {
+            component
+            iterations
+            library {
+              id
+              name
+            }
+            times
+          }
+        }
+      }
+      site {
+        siteMetadata {
+          githubUrl
+          projectName
+        }
+      }
+    }
+  `)
+
+  return (
+    <>
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
+
+      <h1>{title}</h1>
+      <p>To ensure that changes to {projectName} don’t introduce major performance regressions (and to highlight areas where performance could be improved), we maintain a <ExternalLink to={`${githubUrl}/tree/master/benchmarks`}>set of rudimentary benchmarks</ExternalLink> to test serialization throughput.</p>
+      <p>Each benchmark runs five times, and we take the average time of those runs. These results were collected on a 2017 MacBook Pro (3.1 GHz Intel Core i5):</p>
+
+      <BenchmarksTable suites={suites} />
+
+      <p>In the future, we’re hoping to expand the benchmarks to test more complex situations as well as non-.NET libraries.</p>
+    </>
+  )
+}

docs/src/styles/global.scss

@@ -118,6 +118,10 @@ table {
   }
 }
 
+tbody tr:nth-of-type(2n) {
+  background-color: $off-white;
+}
+
 td, th {
   border: 0.05em solid $accent-gray;
   padding: 0.25em 0.75em;
@@ -126,7 +130,3 @@ td, th {
 th {
   font-weight: 600;
 }
-
-tr:nth-of-type(2n) {
-  background-color: $off-white;
-}