Leo Horie



Leo Horie

2 3


mithril-presentation-oct-js-tech-night


On Github lhorie / mithril-presentation-oct-js-tech-night

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

  • iPhone
  • Macbook
  • iPad

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?