Add non-keyed test

krausest · Feb 18, 2019 · 8371b20 · 8371b20
1 parent 2b9b622
commit 8371b20
Show file tree

Hide file tree

Showing 6 changed files with 279 additions and 1 deletion.
diff --git a/frameworks/non-keyed/scarletsframe/.babelrc b/frameworks/non-keyed/scarletsframe/.babelrc
@@ -0,0 +1,3 @@
+{
+    "presets" : [ "babel-preset-es2015"]
+}
diff --git a/frameworks/non-keyed/scarletsframe/index.html b/frameworks/non-keyed/scarletsframe/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>ScarletsFrame-"keyed"</title>
+    <link href="/css/currentStyle.css" rel="stylesheet"/>
+</head>
+<body>
+    <div class="container" sf-controller="bench-mark">
+        <div class="jumbotron">
+            <div class="row">
+                <div class="col-md-6">
+                    <h1>ScarletsFrame-"keyed"</h1>
+                </div>
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="col-sm-6 smallpad">
+                            <button type='button' class='btn btn-primary btn-block' id='run' sf-click='b_run()'>Create 1,000 rows</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type='button' class='btn btn-primary btn-block' id='runlots' sf-click='b_runlots()'>Create 10,000 rows</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type='button' class='btn btn-primary btn-block' id='add' sf-click='b_add()'>Append 1,000 rows</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type='button' class='btn btn-primary btn-block' id='update' sf-click='b_update()'>Update every 10th row</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type='button' class='btn btn-primary btn-block' id='clear' sf-click='b_clear()'>Clear</button>
+                        </div>
+                        <div class="col-sm-6 smallpad">
+                            <button type='button' class='btn btn-primary btn-block' id='swaprows' sf-click='b_swaprows()'>Swap Rows</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <table class="table table-hover table-striped test-data">
+            <tbody id="tbody">
+                <tr sf-repeat-this="x in list" class="{{ x.isSelected ? 'danger' : '' }}">
+                    <td class="col-md-1">{{ x.id }}</td>
+                    <td class="col-md-4">
+                        <a class="lbl" sf-click="b_select(this)">{{ x.label }}</a>
+                    </td>
+                    <td class="col-md-1">
+                     <a class="remove" sf-click="b_remove(this)">
+                       <span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span>
+                     </a>
+                    </td>
+                    <td class="col-md-6"></td>
+                </tr>
+            </tbody>
+        </table>
+        <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+    </div>
+    <script src='dist/main.js'></script>
+</body>
+</html>
diff --git a/frameworks/non-keyed/scarletsframe/package.json b/frameworks/non-keyed/scarletsframe/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "js-framework-benchmark-scarletsframe",
+  "version": "1.0.0",
+  "description": "ScarletsFrame demo",
+  "main": "index.js",
+  "js-framework-benchmark": {
+    "frameworkVersion": ""
+  },
+  "scripts": {
+    "build-dev": "webpack -w -d",
+    "build-prod": "webpack -p"
+  },
+  "keywords": [
+    "scarletsframe"
+  ],
+  "author": "StefansArya",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/krausest/js-framework-benchmark",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/krausest/js-framework-benchmark.git"
+  },
+  "dependencies": {
+    "scarletsframe": "0.10.4"
+  },
+  "devDependencies": {
+    "babel-core": "6.24.1",
+    "babel-loader": "7.0.0",
+    "babel-preset-es2015": "6.24.1",
+    "webpack": "2.5.1"
+  }
+}
diff --git a/frameworks/non-keyed/scarletsframe/src/main.js b/frameworks/non-keyed/scarletsframe/src/main.js
@@ -0,0 +1,144 @@
+var sf = require('scarletsframe');
+var $ = sf.dom;
+
+// Declare variable for the model
+sf.model.for('bench-mark', function(self){
+    self.list = [];
+    self.selected = -1;
+    // window.test = self;
+});
+
+// Declare functions that controlling the model
+sf.controller.run('bench-mark', function(self, root){
+    var Measurer = root('measurer');
+
+    var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
+    var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
+    var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
+
+    var nextId = 1;
+
+    function _random(max) {
+        return Math.round(Math.random()*1000)%max;
+    }
+
+    self.buildData = function(count = 1000){
+        var data = [];
+        for (var i = 0; i < count; i++)
+            data.push({
+                id: nextId++,
+                isSelected:false,
+                label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
+            });
+
+        return data;
+    }
+
+    self.unselect = function(){
+        if(self.selected === -1) return;
+
+        if(self.list[self.selected] !== undefined){
+            self.list[self.selected].isSelected = false;
+            self.list.refresh(self.selected);
+        }
+
+        self.selected = -1;
+    }
+
+    // Handle button
+    self.b_run = function(){
+        // Measurer.start("run");
+        self.list = self.buildData();
+        self.selected = -1;
+        // Measurer.stop();
+    }
+
+    self.b_runlots = function(){
+        // Measurer.start("runLots");
+        self.list = self.buildData(10000);
+        self.selected = -1;
+        // Measurer.stop();
+    }
+
+    self.b_add = function(){
+        // Measurer.start("add");
+        self.list = self.list.concat(self.buildData(1000));
+        // Measurer.stop();
+    }
+
+    self.b_update = function(){
+        // Measurer.start("update");
+        for (var i = 0; i < self.list.length; i += 10) {
+            self.list[i].label += ' !!!';
+            self.list.refresh(i, 'label');
+        }
+        // Measurer.stop();
+    }
+
+    self.b_clear = function(){
+        // Measurer.start("clear");
+        self.list.splice(0);
+        self.selected = -1;
+        // Measurer.stop();
+    }
+
+    self.b_swaprows = function(){
+        // Measurer.start("swapRows");
+
+        if(self.list.length > 998)
+            self.list.swap(1, 998);
+
+        // Measurer.stop();
+    }
+
+    self.b_select = function(el){
+        // Measurer.start("select");
+        self.unselect();
+
+        var rowIndex = $.parent(el, '[sf-bind-list]');
+        self.selected = rowIndex = sf.model.index(rowIndex);
+
+        self.list[rowIndex].isSelected = true;
+        self.list.refresh(rowIndex);
+        // Measurer.stop();
+    }
+
+    self.b_remove = function(el){
+        // Measurer.start("delete");
+
+        var rowIndex = $.parent(el, '[sf-bind-list]');
+        rowIndex = sf.model.index(rowIndex);
+
+        self.list.splice(rowIndex, 1);
+
+        if(rowIndex === self.selected)
+            self.selected = -1;
+
+        // Measurer.stop();
+    }
+});
+
+// Declare measure function in different scope
+sf.controller.run('measurer', function(self){
+    var startTime;
+    var lastMeasure;
+
+    self.start = function(name) {
+        startTime = performance.now();
+        lastMeasure = name;
+    }
+    self.stop = function() {
+        var last = lastMeasure;
+        if (lastMeasure) {
+            window.setTimeout(function () {
+                lastMeasure = null;
+                var stop = performance.now();
+                var duration = 0;
+                console.log(last+" took "+(stop-startTime));
+            }, 0);
+        }
+    }
+});
+
+// We're not using dynamic resource loader
+sf.loader.off();
diff --git a/frameworks/non-keyed/scarletsframe/webpack.config.js b/frameworks/non-keyed/scarletsframe/webpack.config.js
@@ -0,0 +1,40 @@
+'use strict';
+var path = require('path')
+var cache = {};
+var loaders = [
+	{
+		test: /\.js$/,
+		loader: 'babel-loader'
+	},
+	{
+		test: /\.css$/,
+		loader: 'style-loader!css-loader'
+	}
+];
+var extensions = [
+	'.js', '.jsx', '.es6.js'
+];
+
+module.exports = [{
+	cache: cache,
+	module: {
+		loaders: loaders
+	},
+	entry: {
+		main: './src/main.js',
+	},
+	output: {
+		path: path.resolve(__dirname, "dist"),
+		filename: '[name].js'
+	},
+	resolve: {
+		extensions: extensions,
+		modules: [
+			__dirname,
+			path.resolve(__dirname, "src"),
+			"node_modules"
+		],
+		alias: {
+		}
+	}
+}];