add benchmarks page
This commit is contained in:
Leo Horie
parent
e23f69fc4e
commit
d677480f9b
21 changed files with 186 additions and 15 deletions
|
|
@ -10,6 +10,7 @@ module.exports = function(grunt) {
|
|||
var guideLayout = "guide"
|
||||
var guide = [
|
||||
"auto-redrawing",
|
||||
"benchmarks",
|
||||
"community",
|
||||
"compiling-templates",
|
||||
"comparison",
|
||||
|
|
@ -21,7 +22,7 @@ module.exports = function(grunt) {
|
|||
"refactoring",
|
||||
"routing",
|
||||
"tools",
|
||||
"web-services"
|
||||
"web-services",
|
||||
]
|
||||
var apiLayout = "api"
|
||||
var api = [
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
90
archive/v0.1.13/benchmarks.html
Normal file
90
archive/v0.1.13/benchmarks.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="index.html" class="logo"><span>○</span> Mithril</a>
|
||||
<a href="getting-started.html">Guide</a>
|
||||
<a href="mithril.html">API</a>
|
||||
<a href="community.html">Community</a>
|
||||
<a href="mithril.min.zip">Download</a>
|
||||
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col(3,3,12)">
|
||||
<h2 id="core-topics">Core Topics</h2>
|
||||
<ul>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="getting-started.html">Getting Started</a></li>
|
||||
<li><a href="routing.html">Routing</a></li>
|
||||
<li><a href="web-services.html">Web Services</a></li>
|
||||
<li><a href="components.html">Components</a></li>
|
||||
</ul>
|
||||
<h2 id="advanced-topics.html">Advanced Topics</h2>
|
||||
<ul>
|
||||
<li><a href="compiling-templates.html">Compiling Templates</a></li>
|
||||
<li><a href="auto-redrawing.html">The Auto-Redrawing System</a></li>
|
||||
<li><a href="integration.html">Integrating with Other Libraries</a></li>
|
||||
</ul>
|
||||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="benchmarks">Benchmarks</h2>
|
||||
<p>These benchmarks were designed to measure Javascript running time. This is significant because the gzipped size of a framework can be misleading in terms of how much code actually runs on page loads. In my experience, page loads happen far more commonly than one would expect in single page applications: power users open multiple tabs, and mobile users are open and close the browser very frequently. And as far as templating engines go, the initial page load represents the worst case for the rendering algorithm since there are very little room for performance optimization tricks. It's arguably also <a href="http://blog.kissmetrics.com/loading-time/">one of the most important metric when it comes to performance</a>.</p>
|
||||
<p>The numbers shown here are best-run results for all frameworks, except for Mithril's case, for which I'm taking the worst-run result. The numbers aren't statistically rigorous (e.g. I didn't bother to calculate standard deviation), but they should be enough to give a rough idea of what is faster than what.</p>
|
||||
<p>Generally speaking, these tests are making a deliberate effort to be <strong>biased in favor of other frameworks:</strong> for example, I don't load "optional-but-usually-used-in-real-life" things like the router module for Angular, or Marionette in Backbone's case, and I load the entirety of Mithril. In addition, this test deliberately avoids triggering <code>requestAnimationFrame</code>-based performance optimizations for Mithril, since this optimization does not exist in many frameworks and <a href="http://jsperf.com/angular-vs-knockout-vs-ember/308"><em>severely</em> skews numbers in Mithril's favor</a> in CPU-intensive situations like parallax sites. I'm also NOT using the <a href="compiling-templates.html">Mithril template compiler</a>, which would also skew the benchmark in Mithril's favor.</p>
|
||||
<p>To run the execution time tests below, click on their respective links, run the profiler from your desired browser's developer tools and measure the running time of a page refresh (Lower is better).</p>
|
||||
<div class="row">
|
||||
<div class="col(4,4,6)">
|
||||
<h3>Loading</h3>
|
||||
<table>
|
||||
<tr><td><a href="comparisons/mithril.parsing.html">Mithril</a></td><td><span class="bar" style="background:#161;width:1%;"></span> 0.28ms</td></tr>
|
||||
<tr><td><a href="comparisons/jquery.parsing.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:26%;"></span> 13.11ms</td></tr>
|
||||
<tr><td><a href="comparisons/backbone.parsing.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:37%;"></span> 18.54ms</td></tr>
|
||||
<tr><td><a href="comparisons/angular.parsing.html">Angular</a></td><td><span class="bar" style="background:#c33;width:14%;"></span> 7.49ms</td></tr>
|
||||
<tr><td><a href="comparisons/react.parsing.html">React</a></td><td><span class="bar" style="background:#6af;width:50%;"></span> 24.99ms</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col(8,8,12)">
|
||||
<h3>Rendering</h3>
|
||||
<table>
|
||||
<tr><td><a href="comparisons/mithril.rendering.html">Mithril</a></td><td><span class="bar" style="background:#161;width:4%;"></span> 9.44ms (uncompiled)</td></tr>
|
||||
<tr><td><a href="comparisons/jquery.rendering.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:17%;"></span> 40.27ms</td></tr>
|
||||
<tr><td><a href="comparisons/backbone.rendering.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:10%;"></span> 23.05ms</td></tr>
|
||||
<tr><td><a href="comparisons/angular.rendering.html">Angular</a></td><td><span class="bar" style="background:#c33;width:50%;"></span> 118.63ms</td></tr>
|
||||
<tr><td><a href="comparisons/react.rendering.html">React</a></td><td><span class="bar" style="background:#6af;width:33%;"></span> 79.65ms</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Feel free to implement versions of the tests above in other frameworks, if you wish. The code is very simple.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
||||
<br />© 2014 Leo Horie
|
||||
</div>
|
||||
</footer>
|
||||
<script src="lib/prism/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
@ -221,6 +222,17 @@ m.render(todo.view(ctrl)); // input now says "Write code"</code></pre>
|
|||
<p>Note that when we construct the parameterized binding, we are passing the <code>description</code> getter-setter <em>by reference</em>, and not its value. We only evaluate the getter-setter to get its value in the controller method. This is a form of <em>lazy evaluation</em>: it allows us to say "use this value later, when the event handler gets called".</p>
|
||||
<p>Hopefully by now, you're starting to see why Mithril encourages the usage of <code>m.prop</code>: Because Mithril getter-setters are functions, they naturally compose well with functional programming tools, and allow for some very powerful idioms. In this case, we're using them in a way that resembles C pointers.</p>
|
||||
<p>Mithril uses them in other interesting ways elsewhere.</p>
|
||||
<p>As a side note, some readers have pointed out that we can refactor the <code>add</code> method like this:</p>
|
||||
<pre><code class="lang-javascript">this.add = function() {
|
||||
if (this.description()) {
|
||||
this.list.push(new todo.Todo({description: this.description()}));
|
||||
this.description("");
|
||||
}
|
||||
}.bind(this);</code></pre>
|
||||
<p>The difference is that <code>add</code> no longer takes an argument, and we call <code>.bind(this)</code> at the end to lock the scoping of <code>this</code> inside of the <code>add</code> method</p>
|
||||
<p>Then we can make the <code>onclick</code> binding on the template much simpler:</p>
|
||||
<pre><code>m("button", {onclick: ctrl.add}, "Add")</code></pre>
|
||||
<p>The only reason I talked about partial application here was to make you aware of that technique, since it becomes useful when dealing with parameterized event handlers. In real life, given a choice, you should always pick the simplest idiom for your use case, as we just did here.</p>
|
||||
<hr>
|
||||
<p>To implement flow control in Mithril views, we simply use Javascript:</p>
|
||||
<pre><code class="lang-javascript">//here's the view
|
||||
|
|
@ -243,7 +255,7 @@ m("table", [
|
|||
return m("html", [
|
||||
m("body", [
|
||||
m("input", {onchange: m.withAttr("value", ctrl.description), value: ctrl.description()}),
|
||||
m("button", {onclick: ctrl.add.bind(ctrl, ctrl.description)}, "Add"),
|
||||
m("button", {onclick: ctrl.add}, "Add"),
|
||||
m("table", [
|
||||
ctrl.list.map(function(task, index) {
|
||||
return m("tr", [
|
||||
|
|
@ -306,12 +318,12 @@ todo.controller = function() {
|
|||
this.list = new todo.TodoList();
|
||||
this.description = m.prop("");
|
||||
|
||||
this.add = function(description) {
|
||||
if (description()) {
|
||||
this.list.push(new todo.Todo({description: description()}));
|
||||
this.add = function() {
|
||||
if (this.description()) {
|
||||
this.list.push(new todo.Todo({description: this.description()}));
|
||||
this.description("");
|
||||
}
|
||||
};
|
||||
}.bind(this);
|
||||
};
|
||||
|
||||
//here's the view
|
||||
|
|
@ -319,7 +331,7 @@ todo.view = function(ctrl) {
|
|||
return m("html", [
|
||||
m("body", [
|
||||
m("input", {onchange: m.withAttr("value", ctrl.description), value: ctrl.description()}),
|
||||
m("button", {onclick: ctrl.add.bind(ctrl, ctrl.description)}, "Add"),
|
||||
m("button", {onclick: ctrl.add}, "Add"),
|
||||
m("table", [
|
||||
ctrl.list.map(function(task, index) {
|
||||
return m("tr", [
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ m.module(document.getElementById("example"), app);
|
|||
<section class="performance">
|
||||
<div class="container">
|
||||
<h2>Performance</h2>
|
||||
<p>To run the execution time tests below, click on their respective links, run the profiler from your desired browser's developer tools and measure the running time of a page refresh. (Lower is better)</p>
|
||||
<p>To run the execution time tests below, click on their respective links, run the profiler from your desired browser's developer tools and measure the running time of a page refresh (Lower is better). <a href="benchmarks.html">Read more</a></p>
|
||||
<div class="row">
|
||||
<div class="col(4,4,6)">
|
||||
<h3>Loading</h3>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
34
docs/benchmarks.md
Normal file
34
docs/benchmarks.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
## Benchmarks
|
||||
|
||||
These benchmarks were designed to measure Javascript running time. This is significant because the gzipped size of a framework can be misleading in terms of how much code actually runs on page loads. In my experience, page loads happen far more commonly than one would expect in single page applications: power users open multiple tabs, and mobile users are open and close the browser very frequently. And as far as templating engines go, the initial page load represents the worst case for the rendering algorithm since there are very little room for performance optimization tricks. It's arguably also [one of the most important metric when it comes to performance](http://blog.kissmetrics.com/loading-time/).
|
||||
|
||||
The numbers shown here are best-run results for all frameworks, except for Mithril's case, for which I'm taking the worst-run result. The numbers aren't statistically rigorous (e.g. I didn't bother to calculate standard deviation), but they should be enough to give a rough idea of what is faster than what.
|
||||
|
||||
Generally speaking, these tests are making a deliberate effort to be **biased in favor of other frameworks:** for example, I don't load "optional-but-usually-used-in-real-life" things like the router module for Angular, or Marionette in Backbone's case, and I load the entirety of Mithril. In addition, this test deliberately avoids triggering `requestAnimationFrame`-based performance optimizations for Mithril, since this optimization does not exist in many frameworks and [*severely* skews numbers in Mithril's favor](http://jsperf.com/angular-vs-knockout-vs-ember/308) in CPU-intensive situations like parallax sites. I'm also NOT using the [Mithril template compiler](compiling-templates.md), which would also skew the benchmark in Mithril's favor.
|
||||
|
||||
To run the execution time tests below, click on their respective links, run the profiler from your desired browser's developer tools and measure the running time of a page refresh (Lower is better).
|
||||
|
||||
<div class="row">
|
||||
<div class="col(4,4,6)">
|
||||
<h3>Loading</h3>
|
||||
<table>
|
||||
<tr><td><a href="comparisons/mithril.parsing.html">Mithril</a></td><td><span class="bar" style="background:#161;width:1%;"></span> 0.28ms</td></tr>
|
||||
<tr><td><a href="comparisons/jquery.parsing.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:26%;"></span> 13.11ms</td></tr>
|
||||
<tr><td><a href="comparisons/backbone.parsing.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:37%;"></span> 18.54ms</td></tr>
|
||||
<tr><td><a href="comparisons/angular.parsing.html">Angular</a></td><td><span class="bar" style="background:#c33;width:14%;"></span> 7.49ms</td></tr>
|
||||
<tr><td><a href="comparisons/react.parsing.html">React</a></td><td><span class="bar" style="background:#6af;width:50%;"></span> 24.99ms</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col(8,8,12)">
|
||||
<h3>Rendering</h3>
|
||||
<table>
|
||||
<tr><td><a href="comparisons/mithril.rendering.html">Mithril</a></td><td><span class="bar" style="background:#161;width:4%;"></span> 9.44ms (uncompiled)</td></tr>
|
||||
<tr><td><a href="comparisons/jquery.rendering.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:17%;"></span> 40.27ms</td></tr>
|
||||
<tr><td><a href="comparisons/backbone.rendering.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:10%;"></span> 23.05ms</td></tr>
|
||||
<tr><td><a href="comparisons/angular.rendering.html">Angular</a></td><td><span class="bar" style="background:#c33;width:50%;"></span> 118.63ms</td></tr>
|
||||
<tr><td><a href="comparisons/react.rendering.html">React</a></td><td><span class="bar" style="background:#6af;width:33%;"></span> 79.65ms</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Feel free to implement versions of the tests above in other frameworks, if you wish. The code is very simple.
|
||||
|
|
@ -280,6 +280,27 @@ Hopefully by now, you're starting to see why Mithril encourages the usage of `m.
|
|||
|
||||
Mithril uses them in other interesting ways elsewhere.
|
||||
|
||||
As a side note, some readers have pointed out that we can refactor the `add` method like this:
|
||||
|
||||
```javascript
|
||||
this.add = function() {
|
||||
if (this.description()) {
|
||||
this.list.push(new todo.Todo({description: this.description()}));
|
||||
this.description("");
|
||||
}
|
||||
}.bind(this);
|
||||
```
|
||||
|
||||
The difference is that `add` no longer takes an argument, and we call `.bind(this)` at the end to lock the scoping of `this` inside of the `add` method
|
||||
|
||||
Then we can make the `onclick` binding on the template much simpler:
|
||||
|
||||
```
|
||||
m("button", {onclick: ctrl.add}, "Add")
|
||||
```
|
||||
|
||||
The only reason I talked about partial application here was to make you aware of that technique, since it becomes useful when dealing with parameterized event handlers. In real life, given a choice, you should always pick the simplest idiom for your use case, as we just did here.
|
||||
|
||||
---
|
||||
|
||||
To implement flow control in Mithril views, we simply use Javascript:
|
||||
|
|
@ -313,7 +334,7 @@ todo.view = function(ctrl) {
|
|||
return m("html", [
|
||||
m("body", [
|
||||
m("input", {onchange: m.withAttr("value", ctrl.description), value: ctrl.description()}),
|
||||
m("button", {onclick: ctrl.add.bind(ctrl, ctrl.description)}, "Add"),
|
||||
m("button", {onclick: ctrl.add}, "Add"),
|
||||
m("table", [
|
||||
ctrl.list.map(function(task, index) {
|
||||
return m("tr", [
|
||||
|
|
@ -391,12 +412,12 @@ todo.controller = function() {
|
|||
this.list = new todo.TodoList();
|
||||
this.description = m.prop("");
|
||||
|
||||
this.add = function(description) {
|
||||
if (description()) {
|
||||
this.list.push(new todo.Todo({description: description()}));
|
||||
this.add = function() {
|
||||
if (this.description()) {
|
||||
this.list.push(new todo.Todo({description: this.description()}));
|
||||
this.description("");
|
||||
}
|
||||
};
|
||||
}.bind(this);
|
||||
};
|
||||
|
||||
//here's the view
|
||||
|
|
@ -404,7 +425,7 @@ todo.view = function(ctrl) {
|
|||
return m("html", [
|
||||
m("body", [
|
||||
m("input", {onchange: m.withAttr("value", ctrl.description), value: ctrl.description()}),
|
||||
m("button", {onclick: ctrl.add.bind(ctrl, ctrl.description)}, "Add"),
|
||||
m("button", {onclick: ctrl.add}, "Add"),
|
||||
m("table", [
|
||||
ctrl.list.map(function(task, index) {
|
||||
return m("tr", [
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ m.module(document.getElementById("example"), app);
|
|||
<section class="performance">
|
||||
<div class="container">
|
||||
<h2>Performance</h2>
|
||||
<p>To run the execution time tests below, click on their respective links, run the profiler from your desired browser's developer tools and measure the running time of a page refresh. (Lower is better)</p>
|
||||
<p>To run the execution time tests below, click on their respective links, run the profiler from your desired browser's developer tools and measure the running time of a page refresh (Lower is better). <a href="benchmarks.html">Read more</a></p>
|
||||
<div class="row">
|
||||
<div class="col(4,4,6)">
|
||||
<h3>Loading</h3>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue