From 6332a805dc5b5f0b814400f7683ed7932596e4a4 Mon Sep 17 00:00:00 2001 From: Leo Horie Date: Wed, 8 Oct 2014 22:32:30 -0400 Subject: [PATCH] improve docs --- docs/benchmarks.md | 2 +- docs/getting-started.md | 74 +++++++++++-------- docs/layout/guide.html | 2 +- docs/mithril.module.md | 7 +- ...templates.md => optimizing-performance.md} | 12 ++- docs/practices.md | 5 +- docs/tools.md | 2 +- 7 files changed, 66 insertions(+), 38 deletions(-) rename docs/{compiling-templates.md => optimizing-performance.md} (77%) diff --git a/docs/benchmarks.md b/docs/benchmarks.md index 4a6b4d0c..252e05f2 100644 --- a/docs/benchmarks.md +++ b/docs/benchmarks.md @@ -4,7 +4,7 @@ These benchmarks were designed to measure Javascript running time for Mithril in 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. +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](optimizing-performance.md#compiling-templates), 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). diff --git a/docs/getting-started.md b/docs/getting-started.md index 04bb5152..e6d2b8c1 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -116,21 +116,24 @@ In the case of our todo application, the view-model needs a few things: it needs ```javascript //define the view-model -todo.vm = {} -todo.vm.init = function() { - //a running list of todos - this.list = new todo.TodoList(); - - //a slot to store the name of a new todo before it is created - this.description = m.prop(""); - - //adds a todo to the list, and clears the description field for user convenience - this.add = function(description) { - if (description()) { - this.list.push(new todo.Todo({description: description()})); - this.description(""); - } - }; +todo.vm = new function() { + var vm = {} + vm.init = function() { + //a running list of todos + vm.list = new todo.TodoList(); + + //a slot to store the name of a new todo before it is created + vm.description = m.prop(""); + + //adds a todo to the list, and clears the description field for user convenience + vm.add = function(description) { + if (description()) { + vm.list.push(new todo.Todo({description: description()})); + vm.description(""); + } + }; + } + return vm } ``` @@ -312,10 +315,10 @@ Mithril uses them in other interesting ways elsewhere. Clever readers will probably notice that we can refactor the `add` method to make it much simpler: ```javascript -this.add = function() { - if (this.description()) { - this.list.push(new todo.Todo({description: this.description()})); - this.description(""); +vm.add = function() { + if (vm.description()) { + vm.list.push(new todo.Todo({description: vm.description()})); + vm.description(""); } }.bind(this); ``` @@ -430,18 +433,25 @@ todo.TodoList = Array; //stores a description for new todos before they are created //and takes care of the logic surrounding when adding is permitted //and clearing the input after adding a todo to the list -todo.vm = {} -todo.vm.init = function() { - this.list = new todo.TodoList(); - this.description = m.prop(""); - - this.add = function() { - if (this.description()) { - this.list.push(new todo.Todo({description: this.description()})); - this.description(""); - } - }.bind(this); -}; +todo.vm = new function() { + var vm = {} + vm.init = function() { + //a running list of todos + vm.list = new todo.TodoList(); + + //a slot to store the name of a new todo before it is created + vm.description = m.prop(""); + + //adds a todo to the list, and clears the description field for user convenience + vm.add = function() { + if (vm.description()) { + vm.list.push(new todo.Todo({description: vm.description()})); + vm.description(""); + } + }; + } + return vm +} //the controller defines what part of the model is relevant for the current page //in our case, there's only one view-model that handles everything @@ -578,7 +588,7 @@ Mithril provides a few more facilities that are not demonstrated in this page. T ## Advanced Topics -- [Compiling templates](compiling-templates) +- [Optimizing performance](optimizing-performance.md) - [Integrating with the Auto-Redrawing System](auto-redrawing.md) - [Integrating with Other Libraries](integration.md) diff --git a/docs/layout/guide.html b/docs/layout/guide.html index 497d2d0b..dd74fbb2 100644 --- a/docs/layout/guide.html +++ b/docs/layout/guide.html @@ -34,7 +34,7 @@

Misc