vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean up dbmon

Browse source
This commit is contained in:
Leo Horie 2016-10-27 20:29:29 -04:00
parent 93fba4dc1d
commit 845633c88d
5 changed files with 31 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -26,7 +26,7 @@ Partial documentation can be found in the [`/docs`](docs) directory
## Performance ## 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 ## Robustness

49
examples/dbmonster/mithril-bundle/app.js
View file

@ -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()

17
examples/dbmonster/mithril-bundle/index.html
View file

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="DBMON Mithril" />
<meta charset="utf-8">
<link href="../styles.css" rel="stylesheet" type="text/css" />
<title>dbmon (Mithril)</title>
</head>
<body>
<div id="app"></div>
<script src="../../../module/module.js"></script>
<script src="../../../mithril.js"></script>
<script src="../ENV.js"></script>
<script src="https://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script>
<script src="app.js"></script>
</body>
</html>

60
examples/dbmonster/mithril/app.js
View file

@ -1,49 +1,47 @@
"use strict" "use strict"
var m = require("../../../render/hyperscript")
var render = require("../../../render/render")(window).render
perfMonitor.startFPSMonitor() perfMonitor.startFPSMonitor()
perfMonitor.startMemMonitor() perfMonitor.startMemMonitor()
perfMonitor.initProfiler("render") perfMonitor.initProfiler("render")
var data = [] var data = []
var root = document.getElementById("app") m.mount(document.getElementById("app"), {
update() 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() { function update() {
data = ENV.generateData().toArray() data = ENV.generateData().toArray()
perfMonitor.startProfile("render") perfMonitor.startProfile("render")
render(root, view()) m.redraw()
perfMonitor.endProfile("render") perfMonitor.endProfile("render")
setTimeout(update, ENV.timeout) setTimeout(update, ENV.timeout)
} }
function view() { update()
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"})
])
])
})
])
})
)
])
])
}

5
examples/dbmonster/mithril/index.html
View file

@ -8,10 +8,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="../../../module/module.js"></script> <script src="../../../mithril.js"></script>
<script src="../../../render/vnode.js"></script>
<script src="../../../render/hyperscript.js"></script>
<script src="../../../render/render.js"></script>
<script src="../ENV.js"></script> <script src="../ENV.js"></script>
<script src="https://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script> <script src="https://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script>
<script src="app.js"></script> <script src="app.js"></script>