Or how I found another Javascript framework…
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…
So what is Mythril?
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.
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 https://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:
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:
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.
Wrapping up
I am almost 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!
This article was originally posted on Medium. You can find it here: https://doo.gd/2BFHXcz.
