By now, if you have been working with frontend technologies for a while, you’ll know about the craziness that is Javascript frameworks. Back in the day you could get along fine with vanilla Javascript. Or if you had to do something funky you could throw in jQuery. But now…

I know I am adding fuel to the fire by suggesting yet ANOTHER Javascript framework…

So what is Mithril?

Mithril is a modern client-side Javascript framework for building Single Page Applications.

If you’ve ever used frameworks like Angular, React or Vue then you will most likely have seen this sort of quote before. This is because these frameworks are primarily built for creating single page applications (SPA). Each of these libraries enables creating these kinds of applications using very similar techniques — primarily leveraging a Virtual DOM to ensure that we only re-render components that need updating.

In a nutshell, the virtual DOM is an object representation of the DOM. This makes it easy to work out what has added, updated or removed. With this information we can easily work out how to lay out our DOM.

You want to see some code?

What am I saying?! Of course you do!

One of the interesting things about using Mithril is that it enables you to envisage what is going on in these other frameworks that use a virtual DOM. This is because we don’t use HTML (or rather JSX) templates. Instead we call simple methods in order to create our DOM.

Here is a simple example (that is also on their website):

We can run this easily using http-server. Create a new folder and add create the file above as index.html. Then run the following commands.

When we navigate to http://localhost:8080 we will see a page that contains Hello world 🎉

Graduating from Hello world…

That was a nice simple example, but I think there is more I can do to show you how powerful this library is. So we can start with adding something other than “Hello World” to the page. How about a simple form?

Below is an example of how to string a bunch of virtual DOM nodes together to compose your web page. This is a Mithril version of the sign-in page Bootstrap template.

As you can see, Mithril has a very simple API for rendering DOM elements with specific tags.

What does the Mithril API look like?

Hopefully you’ve noticed that there are a lot of calls to m … That is Mithril 😎

Here is an overview of two of the most important methods:

m.render(rootNode, virtualNodes)

The most important method above has to be m.render(rootNode, virtualNodes) , where the rootNode is where our Mithril app will be placed. In the above example we are placing it straight on the documents body.

m(tagName, htmlOptions, children)

The second most important method gives you the ability to create virtual nodes. This is the main component of a Mithril web application. Without declaring any virtual nodes there would be nothing to display.

We can define an image element with the following:

m("img", {
 src: "https://placeimg.com/640/480/animals",
 alt: "Random Image"
});

What about routing?

With every single page application (SPA) we want to have some sort of routing functionality. Mithril has us covered. No need to add any more packages or scripts 😎

The method call for this is very simple:

m.route(rootNode, defaultRoute, routes);

Below is an example:

The login page has now become it’s own object. When creating routes we need to create an object that has the view method. This method will be called when the component needs to be rendered.

Where do I go from here?

I have explained the basics here. However, because the Mithril API is rather compact, I have actually explained most of what Mithril can do. There is more research that you can do if you are looking to create an web application using this framework.

I’ve not covered this, but we can also create components using Mithril using the following method:

m.component(MyComponent, { myParam: "Awesome!" });

This can enable us to create reusable components for use in your main views 🙌

Let’s wrap this up

I am sorry to introduce yet another Javascript framework, but I think it will give you a greater insight into how these other frameworks work that use the virtual DOM. You can look through the source code and see exactly how to render these virtual nodes. The code is commented very well and can be a great resource for learning about this particular concept.

I look forward to seeing what you build with Mithril 👋