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

add documentation for cdn and bower

Browse source
This commit is contained in:
Leo Horie 2014-03-22 15:53:44 -04:00
parent ab494829c6
commit 0ef8c8beb6
19 changed files with 173 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Gruntfile.js
View file

@ -14,6 +14,7 @@ module.exports = function(grunt) {
"comparison",
"components",
"getting-started",
"installation",
"integration",
"practices",
"refactoring",

1
archive/v0.1.1/auto-redrawing.html
View file

@ -23,6 +23,7 @@
<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>

7
archive/v0.1.1/comparison.html
View file

@ -23,6 +23,7 @@
<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>
@ -62,10 +63,10 @@
<p>In terms of architecture, one of Mithril&#39;s main differences is that it does not provide base classes to extend from.</p>
<p>It&#39;s often said that <em>frameworks</em>, in contrast to <em>libraries</em>, dictate how code should be written. In this sense, one could argue that Mithril isn&#39;t really a framework.</p>
<p>Instead of locking developers down to very specific implementations of design patterns, Mithril&#39;s approach is to provide an idiomatic pattern to follow, and tools to aid the developer when required. This approach means that developers can get discoverable codebases without necessarily getting locked into the framework.</p>
<p>One related difference is that other frameworks often hard-coded base classes where every conceivable convenience method are inherited by the developer&#39;s classes (remember, in Javascript, this can mean copying all of the utility methods over to the child class, regardless of whether they&#39;re going to be used or now).</p>
<p>One related difference is that other frameworks often have hard-coded base classes where every conceivable convenience method gets inherited by the developer&#39;s classes (remember, in Javascript, this can mean copying all of the utility methods over to the child class, regardless of whether they&#39;re going to be used or not).</p>
<p>Mithril&#39;s on-demand tooling approach means there are no hidden performance costs when implementing core MVC patterns, and there&#39;s also no extra learning curve for framework-specific syntax for those patterns.</p>
<h3 id="view-layer-paradigm">View Layer Paradigm</h3>
<p>Some of the older frameworks among the popular ones (out-of-the-box jQuery and Backbone, specifically) take a more procedural paradigm when it comes to the view layer: this means every action requires the developer to write custom view-level code to handle it.</p>
<p>Some of the older frameworks among the popular ones (out-of-the-box jQuery and Backbone, specifically) take a more procedural paradigm when it comes to the view layer; this means every action requires the developer to write custom view-level code to handle it.</p>
<p>This can get noticeably bulky when you look at thing like collections: you often need to implement insertion code and deletion code, in addition to a &quot;draw everything&quot; routine for performance. And this is for every list that needs to be displayed in some way.</p>
<p>Mithril&#39;s view layer paradigm is designed be <strong>declarative</strong>, much like HTML, such that the same code implicitly does everything it needs to. As it turns out, this design decision is actually a compromise: it offers the benefit of decreased application code complexity at the cost of some performance loss. However, as the performance tests in the homepage show, this does not necessarily hurt Mithril in a meaningful way.</p>
<hr>
@ -82,7 +83,7 @@
<p>Another marking difference is that Backbone is workflow agnostic, that is, there&#39;s no one idiomatic way to organize applications. This is good for framework adoption, but not necessarily ideal for team scalability and codebase discoverability.</p>
<p>In contrast, Mithril encourages that applications be developed using the patterns found throughout this guide. This discourages &quot;bastardized&quot; MVC pattern variations and architecturing style fragmentation.</p>
<p>One technical aspect that is also different is that Backbone is heavily event-oriented. Mithril, on the other hand, purposely avoids the observer pattern in an attempt to abolish &quot;come-from hell&quot;, i.e. a class of debugging problems where you don&#39;t know what triggers some code because of a long chain of events triggering other events.</p>
<p>A particularly nasty instance of this problem that sometimes occurs in &quot;real-time&quot; applications is when event triggering chains become circular due to a conditional statement bug, casuing infinite loops and browser crashes.</p>
<p>A particularly nasty instance of this problem that sometimes occurs in &quot;real-time&quot; applications is when event triggering chains become circular due to a conditional statement bug, causing infinite loops and browser crashes.</p>
<p>Another significant difference between Backbone and Mithril is in their approach to familiarity: Backbone appeals to people familiar w/ jQuery; Mithril is designed to be familiar to people with server-side MVC framework experience.</p>
<h3 id="angular">Angular</h3>
<p>Angular is an MVC framework maintained by Google, and it provides a declarative view layer and an emphasis on testability. It leverages developer experience with server-side MVC frameworks, and in many ways, is very similar in scope to Mithril.</p>

1
archive/v0.1.1/compiling-templates.html
View file

@ -23,6 +23,7 @@
<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>

1
archive/v0.1.1/components.html
View file

@ -23,6 +23,7 @@
<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>

11
archive/v0.1.1/getting-started.html
View file

@ -23,6 +23,7 @@
<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>
@ -51,7 +52,7 @@
<p>However, using its entire toolset idiomatically can bring lots of benefits: learning to use functional programming in real world scenarios and solidifying good coding practices for OOP and MVC are just some of them.</p>
<hr>
<h2 id="a-simple-application">A Simple Application</h2>
<p>Getting started is surprisingly boilerplate-free:</p>
<p>Once you have a <a href="installation.html">copy of Mithril</a>, getting started is surprisingly boilerplate-free:</p>
<pre><code class="lang-markup">&lt;!doctype html&gt;
&lt;script src=&quot;mithril.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
@ -362,11 +363,11 @@ this.description = function(value) {
<p>While this decision allows better API discoverability, the trade-off is that we&#39;re largely giving up on custom constraints and behavior. For example, if we wanted to change the application to make the list be persisted, a native Array would most certainly not be a suitable class to use.</p>
<p>In order to deal with that type of refactoring, one can explicitly decide to support only a subset of the Array API, and implement another class with the same interface as this subset API.</p>
<p>Given the code above, the replacement class would only need to implement the <code>.push()</code> and <code>.map()</code> methods. By freezing APIs and swapping implementations, the developer can completely avoid touching other layers in the application while refactoring.</p>
<pre><code class="lang-javascript">todo.Todo = Array;</code></pre>
<pre><code class="lang-javascript">todo.TodoList = Array;</code></pre>
<p>becomes:</p>
<pre><code class="lang-javascript">todo.Todo = {
push: function() { /*...*/ },
map: function() { /*...*/ }
<pre><code class="lang-javascript">todo.TodoList = function () {
this.push = function() { /*...*/ },
this.map = function() { /*...*/ }
};</code></pre>
<p>Hopefully these examples give you an idea of ways requirements can change over time and how Mithril&#39;s philosophy allows developers to use standard OOP techniques to refactor their codebases, rather than needing to modify large portions of the application.</p>
<hr>

85
archive/v0.1.1/installation.html Normal file
View file

@ -0,0 +1,85 @@
<!doctype html>
<html>
<head>
<title>Mithril</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
<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>&#9675;</span> Mithril</a>
<a href="getting-started.html">Guide</a>
<a href="mithril.html">API</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="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="installation">Installation</h2>
<p>Mithril is available from a variety of sources:</p>
<hr>
<h3 id="direct-download">Direct download</h3>
<p>You can <a href="http://lhorie.github.io/mithril/mithril.min.zip">download a zip of the latest version version here</a>.</p>
<p>Links to older versions can be found in the <a href="change-log.html">change log</a></p>
<p>In order to use Mithril, extract it from the zip file and point a script tag to the <code>.js</code> file:</p>
<pre><code class="lang-markup">&lt;script src=&quot;mithril.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<hr>
<h3 id="cdns-content-delivery-networks-">CDNs (Content Delivery Networks)</h3>
<p>You can also find Mithril in <a href="http://cdnjs.com/libraries/mithril/">cdnjs</a> and <a href="http://www.jsdelivr.com/#!mithril">jsdelivr</a></p>
<p>Content delivery networks allow the library to be cached across different websites that use the same version of the framework, and help reduce latency by serving the files from a server that is physically near the user&#39;s location.</p>
<h4 id="cdnjs">CdnJs</h4>
<pre><code class="lang-markup">&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/mithril/0.1.1/mithril.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<h4 id="jsdelivr">JsDelivr</h4>
<pre><code class="lang-markup">&lt;script src=&quot;//cdn.jsdelivr.net/mithril/0.1.1/mithril.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<hr>
<h3 id="bower">Bower</h3>
<p><a href="http://http://bower.io">Bower</a> is a package manager for <a href="http://nodejs.org/">NodeJS</a>. If you&#39;re using NodeJS already or planning on using <a href="http://gruntjs.com/">Grunt</a> to create a build system, you can use Bower to conveniently keep up-to-date with Mithril versions.</p>
<p>Assuming you have NodeJS installed, you can install bower by typing this in the command line:</p>
<pre><code>npm install -g bower</code></pre>
<p>And you can download Mithril by typing this:</p>
<pre><code>bower install mithril</code></pre>
<p>Then, to use Mithril, point a script tag to the downloaded file:</p>
<pre><code class="lang-markup">&lt;script src=&quot;bower_components/mithril/mithril.min.js&quot;&gt;&lt;/script&gt;</code></pre>
</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 />&copy; 2014 Leo Horie
</div>
</footer>
<script src="lib/prism/prism.js"></script>
</body>
</html>

1
archive/v0.1.1/integration.html
View file

@ -23,6 +23,7 @@
<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>

BIN
archive/v0.1.1/mithril.min.zip
View file

Binary file not shown.

8
archive/v0.1.1/mithril.module.html
View file

@ -72,11 +72,11 @@
<p>You can make anonymous modules out of existing classes</p>
<pre><code class="lang-javascript">//controller class
var dashboardController = function() {
this.greeting = &quot;Hello&quot;;
this.greeting = &quot;Hello&quot;;
};
//view class
var dashboardView = function() {
var dashboardView = function(ctrl) {
return m(&quot;h1&quot;, ctrl.greeting);
};
@ -88,11 +88,11 @@ var dashboard = {}
//controller class
dashboard.controller = function() {
this.greeting = &quot;Hello&quot;;
this.greeting = &quot;Hello&quot;;
};
//view class
dashboard.view = function() {
dashboard.view = function(ctrl) {
return m(&quot;h1&quot;, ctrl.greeting);
};

2
archive/v0.1.1/mithril.route.html
View file

@ -171,7 +171,7 @@ where:
<p><a name="redirecting"></a></p>
<h3 id="redirecting">Redirecting</h3>
<h4 id="usage">Usage</h4>
<p>You can programmatically redirec to another page. Given the example in the &quot;Defining Routes&quot; section:</p>
<p>You can programmatically redirect to another page. Given the example in the &quot;Defining Routes&quot; section:</p>
<pre><code class="lang-javascript">m.route(&quot;/dashboard/marysue&quot;);</code></pre>
<p>redirects to <code>http://server/#/dashboard/marysue</code></p>
<hr>

1
archive/v0.1.1/practices.html
View file

@ -23,6 +23,7 @@
<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>

1
archive/v0.1.1/refactoring.html
View file

@ -23,6 +23,7 @@
<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>

1
archive/v0.1.1/routing.html
View file

@ -23,6 +23,7 @@
<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>

1
archive/v0.1.1/tools.html
View file

@ -23,6 +23,7 @@
<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>

1
archive/v0.1.1/web-services.html
View file

@ -23,6 +23,7 @@
<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>

2
docs/getting-started.md
View file

@ -16,7 +16,7 @@ However, using its entire toolset idiomatically can bring lots of benefits: lear
## A Simple Application
Getting started is surprisingly boilerplate-free:
Once you have a [copy of Mithril](installation.md), getting started is surprisingly boilerplate-free:
```markup
<!doctype html>

61
docs/installation.md Normal file
View file

@ -0,0 +1,61 @@
## Installation
Mithril is available from a variety of sources:
---
### Direct download
You can [download a zip of the latest version version here](http://lhorie.github.io/mithril/mithril.min.zip).
Links to older versions can be found in the [change log](change-log.html)
In order to use Mithril, extract it from the zip file and point a script tag to the `.js` file:
```markup
<script src="mithril.min.js"></script>
```
---
### CDNs (Content Delivery Networks)
You can also find Mithril in [cdnjs](http://cdnjs.com/libraries/mithril/) and [jsdelivr](http://www.jsdelivr.com/#!mithril)
Content delivery networks allow the library to be cached across different websites that use the same version of the framework, and help reduce latency by serving the files from a server that is physically near the user's location.
#### CdnJs
```markup
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/$version/mithril.min.js"></script>
```
#### JsDelivr
```markup
<script src="//cdn.jsdelivr.net/mithril/$version/mithril.min.js"></script>
```
---
### Bower
[Bower](http://http://bower.io) is a package manager for [NodeJS](http://nodejs.org/). If you're using NodeJS already or planning on using [Grunt](http://gruntjs.com/) to create a build system, you can use Bower to conveniently keep up-to-date with Mithril versions.
Assuming you have NodeJS installed, you can install bower by typing this in the command line:
```
npm install -g bower
```
And you can download Mithril by typing this:
```
bower install mithril
```
Then, to use Mithril, point a script tag to the downloaded file:
```markup
<script src="bower_components/mithril/mithril.min.js"></script>
```

1
docs/layout/guide.html
View file

@ -23,6 +23,7 @@
<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>