Leo Horie

Developer at Klick Health

Mithril.js

Design Goals

Small
Fast
Pragmatic

Simplicity through isomorphisms

Two things are isomorphic if they share
a set of properties that interest us

Pick features that are

isomorphic to familiar things,

but more powerful

Getter-Setters

Same as variables, but functional


//a variable
var thing = "Macbook";
thing = "iPhone";
console.log( things ); // "iPhone"


//a getter-setter
var thing = m.prop( "MacBook" );
thing( "iPhone" );
console.log( thing() ); // "iPhone"

Promises

Makes Async similar to Sync


var things = m.request({method: "GET", url: "/things.json"}) //get a list of things
  .then(function(list) { return list.slice(0, 10) });        //then slice it
  .then(function(list) { return list.slice(0, 3) });         //then slice it some more

e.g. Compare to jQuery


var things = $(".things") //get a list of things
  .slice(0, 10);          //then slice it
  .slice(0, 3);           //then slice it some more

Virtual DOM

Just like HTML, but in Javascript


m("div", [                                     // <div>
  m("a", {href: "http://google.ca"}, "Google") //   <a href="http://google.ca">Google</a>
])                                             // </div>

Why not just use HTML?

Templating = Html + Logic*

*Logic is complex!

Case study: Angular.js

Loop-related things...

ng-repeat
track by
ng-repeat-start/ng-repeat-end
ng-options and list comprehension syntax
ng-init
filters
$index
$scope semantics
error handling semantics

Case study: jQuery

Loops: Need a lot of boilerplate code

render whole list
update one item
add item
remove item
map data to element
find element by data / find data by element (to update / remove)
diff
batch redraws

HTML is easier to map onto javascript than the other way around


m("div", [                                               //<div>
  [1,2,3].map(function(num) {                            //  <a href="/page/1">Page 1</a>
    return m("a", {href: "/page/" + num}, "Page " + num) //  <a href="/page/2">Page 2</a>
  })                                                     //  <a href="/page/3">Page 3</a>
])                                                       //</div>

Let the browser and the framework do the heavy lifting

Leverage the ecosystem


// Vanilla Javascript
m("ul.things", [
  m("li", "iPhone"),
  m("li", "Macbook"),
])


# Coffescript
m "ul.things",
  m "li", "iPhone"
  m "li", "Macbook"


// React's JSX (via MSX)
<ul class="things">
  <li>iPhone</li>
  <li>Macbook</li>
</ul>

jshint templates
minify templates (source maps!)
Sweet.js macros
Static typing (Typescript)
render on the server
etc

Portable knowledge

Promises
.map, .filter, and other FP concepts
CSS syntax (Emmett/ZenCoding)
Refactoring techniques
etc

Demo: fetching data


var demo = {};

demo.controller = function() {

  this.things = m.request({method: "GET", url: "/things.json"});

};

Demo: showing stuff on screen

var demo = {};

demo.controller = function() {

  this.things = m.request({method: "GET", url: "/things.json"});

};

demo.view = function(ctrl) {
  return m("ul", [                      // <ul>

    ctrl.things().map(function(thing) { //    <li>iPhone</li>
      return m("li", thing.name)        //    <li>MacBook</li>
    })                                  //    <li>iPod</li>

  ])                                    // </ul>
}

m.module(document.body, demo) // initialize

Demo: responding to user actions

var demo = {};

demo.controller = function() {

  this.things = m.request({method: "GET", url: "/things.json"});

};

demo.view = function(ctrl) {
  return m("ul", [

    ctrl.things().map(function(thing) {
      return m("li", {onclick: function() { thing.name += "!" }}, thing.name)
    })
	
  ])
}

m.module(document.body, demo) // initialize