From 845633c88d048445f21290ff11f4d3194d97b2dc Mon Sep 17 00:00:00 2001 From: Leo Horie Date: Thu, 27 Oct 2016 20:29:29 -0400 Subject: [PATCH] clean up dbmon --- README.md | 2 +- examples/dbmonster/mithril-bundle/app.js | 49 ---------------- examples/dbmonster/mithril-bundle/index.html | 17 ------ examples/dbmonster/mithril/app.js | 60 ++++++++++---------- examples/dbmonster/mithril/index.html | 5 +- 5 files changed, 31 insertions(+), 102 deletions(-) delete mode 100644 examples/dbmonster/mithril-bundle/app.js delete mode 100644 examples/dbmonster/mithril-bundle/index.html diff --git a/README.md b/README.md index d261b30f..62131da7 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ Partial documentation can be found in the [`/docs`](docs) directory ## Performance -Mithril's virtual DOM engine is around 500 lines of well organized code and it implements a modern search space reduction diff algorithm and a DOM recycling mechanism, which translate to top-of-class performance. See the [dbmon implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril/index.html) (for comparison, here are dbmon implementations for [React v15.3.2](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/react/index.html), and [Angular v2.0.0-beta.17](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/angular/index.html). All implementations are naive (i.e. apples-to-apples, no optimizations) +Mithril's virtual DOM engine is around 500 lines of well organized code and it implements a modern search space reduction diff algorithm and a DOM recycling mechanism, which translate to top-of-class performance. See the [dbmon implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril/index.html) (for comparison, here are dbmon implementations for [React v15.3.2](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/react/index.html), [Angular v2.0.0-beta.17](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/angular/index.html) and [Vue 2](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/vue/index.html). All implementations are naive (i.e. apples-to-apples, no optimizations) ## Robustness diff --git a/examples/dbmonster/mithril-bundle/app.js b/examples/dbmonster/mithril-bundle/app.js deleted file mode 100644 index f434104d..00000000 --- a/examples/dbmonster/mithril-bundle/app.js +++ /dev/null @@ -1,49 +0,0 @@ -"use strict" - -var m = require("../../../mithril") - -perfMonitor.startFPSMonitor() -perfMonitor.startMemMonitor() -perfMonitor.initProfiler("render") - -var data = [] - -m.mount(document.getElementById("app"), { - view: function() { - return m("div", [ - m("table", {className: "table table-striped latest-data"}, [ - m("tbody", - data.map(function(db) { - return m("tr", {key: db.dbname}, [ - m("td", {className: "dbname"}, db.dbname), - m("td", {className: "query-count"}, [ - m("span", {className: db.lastSample.countClassName}, db.lastSample.nbQueries) - ]), - db.lastSample.topFiveQueries.map(function(query) { - return m("td", {className: query.elapsedClassName}, [ - query.formatElapsed, - m("div", {className: "popover left"}, [ - m("div", {className: "popover-content"}, query.query), - m("div", {className: "arrow"}) - ]) - ]) - }) - ]) - }) - ) - ]) - ]) - } -}) - -function update() { - data = ENV.generateData().toArray() - - perfMonitor.startProfile("render") - m.redraw() - perfMonitor.endProfile("render") - - setTimeout(update, ENV.timeout) -} - -update() diff --git a/examples/dbmonster/mithril-bundle/index.html b/examples/dbmonster/mithril-bundle/index.html deleted file mode 100644 index b8b4df98..00000000 --- a/examples/dbmonster/mithril-bundle/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - dbmon (Mithril) - - -
- - - - - - - diff --git a/examples/dbmonster/mithril/app.js b/examples/dbmonster/mithril/app.js index f2bf1b7b..fc440af6 100644 --- a/examples/dbmonster/mithril/app.js +++ b/examples/dbmonster/mithril/app.js @@ -1,49 +1,47 @@ "use strict" -var m = require("../../../render/hyperscript") -var render = require("../../../render/render")(window).render - perfMonitor.startFPSMonitor() perfMonitor.startMemMonitor() perfMonitor.initProfiler("render") var data = [] -var root = document.getElementById("app") -update() +m.mount(document.getElementById("app"), { + view: function() { + return m("div", [ + m("table", {className: "table table-striped latest-data"}, [ + m("tbody", + data.map(function(db) { + return m("tr", {key: db.dbname}, [ + m("td", {className: "dbname"}, db.dbname), + m("td", {className: "query-count"}, [ + m("span", {className: db.lastSample.countClassName}, db.lastSample.nbQueries) + ]), + db.lastSample.topFiveQueries.map(function(query) { + return m("td", {className: query.elapsedClassName}, [ + query.formatElapsed, + m("div", {className: "popover left"}, [ + m("div", {className: "popover-content"}, query.query), + m("div", {className: "arrow"}) + ]) + ]) + }) + ]) + }) + ) + ]) + ]) + } +}) function update() { data = ENV.generateData().toArray() perfMonitor.startProfile("render") - render(root, view()) + m.redraw() perfMonitor.endProfile("render") setTimeout(update, ENV.timeout) } -function view() { - return m("div", [ - m("table", {className: "table table-striped latest-data"}, [ - m("tbody", - data.map(function(db) { - return m("tr", {key: db.dbname}, [ - m("td", {className: "dbname"}, db.dbname), - m("td", {className: "query-count"}, [ - m("span", {className: db.lastSample.countClassName}, db.lastSample.nbQueries) - ]), - db.lastSample.topFiveQueries.map(function(query) { - return m("td", {className: query.elapsedClassName}, [ - query.formatElapsed, - m("div", {className: "popover left"}, [ - m("div", {className: "popover-content"}, query.query), - m("div", {className: "arrow"}) - ]) - ]) - }) - ]) - }) - ) - ]) - ]) -} +update() diff --git a/examples/dbmonster/mithril/index.html b/examples/dbmonster/mithril/index.html index 7ccb5f22..875dc566 100644 --- a/examples/dbmonster/mithril/index.html +++ b/examples/dbmonster/mithril/index.html @@ -8,10 +8,7 @@
- - - - +