Leo Horie

Developer at Klick Health

Mithril.js

Design Goals

• Small
• Fast
• Pragmatic

Simplicity through isomorphisms

Two things are isomorphic if they sharea 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

Demo: result

Take away

• Reads like server-side MVC code
• You already know how to do conditionals, includes, etc
• Mithril takes care of plumbing, performance

• Learn Javascript, not frameworks
• Practice FP, become a better programmer

Questions?