Forget React or Vue: how about Mithril?
So what is Mythril?
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.
Want to see some code?
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 by 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:
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:
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:
Here is an example:
The login page has now become its 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 we 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 a web application using this framework.
I’ve not covered this, but we can also create components using Mithril using the following method:
This can enable us to create reusable components for use in your main views.
I look forward to seeing what you build with Mithril!
This article was originally posted on Medium. You can find it here: https://doo.gd/2BFHXcz.
Subscribe to our newsletter for free advice delivered to your inbox on a fortnightly basis.
This month’s most useful tools for developers – August 2017
Some are about new thinking or new techniques, some are about old or legacy technology and some are just useful resources for different languages or platforms. The brief is simple — if […]