MithrilJS — An unfamous amazing JavaScript SPA framework

When I ask developers to recommend a JavaScript front-end framework, the names that always come out are React, Angular, Vue, Svelte, etc. The same names would have come out of my mouth as well before I heard about MithrilJS.

MithrilJS — A powerful yet unfamous JavaScript framework

Discovery

Recently, I was thinking of making a small app or tool for the web, as a quick weekend project. After noticing the scarcity of innovations in the web development world, I fell back on the recurrent idea of making a TODO app. I was initially going to go with React, but for some reason, the idea of setting up a React project felt too tiresome.

I wanted to find a framework that was fast, small, and easy to use. After some research, I found MithrilJS, a modern front-end JavaScript framework that had a size smaller than 10kB!

That isn’t even the best part… the minute 10kB framework also came with the two most important technologies for any web development project, Routing, and HTTP Requests! I almost flew out of my chair… After playing around with the framework for about 10 minutes, I absolutely fell in love with it. The syntax felt beautiful like writing satisfying poetry. The way components are laid out is amazing. According to the tests displayed on the front page of their documentation, it outperforms every popular JavaScript framework on the market right now. To put it simply, it is pure awesome! You can take a look at Mithril’s documentation here.

Setup

For testing Mithril, you can use the CDN:

<script src="https://unpkg.com/mithril/mithril.js"></script>

For projects, you can install Mithril with npm:

npm install mithril

MithrilJS uses Webpack to bundle its code and it is required as a development dependency:

npm install -D webpack webpack-cli

The script provided on the documentation is outdated according to Webpack standards. You can use the script below:

"start": "webpack [main file path] --output-path [path] --output-name [bundle file name] --watch --mode [webpack mode]"

Setting up an application is incredibly easy. After installing the dependencies, we need to only create two files. A index.js and index.html. Both these files will be at the root of the project directory.

You can think of the index.js as the App.js file from React. It contains the initialization code with your routing. We can take the below code as an example:

import m from "mithril"

m.render(document.body, "Hello World")

That’s the job half done. Now in the index.html file, all we need to do is create a <script> tag that will point to the bundled .js file. I have named mine app.js:

<script src="bin/app.js"></script>

And that is it. We can run our npm start script in the command line and open our index.html file in our browser and Voilà! Your reactive application is ready to go!

For integrating further mechanics like Components, State, Routing, and HTTP Requests, visit the documentation. If you need any help regarding any aspect of development, feel free to DM me on Twitter.

Due to a small developer base, MithrilJS isn’t really seen or recognized by a lot of people. That may be due to bad marketing. Thus, the integration of Mithril with third-party services is pretty limited. Their GitHub repository seems active but there are a lot of issues raised by developers. Another reason why MithrilJS isn’t recognized by developers is due to it not being sponsored by a big tech corporation like Google or Facebook. It was originally developed by Leo Horie and many other open-source developers.

I think more developers should explore this framework and make use of the wonderful features it provides. It might just be the next VueJS or Svelte. MithrilJS impressed me in every way possible and it truly lives by the quote, “Big things come in small packages”.

---

Tags: Web Development, JavaScript Frameworks, MithrilJS, JavaScript, Single Page Applications