chore(benchpress): add a ngClass benchmark

Author: drpicox

benchmarks/ng-class-bp/app.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var app = angular.module('ngClassBenchmark', []);
+
+app.controller('DataController', function DataController($scope) {
+
+  this.numberOfTodos = 1000;
+  this.implementation = 'tableOptimized';
+  this.completedPeriodicity = 3;
+  this.importantPeriodicity = 23;
+  this.urgentPeriodicity = 97;
+  this.todos = buildTodos(100);
+  configureTodos(this.todos, 0, this);
+
+  benchmarkSteps.push({
+    name: 'setup',
+    fn: function() {
+      this.todos = [];
+      $scope.$apply();
+      this.todos = buildTodos(this.numberOfTodos);
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: 'create',
+    fn: function() {
+      configureTodos(this.todos, 0, this);
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: '$apply',
+    fn: function() {
+      $scope.$apply();
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'update',
+    fn: function() {
+      configureTodos(this.todos, 1, this);
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: 'unclass',
+    fn: function() {
+      configureTodos(this.todos, -1, this);
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: 'class',
+    fn: function() {
+      configureTodos(this.todos, 0, this);
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: 'destroy',
+    fn: function() {
+      this.todos.length = 0;
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  function buildTodos(count) {
+    var todos = [];
+    var i;
+    for (i = 0; i < count; i++) {
+      todos.push({
+        id: i + 1,
+        completed: false,
+        important: false,
+        urgent: false
+      });
+    }
+    return todos;
+  }
+
+  function configureTodos(todos, offset, config) {
+    var i, todo;
+    for (i = 0; i < todos.length; i++) {
+      todo = todos[i];
+      todo.completed = offset === i % config.completedPeriodicity;
+      todo.important = offset === i % config.importantPeriodicity;
+      todo.urgent = offset === i % config.urgentPeriodicity;
+    }
+  }
+
+});

benchmarks/ng-class-bp/bp.conf.js

@@ -0,0 +1,15 @@
+/* eslint-env node */
+
+'use strict';
+
+module.exports = function(config) {
+  config.set({
+    scripts: [{
+      id: 'angular',
+      src: '/build/angular.js'
+    },
+    {
+      src: 'app.js'
+    }]
+  });
+};

benchmarks/ng-class-bp/main.html

@@ -0,0 +1,113 @@
+<style>
+  .gold {
+    background: gold;
+  }
+  .silver {
+    background: silver;
+  }
+  .table tbody tr > td.success {
+    background-color: #dff0d8;
+  }
+
+  .table tbody tr > td.error {
+    background-color: #f2dede;
+  }
+
+  .table tbody tr > td.warning {
+    background-color: #fcf8e3;
+  }
+
+  .table tbody tr > td.info {
+    background-color: #d9edf7;
+  }
+  .completed {
+    text-decoration: line-through;
+  }
+  .important {
+    font-weight: bold;
+  }
+  .urgent {
+      color: red;
+  }
+</style>
+<div ng-app="ngClassBenchmark" ng-cloak>
+  <div ng-controller="DataController as benchmark">
+    <h3>Parameters</h3>
+    <p>
+      <label>Number of todos</label><br>
+      <input type="number" ng-model="benchmark.numberOfTodos">
+    </p>
+    <p>
+      Implementation:<br>
+      <label>
+        <input type="radio" ng-model="benchmark.implementation" value="tableOptimized">
+        Table optimized (condition && string-class)
+      </label><br>
+      <label>
+        <input type="radio" ng-model="benchmark.implementation" value="table">
+        Table ({class: condition})
+      </label><br>
+      <label>
+        <input type="radio" ng-model="benchmark.implementation" value="list">
+        Todos list ({completed: ..., urgent: ..., ...})
+      </label><br>
+    </p>
+
+    <br>
+    <h3>Example</h3>
+    <div ng-switch="benchmark.implementation">
+      <table ng-switch-when="tableOptimized" class="table">
+        <thead>
+          <tr>
+            <th>todo #id</th>
+            <th>completed?</th>
+            <th>urgent?</th>
+            <th>important?</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="todo in benchmark.todos track by todo.id"
+            ng-class="todo.completed && 'active'"
+            ng-class-even="todo.completed && todo.important && 'gold'"
+            ng-class-odd="todo.completed && todo.important && 'silver'"
+            >
+              <td>#{{todo.id}}</td>
+              <td>{{todo.completed}}</td>
+              <td ng-class="todo.urgent && 'danger'">{{todo.urgent}}</td>
+              <td ng-class="todo.important && 'success'">{{todo.important}}</td>
+          </tr>
+        </tbody>
+      </table>
+      <table ng-switch-when="table" class="table">
+        <thead>
+          <tr>
+            <th>todo #id</th>
+            <th>completed?</th>
+            <th>urgent?</th>
+            <th>important?</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="todo in benchmark.todos track by todo.id"
+            ng-class="{active: todo.completed}"
+            ng-class-even="{gold: todo.completed && todo.important}"
+            ng-class-odd="{silver: todo.completed && todo.important}"
+            >
+              <td>#{{todo.id}}</td>
+              <td>{{todo.completed}}</td>
+              <td ng-class="{danger: todo.urgent}">{{todo.urgent}}</td>
+              <td ng-class="{success: todo.important}">{{todo.important}}</td>
+          </tr>
+        </tbody>
+      </table>
+      <ul ng-switch-when="list">
+        <li ng-repeat="todo in benchmark.todos track by todo.id"
+          ng-class="{
+            completed: todo.completed,
+            urgent: todo.urgent,
+            important: todo.important
+          }">#{{todo.id}}</li>
+      </ul>
+    </div>
+  </div>
+</div>