Refactored apps as simple as possible, sharing code in common

slangeberg · Nov 5, 2015 · 1bec84a · 1bec84a
1 parent bc0de2d
commit 1bec84a
Show file tree

Hide file tree

Showing 9 changed files with 423 additions and 163 deletions.
diff --git a/app-dom.html b/app-dom.html
@@ -1,35 +1,35 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
     <title>DOM JS Performance Evaluation</title>
-    <link rel="stylesheet" href="css/base.css" />
-  </head>
-  <body>
-    <h1>DOM JS Performance Evaluation</h1>
+    <link rel="stylesheet" href="css/base.css"/>
+</head>
+<body>
+<h1>DOM JS Performance Evaluation</h1>
 
-    <h4>Example Details</h4>
-    <p>This is written with native DOM operations via vanilla Javascript.</p>
+<h4>Example Details</h4>
 
-    <div>
-      <table id="item_table" class="table">
+<p>This is written with native DOM operations via vanilla Javascript.</p>
+
+<div>
+    <table id="item_table" class="table">
         <caption>DOM populated table</caption>
         <thead>
         <tr>
-          <th>#</th>
-          <th>&nbsp;</th>
-          <th>Artist</th>
-          <th>Album</th>
-          <th>Title</th>
-          <th>Played At</th>
+            <th>#</th>
+            <th>&nbsp;</th>
+            <th>Artist</th>
+            <th>Album</th>
         </tr>
         </thead>
         <tbody id="item_table_body">
 
         </tbody>
-      </table>
-    </div>
+    </table>
+</div>
+
+<script src="dom-bundle.js"></script>
 
-    <script src="js/dom-app.js"></script>
-  </body>
-</html>
+</body>
+</html>
diff --git a/app-react.html b/app-react.html
@@ -26,6 +26,6 @@ <h4>Example Details</h4>
         If you checked out the source from GitHub make sure to run <code>grunt</code>.
       </p>
     </div>
-    <script src="bundle.js"></script>
+    <script src="react-bundle.js"></script>
   </body>
 </html>
diff --git a/dom-bundle.js b/dom-bundle.js
@@ -0,0 +1,183 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+var executionTimes = [],
+    startTime = null,
+
+//Explicitly copying, as I'm skeptical, when the #'s never change
+initMemory = {
+    jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
+    totalJSHeapSize: performance.memory.totalJSHeapSize,
+    usedJSHeapSize: performance.memory.usedJSHeapSize
+};
+
+//Read url params for: maxRows
+var getMaxRows = function getMaxRows() {
+    var result = 500;
+    var loc = location.search.slice(1);
+    if (loc) {
+        var params = {};
+        var tokens = loc.split('&');
+        tokens.forEach(function (token) {
+            var bits = token.split('=');
+            params[bits[0].toLowerCase()] = bits[1];
+        });
+        if (params['maxRows'.toLowerCase()]) {
+            result = parseInt(params['maxRows'.toLowerCase()], 10);
+        }
+    }
+    console.log("getMaxRows(): ", result);
+    return result;
+};
+
+//////////////
+
+module.exports = {
+
+    maxRows: getMaxRows(),
+    pageSize: 50,
+    updateEvery: 750,
+    rows: [],
+
+    runApp: function runApp(worker) {
+
+        if (!startTime) {
+            startTime = performance.now();
+        }
+
+        var _lib = this;
+
+        var updateInterval = setInterval(function () {
+
+            if (_lib.rows.length < _lib.maxRows) {
+
+                //Simulate that user 'scrolled' to bottom
+
+                // simulate updating model with server results, after a scroll
+
+                var pageSet = _lib.getNextPageSet();
+                _lib.rows = _lib.rows.concat(pageSet);
+
+                var t0 = performance.now();
+
+                worker(pageSet, _lib.rows);
+
+                var t1 = performance.now();
+
+                _lib.scrollToBottom();
+
+                _lib.addExecutionTime(t1 - t0);
+            } else {
+                clearInterval(updateInterval);
+
+                _lib.printSummary();
+            }
+        }, _lib.updateEvery);
+    },
+
+    addExecutionTime: function addExecutionTime(time) {
+        executionTimes.push(time);
+    },
+
+    getNextPageSet: function getNextPageSet() {
+
+        var pageSet = [];
+        var last = this.rows[this.rows.length - 1];
+
+        for (var i = 0; i < this.pageSize; i++) {
+            var id = (last ? last.id : 0) + 1;
+            var row = {
+                id: id,
+                rowNum: id,
+                artist: 'Artist ' + id,
+                album: 'Album ' + id
+            };
+
+            last = row;
+
+            pageSet.push(row);
+        }
+
+        return pageSet;
+    },
+
+    mean: function mean(sequence) {
+        var sum = 0;
+        sequence.forEach(function (val) {
+            sum += val;
+        });
+        return sum / sequence.length;
+    },
+
+    median: function median(sequence) {
+        //copy
+        sequence = sequence.slice();
+        // note that direction doesn't matter
+        sequence.sort(this.sortAscending);
+        if (sequence.length >= 3) {
+            return sequence[Math.ceil(sequence.length / 2)];
+        }
+        return sequence[0];
+    },
+
+    printSummary: function printSummary() {
+
+        executionTimes.sort(this.sortAscending);
+
+        var meanValue = this.mean(executionTimes).toFixed(4);
+        var medianValue = this.median(executionTimes).toFixed(4);
+        var finalTime = performance.now();
+        var totalTime = (finalTime - startTime).toFixed(4);
+
+        var printMemory = function printMemory(target) {
+            return 'jsHeapSizeLimit: ' + target.jsHeapSizeLimit + ', totalJSHeapSize: ' + target.totalJSHeapSize + ', usedJSHeapSize: ' + target.usedJSHeapSize;
+        };
+
+        var stats = ["------------------------------", "Execution completed with parameters: ", "maxRows: " + this.maxRows, "------------------------------", 'Execution times: ' + executionTimes, 'Avg. time: ' + meanValue + 'ms', 'Median time: ' + medianValue + 'ms', 'Total time: ' + totalTime + 'ms, ' + (totalTime / 1000).toFixed(2) + 's', "------------------------------", 'Initial memory: ' + printMemory(initMemory), 'Final memory: ' + printMemory(performance.memory)];
+
+        var div = document.createElement('div');
+        div.innerHTML = stats.join('<br/>');
+        document.body.appendChild(div);
+
+        this.scrollToBottom();
+    },
+
+    scrollToBottom: function scrollToBottom() {
+        var docHeight = document.body.offsetHeight;
+        docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
+
+        //console.log("scrollToBottom() - scroll to docHeight: ", docHeight);
+
+        window.scrollTo(0, docHeight);
+    },
+
+    sortAscending: function sortAscending(a, b) {
+        return a - b;
+    }
+};
+
+},{}],2:[function(require,module,exports){
+'use strict';
+
+var lib = require('./common.js');
+
+//////
+
+var table = document.getElementById('item_table_body');
+
+var rows = [];
+
+lib.runApp(function (pageSet, allRows) {
+    // simulate updating model with server results, after a scroll
+    pageSet.forEach(function (row) {
+        writeRow(row);
+    });
+});
+
+function writeRow(row) {
+    var tr = document.createElement('tr');
+    tr.innerHTML = "<td>" + row.rowNum + "</td>" + "<td>&nbsp;</td>" + "<td>" + row.artist + "</td>" + "<td>" + row.album + "</td>";
+    table.appendChild(tr);
+}
+
+},{"./common.js":1}]},{},[2]);
diff --git a/index.html b/index.html
@@ -19,8 +19,8 @@ <h1>React JS vs DOM JS Throwdown</h1>
 
     <p>Click to launch:</p>
     <p>
-       <button><a href="app-dom.html" target="_blank">DOM Performance Test</a></button>
-       <button><a href="app-react.html" target="_blank">React.js Performance Test</a></button>
+       <button><a href="app-dom.html?maxRows=500" target="_blank">DOM Performance Test</a></button>
+       <button><a href="app-react.html?maxRows=500" target="_blank">React.js Performance Test</a></button>
     </p>
   </body>
 </html>
diff --git a/js/common.js b/js/common.js
@@ -1,7 +1,7 @@
 'use strict';
 
 var executionTimes = [],
-    startTime = performance.now(),
+    startTime = null,
     //Explicitly copying, as I'm skeptical, when the #'s never change
     initMemory = {
         jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
@@ -28,22 +28,87 @@ var getMaxRows = function() {
     return result;
 }
 
-module.exports = {
+//////////////
 
+module.exports = {
 
     maxRows: getMaxRows(),
+    pageSize: 50,
+    updateEvery: 750,
+    rows: [],
+
+    runApp: function(worker) {
+
+        if (!startTime) {
+            startTime = performance.now();
+        }
+
+        var _lib = this;
+
+        var updateInterval = setInterval(function () {
+
+            if (_lib.rows.length < _lib.maxRows) {
+
+                //Simulate that user 'scrolled' to bottom
+
+                // simulate updating model with server results, after a scroll
+
+                var pageSet = _lib.getNextPageSet();
+                _lib.rows = _lib.rows.concat(pageSet);
+
+                var t0 = performance.now();
+
+                worker(pageSet, _lib.rows);
+
+                var t1 = performance.now();
+
+                _lib.scrollToBottom();
+
+                _lib.addExecutionTime(t1 - t0);
+
+            } else {
+                clearInterval(updateInterval);
+
+                _lib.printSummary();
+            }
+
+        }, _lib.updateEvery);
+    },
 
     addExecutionTime: function (time) {
         executionTimes.push(time);
     },
 
+    getNextPageSet: function () {
+
+        var pageSet = [];
+        var last = this.rows[this.rows.length - 1];
+
+        for (var i = 0; i < this.pageSize; i++) {
+            var id = (last ? last.id : 0) + 1;
+            var row = {
+                id: id,
+                rowNum: id,
+                artist: 'Artist ' + id,
+                album: 'Album ' + id
+            };
+
+            last = row;
+
+            pageSet.push(row);
+        }
+
+        return pageSet;
+    },
+
     mean: function(sequence) {
         var sum = 0;
         sequence.forEach(function(val){
             sum += val;
         });
         return sum / sequence.length;
     },
+
     median: function(sequence) {
         //copy
         sequence = sequence.slice();
@@ -65,7 +130,9 @@ module.exports = {
         var totalTime = (finalTime - startTime).toFixed(4);
 
         var printMemory = function(target) {
-            return 'jsHeapSizeLimit: ' + target.jsHeapSizeLimit + ', totalJSHeapSize: ' + target.totalJSHeapSize + ', usedJSHeapSize: ' + target.usedJSHeapSize;
+            return 'jsHeapSizeLimit: ' + target.jsHeapSizeLimit
+                + ', totalJSHeapSize: ' + target.totalJSHeapSize
+                + ', usedJSHeapSize: ' + target.usedJSHeapSize;
         };
 
         var stats = [

diff --git a/js/dom-app.js b/js/dom-app.js
@@ -1,3 +1,26 @@
 'use strict';
 
-console.log("dom-app.js()");
+var lib = require('./common.js');
+
+//////
+
+var table = document.getElementById('item_table_body');
+
+var rows = [];
+
+lib.runApp(function(pageSet, allRows){
+    // simulate updating model with server results, after a scroll
+    pageSet.forEach(function(row){
+        writeRow(row);
+    });
+});
+
+function writeRow(row) {
+    var tr = document.createElement('tr');
+    tr.innerHTML =
+        "<td>" + row.rowNum + "</td>"
+        + "<td>&nbsp;</td>"
+        + "<td>" + row.artist + "</td>"
+        + "<td>" + row.album + "</td>";
+    table.appendChild(tr);
+}