## Getting Started
### What is Mithril?
Mithril is a client-side Javascript MVC framework, i.e. it's a tool to make application code divided into a data layer (called "**M**odel"), a UI layer (called **V**iew), and a glue layer (called **C**ontroller)
Mithril is around 3kb gzipped thanks to its [small, focused, API](mithril.md). It provides a templating engine with a virtual DOM diff implementation for performant rendering, utilities for high-level modelling via functional composition, as well as support for routing and componentization.
The goal of the framework is to make application code discoverable, readable and maintainable, and hopefully help you become an even better developer.
Unlike some frameworks, Mithril tries very hard to avoid locking you into a web of dependencies: you can use as *little* of the framework as you need.
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.
---
## A Simple Application
Getting started is surprisingly boilerplate-free:
```markup
```
Yes, this is valid HTML 5! According to the specs, the ``, `` and `` tags can be omitted, but their respective DOM elements will still be there implicitly when a browser renders that markup.
---
### Model
In Mithril, typically an application lives in an namespace and contains modules. Modules are merely structures that represent a viewable "page" or component.
For simplicity, our application will have only one module, and we're going to use it as the namespace for our application:
```markup
```
This object will namespace our two Model classes:
```javascript
var todo = {};
//for simplicity, we use this module to namespace the model classes
//the Todo class has two properties
todo.Todo = function(data) {
this.description = m.prop(data.description);
this.done = m.prop(false);
};
//the TodoList class is a list of Todo's
todo.TodoList = Array;
```
[`m.prop`](mithril.prop.md) is simply a factory for a getter-setter function. Getter-setters work like this:
```javascript
//define a getter-setter with initial value `John`
var name = m.prop("John");
//read the value
var a = name(); //a == "John"
//set the value to `Mary`
name("Mary"); //Mary
//read the value
var b = name(); //b == "Mary"
```
Note that the `Todo` and `TodoList` classes we defined above are plain vanilla Javascript constructors. They can be initialized and used like this:
```javascript
var myTask = new todo.Todo({description: "Write code"});
//read the description
myTask.description(); //Write code
//is it done?
var isDone = myTask.done(); //isDone == false
//mark as done
myTask.done(true); //true
//now it's done
isDone = myTask.done(); //isDone == true
```
The `TodoList` class is simply an alias of the native `Array` class.
```javascript
var list = new todo.TodoList();
list.length; //0
```
---
### Controller
Our next step is to write a controller that will use our model classes.
```javascript
//the controller uses 3 model-level entities, of which one is a custom defined class:
//`Todo` is the central class in this application
//`list` is merely a generic array, with standard array methods
//`description` is a temporary storage box that holds a string
//
//the `add` method simply adds a new todo to the list
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.description("");
}
};
}
```
The code above should hopefully be self-explanatory. You can use the controller like this:
```javascript
var ctrl = new todo.controller();
ctrl.description(); //[empty string]
//try adding a to-do
ctrl.add(ctrl.description);
ctrl.list.length; //0
//you can't add a to-do with an empty description
//add it properly
ctrl.description("Write code");
ctrl.add(ctrl.description);
ctrl.list.length; //1
```
---
### View
The next step is to write a view so users can interact with the application
```javascript
todo.view = function(ctrl) {
return m("html", [
m("body", [
m("input"),
m("button", "Add"),
m("table", [
m("tr", [
m("td", [
m("input[type=checkbox]")
]),
m("td", "task description"),
])
])
])
]);
};
```
The utility method `m()` creates virtual DOM elements. As you can see, you can use CSS selectors to specify attributes. You can also use the `.` syntax to add CSS classes and the `#` to add an id.
The view can be rendered using the `m.render` method:
```javascript
//assuming the `ctrl` variable from earlier
m.render(document, todo.view(ctrl));
```
Notice that we pass a root DOM element to attach our template to, as well as the template itself.
This renders the following markup:
```markup
task description
```
---
#### Data Bindings
Let's implement a **data binding** on the text input. Data bindings connect a DOM element to a javascript variable so that updating one updates the other.
```javascript
m("input")
//becomes
m("input", {value: ctrl.description()})
```
This binds the `description` getter-setter to the text input. Updating the value of the description updates the input when Mithril redraws.
```javascript
var ctrl = new todo.controller();
ctrl.description(); // empty string
m.render(todo.view(ctrl)); // input is empty
ctrl.description("Write code"); //set the description in the controller
m.render(todo.view(ctrl)); // input now says "Write code"
```
Note that calling the `todo.view` method multiple times does not re-render the entire template.
Mithril internally keeps a virtual representation of the DOM in cache, scans for changes, and then only modifies the minimum required to apply the change.
In this case, Mithril only touches the `value` attribute of the input.
---
Bindings can also be **bi-directional**: that is, they can be made such that, in addition to what we saw just now, a user typing on the input updates the description getter-setter.
Here's the idiomatic way of implementing the view-to-controller part of the binding:
```javascript
m("input", {onchange: m.withAttr("value", ctrl.description), value: ctrl.description()})
```
The code bound to the `onchange` can be read like this: "with the attribute value, set ctrl.description".
Note that Mithril does not prescribe how the binding updates: you can bind it to `onchange`, `onkeypress`, `oninput`, `onblur` or any other event that you prefer.
You can also specify what attribute to bind. This means that just as you are able to bind the `value` attribute in an `