Add an index page based on bootstrap with charts

plokhotnyuk · Jun 25, 2016 · 5f982bc · 5f982bc
1 parent 90c4014
commit 5f982bc
Show file tree

Hide file tree

Showing 15 changed files with 12,199 additions and 1,292 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+jmh-result.json
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,7 @@
+body {
+    padding-top: 70px;
+}
+
+.ssa-chart {
+    height: 600px;
+}
diff --git a/images/body-bg.jpg b/images/body-bg.jpg
diff --git a/images/download-button.png b/images/download-button.png
diff --git a/images/github-button.png b/images/github-button.png
diff --git a/images/header-bg.jpg b/images/header-bg.jpg
diff --git a/images/highlight-bg.jpg b/images/highlight-bg.jpg
diff --git a/images/sidebar-bg.jpg b/images/sidebar-bg.jpg
diff --git a/index.html b/index.html
@@ -1,62 +1,181 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset='utf-8'>
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
-
-    <!--[if lt IE 9]>
-    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
-    <title>Scala Serialization by dkomanov</title>
-  </head>
-
-  <body>
-    <header>
-      <div class="inner">
-        <h1>Scala Serialization</h1>
-        <h2>Performance testing of serialization libraries</h2>
-        <a href="https://github.com/dkomanov/scala-serialization" class="button"><small>View project on</small> GitHub</a>
-      </div>
-    </header>
-
-    <div id="content-wrapper">
-      <div class="inner clearfix">
-        <section id="main-content">
-          <h3>
-<a id="prelude" class="anchor" href="#prelude" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Prelude</h3>
-
-<p>This page is a base for the <a href="https://medium.com/@dkomanov/scala-serialization-419d175c888a">Scala Serialization</a> article. Here are the recent results of the benchmark of Scala serialization libraries.</p>
-
-<h3>
-<a id="results" class="anchor" href="#results" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Results</h3>
-
-<h3>
-<a id="things" class="anchor" href="#things" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Things</h3>
-        </section>
-
-        <aside id="sidebar">
-          <a href="https://github.com/dkomanov/scala-serialization/zipball/master" class="button">
-            <small>Download</small>
-            .zip file
-          </a>
-          <a href="https://github.com/dkomanov/scala-serialization/tarball/master" class="button">
-            <small>Download</small>
-            .tar.gz file
-          </a>
-
-          <p class="repo-owner"><a href="https://github.com/dkomanov/scala-serialization"></a> is maintained by <a href="https://github.com/dkomanov">dkomanov</a>.</p>
-
-          <p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the Architect theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.</p>
-        </aside>
-      </div>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+  <title>Scala Serialization by Dmitry Komanov</title>
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+  <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+<nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="">Scala Serialization</a>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
+      <ul class="nav navbar-nav">
+        <li class="active"><a href="">Actual charts</a></li>
+        <li><a href="https://medium.com/@dkomanov/scala-serialization-419d175c888a">Original article on Medium</a></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="https://github.com/dkomanov/scala-serialization">Project on GitHub</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<div class="container-fluid">
+
+  <h1>Scala Serialization</h1>
+
+  <h2>Introduction</h2>
+
+  <p>
+    Here are present actual charts for performance comparison of serialization libraries for Scala for the corresponding
+    article <a href="https://medium.com/@dkomanov/scala-serialization-419d175c888a">&laquo;Scala
+    Serialization&raquo;</a>.
+  </p>
+
+  <p>
+    The legend for tests. &laquo;Site&raquo; is a data transfer object (DTO) with different types of data
+    (lists, enums, regular fields). &laquo;Events&raquo; are the primitive representation of this DTO for
+    Event Sourcing (many small objects). Data sizes (1k, 2k etc.) are the corresponding size of the DTO in JSON format.
+  </p>
+
+  <p>
+    Please notice, that unlike the article, here the performance tests are performed
+    via <a href="http://openjdk.java.net/projects/code-tools/jmh/">JMH</a> and using 2 threads.
+    The configuration of a hardware is Intel® Core™ i7–5600U CPU @ 2.60GHz × 4 (2 core + 2 HT) with 16 GB RAM.
+  </p>
+
+  <h2>Charts</h2>
+
+  <ul>
+    <li><a href="#site-both">Site Two-Way</a></li>
+    <li><a href="#events-both">Events Two-Way</a></li>
+    <li><a href="#site-serialization">Site Serialization</a></li>
+    <li><a href="#site-deserialization">Site Deserialization</a></li>
+    <li><a href="#events-serialization">Events Serialization</a></li>
+    <li><a href="#events-deserialization">Events Deserialization</a></li>
+  </ul>
+
+  <div class="btn-toolbar" role="toolbar" aria-label="...">
+    <div class="btn-group" role="group" aria-label="avg">
+      <button class="btn disabled">Time units:</button>
+      <button class="btn btn-default ssa-value-btn" data-property="avg">avg</button>
+      <button class="btn btn-default ssa-value-btn" data-property="p0">p0</button>
+      <button class="btn btn-default ssa-value-btn" data-property="p50">p50</button>
+      <button class="btn btn-default ssa-value-btn" data-property="p95">p95</button>
+      <button class="btn btn-default ssa-value-btn" data-property="p100">p100</button>
     </div>
+  </div>
+
+  <small class="text-muted">
+    avg - average, p0 - percentile 0 (min), p50 - percentile 50 (median), p95 - percentile 95, p100 - percentile 100
+    (max)
+  </small>
+
+  <h3>
+    <a name="site-both"></a>
+    Site Two-Way
+  </h3>
+
+  <div class="site-both ssa-chart"></div>
+
+  <p>
+    <button class="btn btn-default" type="button" data-toggle="collapse" data-target=".site-both-raw-data">Raw data</button>
+  </p>
+
+  <div class="site-both-raw-data collapse"></div>
+
+  <h3>
+    <a name="events-both"></a>
+    Events Two-Way
+  </h3>
+
+  <div class="events-both ssa-chart"></div>
+
+  <p>
+    <button class="btn btn-default" type="button" data-toggle="collapse" data-target=".events-both-raw-data">Raw data</button>
+  </p>
+
+  <div class="events-both-raw-data collapse"></div>
+
+  <h3>
+    <a name="site-serialization"></a>
+    Site Serialization
+  </h3>
+
+  <div class="site-serialization ssa-chart"></div>
+
+  <p>
+    <button class="btn btn-default" type="button" data-toggle="collapse" data-target=".site-serialization-raw-data">Raw data</button>
+  </p>
+
+  <div class="site-serialization-raw-data collapse"></div>
+
+  <h3>
+    <a name="site-deserialization"></a>
+    Site Deserialization
+  </h3>
+
+  <div class="site-deserialization ssa-chart"></div>
+
+  <p>
+    <button class="btn btn-default" type="button" data-toggle="collapse" data-target=".site-deserialization-raw-data">Raw data</button>
+  </p>
+
+  <div class="site-deserialization-raw-data collapse"></div>
+
+  <h3>
+    <a name="events-serialization"></a>
+    Events Serialization
+  </h3>
+
+  <div class="events-serialization ssa-chart"></div>
+
+  <p>
+    <button class="btn btn-default" type="button" data-toggle="collapse" data-target=".events-serialization-raw-data">Raw data</button>
+  </p>
+
+  <div class="events-serialization-raw-data collapse"></div>
+
+  <h3>
+    <a name="events-deserialization"></a>
+    Events Deserialization
+  </h3>
+
+  <div class="alert alert-warning" role="alert">
+    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+    In this benchmark Chill failed with "Buffer underflow" exception.
+  </div>
+
+  <div class="events-deserialization ssa-chart"></div>
+
+  <p>
+    <button class="btn btn-default" type="button" data-toggle="collapse" data-target=".events-deserialization-raw-data">Raw data</button>
+  </p>
+
+  <div class="events-deserialization-raw-data collapse"></div>
+
+  <p>
+    &nbsp;
+  </p>
+
+  <footer>
+    Powered by <a href="https://pages.github.com/">GitHub Pages</a>. &copy; Dmitry Komanov
+  </footer>
+
+</div>
 
-
-  </body>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+<script src="//www.gstatic.com/charts/loader.js"></script>
+<script src="js/charts.js"></script>
+</body>
 </html>
diff --git a/javascripts/main.js b/javascripts/main.js