Getting to know Mithril.js

Min

2 min readJul 10, 2018

Mithril is a fictional metal found in the writings of J. R. R. Tolkien 😅 it not about as ours.

Last month ago I was to play with Mithril.js. This is first experiences to write HTML tag with Javascript (JSX) for me.

What is Mithril?

Mithril is a modern client-side Javascript framework for building Single Page Applications via mithril.js.org

Installation

Mithril.js has easy way to get stated with include from CDN in HTML

<!DOCTYPE html>
<html lang="en"><head>
  <title>Mithril</title>
</head><body>
  <script src="https://unpkg.com/mithril/mithril.js"></script>
  <script>
    var root = document.body
    m.render(root, "Hello world")
  </script>
</body></html>

Or also install with NPM

npm install mithril --save

You can start Mithril.js with Webpack, Gulp.js or whatever that you needs in Mithril.js document they give us with Webpack. You also used Typescript is operational.

What does Mithril.js have?

Component object with a view function

<!DOCTYPE html>
<html lang="en"><head>
  <title>Mithril</title>
</head><body>
  <script src="//unpkg.com/mithril/mithril.js"></script>
  <script>
    var root = document.body    var Hello = {
      view: function() {
          return m("main", [
              m("h1", {class: "title"}, "Hello Mithril.js")
          ])
      }
    }    m.render(root, Hello)</script>
</body></html>

Routing provide with m.route to routing.

<!DOCTYPE html>
<html lang="en"><head>
  <title>Mithril</title>
</head><body>
  <script src="//unpkg.com/mithril/mithril.js"></script>
  <script>
    var root = document.body    var Hello = {
      view: function () {
        return m("main", [
          m("h1", { class: "title" }, "Hello Mithril.js")
        ])
      }
    }    m.route(root, "/hello", {
      "/hello": Hello,
    })</script>
</body></html>

XHR Mithril.js provide m.request to call an XHR request

var getUsers = function () {
  m.request({
    method: "PUT", // GET, POST ...
    url: "http://rem-rest-api.herokuapp.com/api/users",
  })
  .then(function (data) {
    console.log(data);
  })
}

Lifecycle methods Mithril also provide lifecycle hooks

oninit
oncreate
onupdate
onbeforeremove
onbeforeupdate

In Mithril.js document they compare with other framework is they are size smaller and good performance than Vue, React, Angular 😃 (More details)

The community of Mithril.js isn’t popular. Not much for the question or answers in stack overflow

conclude

Mithril.js is one options of JavaScript framework to build single page application size small and also good performance.If you are familial with React pretty sure learning curve of Mithril.js is not to long. Mithril.js can write up with JavaScript or TypeScript they aren’t force.

Hope you have a good experiences with Mithril.js 😃

Getting to know Mithril.js

What is Mithril?

Installation

What does Mithril.js have?

conclude

Written by Min