Are you a fan of Angular and React but find that their loading times leave something to be desired? We have found a solution for you: Mithril.js. Among other things, this JavaScript framework makes it possible to create single-page applications (SPAs) with a library of only 8 KB!
Lightweight and powerful, Mithril is riding high 😉
In case you didn’t know, mithril is a fictional metal invented by the British author J. R. R. Tolkien in his Middle-earth works. Used by the elves in The Lord of the Rings, this metal stands for lightness, malleability and strength. But let’s get back to the point: Mithril.js sees itself first and foremost as a powerful — but above all lightweight — JavaScript library. It reportedly needs just 6.4 ms to load! At that level we are well ahead of Angular and React, and that is what Mithril shows us in the comparison with other JavaScript frameworks that it publishes on its website.
Comparison of Mithril with other JavaScript frameworks. This screenshot comes from the Mithril website.
A minimalist philosophy
If Mithril is fast, that is mainly down to its weight — but not only: it does not require any third-party libraries! Mithril thus answers the thorny question of “why bundle so many features into a framework when we only use 5% of them?”. Mithril therefore defines itself as a starter pack of JavaScript functions allowing you to create your own Mithril components with predefined routing functions, and that’s that. If we try once again to compare Mithril with React or Angular, think of Mithril as a van with just a mattress and a bit of storage, and of the other two frameworks as a big, high-end motorhome capable of carrying your car. It is a very crude comparison, but you get the idea.
Used by companies, platforms and even a game!
Vimeo, Nike and FitBit have all chosen to use Mithril, as have the open-source platforms Lichess and Flarum. Mithril is even part of the game Guild Wars 2 — yes, inside the game! Although v1 was released in 2017, Mithril today has more than 10,900 stars, 800 forks, 220 contributors and 60 releases on GitHub. That represents a fairly active community!
Compatibility with almost every browser
Mithril was written on the basis of JavaScript ES5, but it claims to be “fully compatible with ES6”. Speaking of compatibility, Mithril states on its website that the compatible web browsers are the following: Internet Explorer 11, Edge, Firefox ESR and the two most recent versions of Firefox, Safari and Chrome.
Similarities with React and Angular
Although Mithril seeks to stand out through its philosophy, it does have similarities with its two main competitors.
First of all, like React, Mithril uses:
- a virtual representation of the DOM
- lifecycle methods and keyed reconciliation
- a view model organised into components
- the use of JavaScript as the flow-control mechanism within views
- as well as JSX: a compiled language that allows you to write HTML directly inside your JavaScript code.
The most obvious difference between React and Mithril lies in the scope of these frameworks. A React application relies on third-party libraries to handle routing, XHR and state management. Mithril, by contrast, handles these elements natively. Using additional libraries certainly makes it possible to tailor your stack to your needs; however, the architecture of a React-based project can vary enormously from one project to another, and it therefore involves a considerable weight because of the nested libraries.
Compared with Angular, Mithril also uses a range of tools for various aspects of web applications (routing, XHR). As for the rest, the two frameworks seem rather different. Angular controls HTML views using a system of JavaScript directives. The purpose of this is to evaluate JS-type expressions inside HTML attributes. To achieve that, it uses a JavaScript parser and compiler. Mithril, for its part, uses plain JavaScript code to control its views, and flow control is handled using built-in mechanisms such as ternary operators or Array.prototype.map.
Why use Mithril?
In reality, Mithril — like Angular and React — makes it possible to create interactive applications, but it makes them more “reactive”. Above all it is an ideal solution for creating embedded JavaScript widgets. It is also particularly effective at improving the performance of applications designed for real-time communication. These characteristics come from the elements present at the core of Mithril — but what exactly is inside?
An m() function to describe an HTML structure
It is possible to describe any HTML tag using the m() function. So if you want to add a class, an id or a tag to it, or specify some text, it is very simple to do so thanks to this function.
For example:m("a", { class: "bouton", href: "<https://www.numendo.com>" }, "Click me")
creates a clickable link whose class is bouton.
Creating a component
To create a Mithril component, you simply define a view using the view attribute.
Here is an example with the variable Plop.var Plop = { view: function () { return m("main", [ m("h1", { class: "title" }, "A level 1 editorial heading"), m("button", "Click me"), ]) }, }
Then, to display a component, you have to use the m.mount function.
So if we want to use the component declared above, we do it like this: m.mount(root, Plop). This declaration means that we are trying to run the Plop component inside the root variable. root is also a naming convention, one that is used in Angular too. It represents a variable used to target the HTML body element (root = document.body).
An m.request function to make an XHR request
Since its purpose is to create single-page applications, Mithril uses XMLHttpRequest (XHR), which is quite simply a JavaScript object you can manipulate in order to retrieve XML, JSON or HTML objects via a page’s HTTP headers. What is it for? XHR allows you to load elements asynchronously on your page. So in the m.request function you have to fill in the following fields:url, in order to specify an endpoint representing a resourcemethod, in order to describe the type of action you want to use (PUT, GET or POST)data, to specify the payload you want to sendm.request({ method: "POST", // GET, PUT, UPDATE … url: "<https://api.numendo.com/skills>", data: { skill: "javascript", type: ["front", "back"] }, })
If you want to find out more about Mithril’s m.request function and about XHR, you can consult the standard example provided in the documentation.
Routing
Routing is simply a way of moving from one view to another in an application with several views. In reality, it is what allows SPAs to exist. The principle consists of giving a specific address to a piece of content, which makes it possible to reach that content without changing page. It is fairly transparent for users, in that they may think they are navigating between several pages when in reality they are not. The content on the page simply differs because another view, available at another address, is being called. It is even possible to use a browser’s “back” and “forward” arrows to navigate between an application’s views. Mithril’s routing function therefore makes it possible to call a component without reloading the HTML document, and it works like this.var Home = { view: function () { return m("a", { href: "#!/hello" }, "Enter!") }, }
This first component simply creates a link to #!/hello, whose displayed text is “Enter!”. The #! part is known as a shebang; it is a header used for text files. It tells the operating system that the file in question is not a binary file but a script (a set of commands). It is a convention used in SPAs to indicate that the content that follows (the hello part) is a route path.m.route(root, "/home", { "/home": bonjour, "/hello": plop, })
Next, you simply use the m.route function in order to specify the route paths to be taken and consequently the views to be handled. The first line, root, "/home", defines the view to be displayed by default, so if no shebang is specified after a URL, this is the view that will be displayed. In our case, if we open a browser at http://localhost, we will be redirected to http://localhost/#!/home. The other lines define different route paths. Behind these route paths, you can specify an action to perform — for example running a function. That is what is happening on the lines "/home": bonjour and "/hello": plop, which handle the variables bonjour and plop respectively.
As you will have gathered, Mithril is a powerful and, above all, ultra-lightweight tool! What’s more, if you have already used React you will find it easy to pick up, all the more so because their paradigms are not very different. Give it a try! And what about you — are you more team Angular, React or Mithril when it comes to developing a single-page application? Perhaps you use other frameworks: if you want to discover other JavaScript technologies, take a look at our article on the best JavaScript frameworks.
