Mithril.js

The brave little framework — An introduction to a promising, but unfortunately lesser known JavaScript framework. In the light of its recent 1.0.0 release I’m trying to lay out the keystones of Mithril.js for you.

Modern JavaScript frameworks like React, Angular2 or Vue are all pretty capable of building anything from simple webpages to demanding full-scale applications. You can’t really go wrong with any of these. As a result when you’re starting a new project and it comes to choosing a framework many will simply go with the popular choices. It’s no wonder that framework fatigue is a common problem among JavaScript developers. There are just so many great frameworks to choose from. It’s a difficult climate for underdogs to gain traction. So why is Mithril worthy of your attention anyway? Well read on.

Light as a feather, and hard as dragon’s scales

Mithril is a client-side framework for building single-page applications and the first outstanding thing about it is its size. Brave little framework, indeed — Mithril is only 8kb gzipped, which is tiny compared to the Juggernauts of modern JavaScirpt frameworks. It has a really lean design with only a small amount of magic: There is a guide on the Mithril Homepage, which covers the majority of the API in only 10-minutes and this is no exaggeration. You write your application mostly in vanilla JavaScript and as a result the learning curve is really low. It’s a framework which really embraces the KISS-principle. You don’t need to spend time on setup and boilerplate code. You can start being productive immediately. This is where Mithril shines.

import m from 'mithril';
const component = { 
  oninit(vnode) {
    vnode.state.content = 'this can be accessed in the view';
  },
  view(vnode) {
    return m('main', [ 
      m('h1', { class: 'headline' }, 'A working component!'),
      m('p', vnode.state.content)
    ]);
  }
};
m.mount(document.body, component);

Mithril is not only lightweight, it’s also very performant. It goes head to head with the likes of Inferno and is also the fastest framework in the TodoMVC project. To render its views, it utilizes virtual DOM nodes. What this means is that Mithril elements are plain JavaScript objects, which are cheap to create and update, while Mithril’s diff-algorithm updates the DOM accordingly. While the implementation under the hood differs, people familiar with React should be well acquainted with this concept.

Virtual DOM goes one step further than HTML by allowing you to write dynamic DOM trees without having to manually write multiple sets of DOM API calls to efficiently synchronize the UI to arbitrary data changes. *

Another similarity between React and Mithril is that they both encourage a component based architecture. As do Angular2 and Vue. This allows for more reusability and easier separation of concerns. It’s what all the cool kids are doing right now. Generally learning Mithril should be a breeze for people coming from a React background. The current version even supports JSX.

It could be beaten like copper, and polished like glass

Whereas React is only concerned with the view layer (it is a view library after all), it is reliant on third-party libraries for building full fledged applications. Mithril provides routing and XHR out of the box. It’s also relatively easy to integrate single components into your existing technology stack. For example at my work we use an Ampersand(Backbone) codebase with some Mithril components. Integration of third party libraries is mostly painless. I’ve written an application which used Redux for state management and it worked like a charm. There is also a whole section dedicated to this in the docs.

The reason integration is easy might be that Mithril is not very opinionated. Although component based architecture is encouraged, it gives you a lot of freedom how you write and organize your code. This is of course a double-edged sword, because it requires you to exercise more self-discipline when it comes to code organization and -quality. Additionally the trade-off of it’s lean design is that really complex applications can be a daring challenge.

Even the smallest person can change the course of the future

Although it is used by some popular businesses like Vimeo or Nike, unlike Angular2 (Google) or React (Facebook) it wasn’t developed by a huge company. This can be a good thing, if you are wary of open-source software developed by corporations, but this also means that there is little marketing power behind it.

Therefore it’s much lesser known and as a result its eco-system is much smaller. Though there is a dedicated following which brought things like precompilers, server-side rendering or streams to the framework. If you’re a casual developer and just want a rich eco-system with all kinds of tools and libraries this can be a drawback, but on the other hand this can be an opportunity: If you’re into tooling there are lots of things that can be developed. You can contribute and become part of the community.

Naturally this is also true for guides and tutorials: You can find an abundance of courses and resources for the big frameworks (especially React), while Mithril resources are a lot more sparse. For people who are interested, this can be another way to contribute. It should be mentioned though that the lack of resources is balanced out by it’s very good documentation and the fact that it’s so dead simple. There is also a Gitter chat, where you can ask any questions directly to the developers and fellow Mithril adopters.

Conclusion

The next time you hear Mithril, you won’t think about the Mines of Moria. Well ok... maybe you will. The Lord of the Rings quotes certainly didn’t help. But hopefully you will also think about this remarkable little Framework. I hope I could pique your interest by laying out its cornerstones. Maybe I’ll go more in-depth in a follow-up piece. When the time comes to choose a framework for your new project, I hope you maybe give Mithril a chance. It’s great to get off the beaten path once in a while and I think a lot of people will enjoy it.

However, if you’re starting something new, do consider giving Mithril a try, if nothing else, to see how much value Mithril adopters have been getting out of 8kb (gzipped) of code. *

Thanks for reading! If you have any questions or want to give feedback please do so in the comments or write me on Twitter.

Peace and Love ❤