benchmarks

README.md

@@ -20,7 +20,7 @@
 
 ## Motivation
 
-asm-dom is a minimal WebAssembly virtual DOM to build C++ Web Apps. This means that you can write an entire Web App in C++ and compile it to WebAssembly using [Emscripten](http://kripken.github.io/emscripten-site/), asm-dom will call DOM APIs for you. This will produce an app that `aims to execute at native speed by taking advantage of common hardware capabilities`, also, you can use your C/C++ code without any change, you haven't to create a binding layer to use it (as we have to do if we want to use a C++ lib from JS). Basically we are creating an app in C++ that call javascript if needed instead of the opposite. If you are interested in performance, please see [this](https://github.com/mbasso/asm-dom/tree/master/benchmarks).
+asm-dom is a minimal WebAssembly virtual DOM to build C++ Web Apps. This means that you can write an entire Web App in C++ and compile it to WebAssembly (or asmjs as fallback) using [Emscripten](http://kripken.github.io/emscripten-site/), asm-dom will call DOM APIs for you. This will produce an app that `aims to execute at native speed by taking advantage of common hardware capabilities`, also, you can use your C/C++ code without any change, you haven't to create a binding layer to use it (as we have to do if we want to use a C++ lib from JS). Basically we are creating an app in C++ that call javascript if needed instead of the opposite. You can write only once in C++ and share as much code as possible with desktop/mobile apps and web site. If you are interested in performance, please see [this](https://github.com/mbasso/asm-dom/tree/master/benchmarks).
 
 asm-dom is a low-level virtual DOM library. It is unopinionated with regards to how you should structure your application.
 

benchmarks/.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": ["es2015", "stage-0"],
+  "plugins": [
+    "transform-object-rest-spread",
+    "transform-es3-member-expression-literals",
+    "transform-es3-property-literals"
+  ],
+  "env": {
+    "commonjs": {
+      "plugins": [
+        ["transform-es2015-modules-commonjs", { "loose": true }]]
+    },
+    "es": {
+      "plugins": []
+    }
+  }
+}

benchmarks/.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig helps developers define and maintain
+# consistent coding styles between different editors and IDEs.
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

benchmarks/.eslintignore

@@ -0,0 +1,5 @@
+**/dist/**
+**/node_modules/**
+**/compiled/**
+**/src/prefix.js
+**/src/postfix.js

benchmarks/.eslintrc

@@ -0,0 +1,34 @@
+{
+  "ecmaFeatures": {
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "global-require": "off",
+    "object-shorthand": "off",
+    "no-mixed-operators": "off",
+    "no-plusplus": "off",
+    "no-continue": "off",
+    "dot-notation": "off",
+    "no-restricted-syntax": "off",
+    "quote-props": "off",
+    "no-underscore-dangle": "off",
+    "no-param-reassign": "off",
+    "valid-jsdoc": 2,
+    "quotes": [2, "single"],
+    "strict": [2, "never"]
+  },
+  "extends": "airbnb/base",
+  "globals": {
+    "describe"   : false,
+    "it"         : false,
+    "before"     : false,
+    "beforeEach" : false,
+    "after"      : false,
+    "afterEach"  : false
+  }
+}

benchmarks/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+*.log
+lib
+es
+coverage
+_book
+.nyc_output
+.vscode
+package-lock.json

benchmarks/LICENSE.md

@@ -0,0 +1,24 @@
+Copyright for portions of project asm-dom-todomvc are held by Yassine Elouafi, 2015 as part of project snabbdom-todomvc. All other copyright for project asm-dom-todomvc are held by Matteo Basso.
+
+
+The MIT License (MIT)
+
+Copyright (c) 2017 Matteo Basso
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

benchmarks/README.md

@@ -0,0 +1,27 @@
+# Benchmarks
+
+---
+
+**Please read the entire file, there are some considerations that explain the results at the end of this page**
+
+---
+
+In this directory you can find some code to measure the performance of asm-dom. You can find the results of asm-dom and [snabbdom](https://github.com/snabbdom/snabbdom), this allows you to make a comparison between the performance of asm-dom and a js virtual DOM. Before jumping to conclusions please read this list, this underline some important aspects:
+
+- asm-dom aims to let you write high perfomance web apps in C++. Your code will be compiled into WebAssembly, this means that it will run until 4 times faster (you can see that in the second test). However asm-dom needs to update the DOM and unfortunately, at the moment, this involves javascript. This means that the internals of asm-dom will call js for you and they will deal with the overhead of the binding between JS and WASM. In the future, without these bindings, asm-dom will be even more powerful. You have to be aware that, for the reason that we have just explained, **the results that you will see later won't represent the performance of your entire app, your code, your algorithms and so on will be a lot faster than this (they will be like the second test). asm-dom will be the only place that will deal with the overhead of the js <-> wasm communication.** 
+
+- asm-dom does not leave garbage after the execution of its tests, while snabbdom might leave some garbage that need to be collected by the garbage collector
+
+There are 4 tests at the moment:
+
+- `create nodes`: this test create 700 nodes (100 nodes with 3 children, the last of which has 3 more children). Please note that, as we said before, **in the case of asm-dom, this test creates but also destroys the nodes**. While, in the case of snabbdom, the deletion is managed by the garbage collector and it is not measured.
+
+- `create and diff equal nodes`: this test runs the `patch` function 100 times with 2 equal nodes (2 nodes with 100 children, each of them has 1 child), so, the DOM will be not updated.
+
+- `create and diff different nodes`: this test runs the `patch` function 100 times with 2 nodes with different attributes (2 nodes with 100 children, each of them has 1 child), so, the DOM will be updated.
+
+- `create and add/remove nodes`: this test runs the `patch` function 100 times with 2 nodes, one with 100 children and one without children.
+
+Here you can find screenshots of the tests (lower is better) runned on a MacBook Pro (Retina, 13-inch, Late 2013), Processor 2,4 GHz Intel Core i5, Memory 8 GB 1600 MHz DDR3:
+
+![Benchmarks](benchmarks.jpg)