Mithril.js Introduction and Environment Setup

Last Updated : 18 Jan, 2021

Mithril is a client-side JavaScript framework used to create a single-page application. There are lots of other popular frameworks, and those are popular enough and huge community support for them like React, Vue, and Angular. Then why should you choose Mithril over those fantastic performers frameworks? Mithril covers all the features that other frameworks provide like DOM Elements, Components, Routing, and XHR. The XHR is just a way to communicate with the server, communication is the most important thing to progress.

Reason to Choose Mithril Over the Leading Frameworks:

Size: The size of the Mithril compare to those frameworks is very less, the total size of the Mithril is 9.5Kb and it covers all the features. Where the size of other frameworks are (React+React Router+Redux+fetch)→64Kb, (Vue + Vue-Router + Vuex + fetch)→40kb, and Angular→135kb.
Performance: The performance of Mithril is best in that it will take only 6.4ms and the other frameworks took around 12.1ms in React, 9.8ms in Vue, and 11.5ms in Angular.

Note: If your team is already in other frameworks and your client’s product is totally based on another framework then proceed with what you have but you are learning a new framework or want to create a Compact and Fast world then Mithril is the Right Choice.

Requiring / Installing Module: To get started with Mithril we can use a CDN link or install it using the npm command, both this way are explained below:

CDN Link: You can use a CDN link in the HTML file and proceed. Copy down the below link inside the script tag.

https://unpkg.com/mithril/mithril.js

NPM Module: Install the Mithril module using the following command:

npm install mithril --save

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src="https://unpkg.com/mithril/mithril.js"> 
    </script> 
</head> 
  
<body> 
    <script> 
        var root = document.body 
  
        // Rendering a String as an Output 
        m.render(root,  
"GeeksforGeeks A Computer Science portal for Geeks") 
    </script> 
</body> 
  
</html> 