Background

Not a CS guy

Started learning to code really in 2013

Preferred Stack

Interests

Functional programming

Machine Learning

Data visualization

and thanks to CampJS: Hardware!!!

Still learning though....

Mithril.JS

Created by Leo Horie

First release: ~ March 2014 

Small size

8 kbites gzipped

Ideal for mobile - in conjunction with Cordova/Phone Gap

• Faster download
• Faster parsing and compiling
• Less code to reason about

Small API

Small API => small learning curve, smaller lock-in factor

Less framework, more javascript

Fast

Virtual DOM

Intelligent auto-redrawing system

lowest overall payload: see http://threaditjs.com/

Other features

• MVC hierarchical components out of the box
• No need for JSX (but if you really want it, there is MSX)
• Flexible: no need to extend framework classes
• Use of promises m.request is a thennable
• Use of functional programming:
  • point free functions,
  • partial applications/currying,
  • composition,
  • map, reduce, filter etc...

• ​Orthogonal to your module system and compiled syntaxes

Used in production

lichess

lichobile

Web site

Open source Code

Mithril specific part

Web App: see Google store, it's free!

Open source Code

Mithril part 

100,000,000 games played

2nd most popular chess website

Website

Source code

Mithril part

Techwalla

Guild Wars 2

see Who uses Mithril

Other uses of Mithril

Code examples - Hello World

var App = {};

App.view = function() {
    return m('h1', 'Hello World');
};

//mount the app
m.mount(document.body, App);

Code: Virtual dom

m(".container"); //yields <div class="container"></div>

m("#layout"); //yields <div id="layout"></div>

m("a[name=top]"); //yields <a name="top"></a>

m("[contenteditable]"); //yields <div contenteditable></div>

m("a#google.external[href='http://google.com']", "Google"); 
//yields <a id="google" class="external" href="http://google.com">Google</a>

m("ul", [
    m("li", "item 1"),
    m("li", "item 2"),
]);
/*
yields
<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>

=> means all the array methods: map, reduce, filter, sort etc... can be used!!
*/

Examples - get/set

//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"

//m.prop can also be used in conjunction with m.request and m.deferred to bind data on completion 
//of an async operation

var users = m.prop([]);
var error = m.prop("");

m.request({method: "GET", url: "/users"})
    .then(users, error); //on success, `users` will be populated, otherwise `error` will be populated
//assuming the response contains the following data: `[{name: "John"}, {name: "Mary"}]`
//then when resolved (e.g. in a view), the `users` getter-setter will contain a list of User instances
//i.e. users()[0].name() == "John"

var ctrl.searchTerm = m.prop();

oninput: function(e) {
    ctrl.searchTerm(e.target["value"]);
}
//in Mithril you can use the helper function m.withAttr()
oninput: m.withAttr("value", ctrl.searchTerm)

Code: data binding

var App = {};
App.controller = function() {
    //preferred way
    var ctrl = this;
    ctrl.name = m.prop('');

    //can also be written like this
    //this.name = m.prop('');

    //or
    // return {
    //     name: m.prop('')
    //     };
};
App.view = function(ctrl) {
    return [
        m('input',{
            value: ctrl.name(),
            oninput: m.withAttr('value', ctrl.name)
        }),
        m('h1', 'Hi '+ ctrl.name())
    ];
};

//mount the app
m.mount(document.body, App);

Example: Directory

Source: https://goo.gl/WDWEO1

Example: trader

Source: https://goo.gl/dA7D0B

Example: mFlickr

Target: goo.gl/uGzzqa

//Example App inspired from Chapter 6 Mostly-adequate-guide
//let's start from scratch

var Arr = {};

//We will be using the flickr API: 
//'https://api.flickr.com/services/feeds/photos_public.gne?tags=' + term + '&format=json'

App.view = function () {
    return m('h1', 'CampJs');
};

m.mount(document.body, App)