Mithril JS : le Framework Javascript super léger

Vous êtes fan de Angular et React mais vous trouvez que leur temps de chargement laisse à désirer ?
On a trouvé une solution pour vous : Mithril.JS. Ce framework Javascript permet entre autre de créer des single page application (SPA) avec une bibliothèque de seulement 8ko !

Léger et puissant, Mithril a la cote 😉

Si vous ne le savez pas le mithril est un métal de fiction instauré par l’auteur britannique J. R. R. Tolkien dans son oeuvre Terre du Milieu. Utilisé par les elfes dans le Seigneur des anneaux, ce métal représente la légèreté, la malléabilité ainsi que la résistance.
Revenons en à nos agneaux, euh nos moutons : Mithril.js se considère avant tout comme une bibliothèque javascript puissante mais surtout légère !
En effet, ce framework ne nécessiterait que 6,4ms pour charger ! À ce niveau, on est loin devant Angular et React et c’est ce que Mithril nous montre au travers de la comparaison avec d’autres frameworks javascript qu’il propose sur son site internet.

Une philosophie minimaliste

Si Mithril est rapide c’est surtout dû à son poids, mais pas que : il ne nécessite pas de bibliothèques tierces !
Mithril répond ainsi à la question épineuse du “pourquoi embarquer autant de fonctionnalités dans un framework alors qu’on en utilise seulement 5% “.
Mithril se définit alors comme starter-pack de fonctions javascript vous permettant de créer vos propres composants Mithril avec des fonctions de routage prédéfinies, punto basta.
Si l’on cherche encore une fois à comparer Mithril à React ou Angular, considérez plutôt Mithril comme un van disposant seulement d’un matelas et de quelques rangements ; et les deux frameworks comme un bon gros camping-car de standing capable de loger votre voiture.
C’est une comparaison très grossière, cependant l’idée est là.

Utilisé par des entreprises, des plateformes et même un jeu !

Vimeo, Nike ou encore FitBit ont fait le choix d’utiliser Mithril, c’est également le cas des plateformes open source Lichess et Flarum. Mithril fait même parti du jeu Guild Wars 2, oui oui dans le jeu !
Bien que la V1 soit sortie en 2017, Mithril compte à ce jour plus de 10 900 stars, 800 forks, 220 contributeurs et 60 releases sur Github. Cela représente une communauté plutôt active !

Une compatibilité avec presque tous les navigateurs

Mithril a été écrit à partir de la version Javascript ES5, cependant il s’affirme être “fully compatible with ES6”. En parlant de comptabilité, Mithril indique sur son site internet que les navigateurs internet compatibles sont les suivants : Internet explorer 11, Edge, Firefox ESR ainsi que les deux dernières versions de Firefox, Safari et Chrome.

Des similitudes avec React et Angular

Bien que Mithril cherche à se démarquer par sa philosophie, il comporte des similarités avec ses deux principaux concurrents.

Tout d’abord comme React, Mithril utilise :

• une représentation virtuelle du DOM
• des méthodes de cycle de vie et la réconciliation par clé
• un modèle de vue organisé en composants
• une utilisation de Javascript comme mécanisme de contrôle de flux dans les vues
• ainsi que le JSX : un langage compilé qui vous permet d’écrire du HTML directement dans votre code Javascript.

La différence la plus évidente entre React et Mithril réside dans la portée de ces frameworks.
Une application React s’appuie sur des bibliothèques tierces pour gérer le routage, le XHR et la gestion des états. Mithril, au contraire permet de gérer ces éléments nativement.
Le fait d’utiliser des bibliothèques annexes offre certes la possibilité de personnaliser ses piles en fonction de ses besoins, cependant l’architecture d’un projet basé sur React peut énormément varier d’un projet à un un autre et cela implique donc un poids conséquent en raison des bibliothèques imbriquées.

En comparaison avec Angular, Mithril utilise lui aussi une panoplie d’outils pour divers aspects des applications Web (Routage, XHR).
Concernant le reste, les deux frameworks semblent plutôt différents. Angular contrôle des vues HTML à l’aide d’un système de directives javascript. Cela a pour but d’évaluer des expressions de type JS dans des attributs HTML. Pour y parvenir, il se sert d’un analyseur et d’un compilateur javascript.
Mithril quant à lui utilise pour contrôler ses vues du code Javascript simple, et le contrôle du flux est effectué à l’aide de mécanismes intégrés tels que des opérateurs ternaires ou Array.prototype.map.

Pourquoi utiliser Mithril ?

En réalité, Mithril permet comme Angular et React de créer des applications interactives, mais lui les rend plus “réactives”.
Il représente surtout une solution idéale pour créer des widgets javascripts intégrés.
Également, il est particulièrement efficace pour améliorer les performances des applications conçues pour la communication en temps réel.
Ces spécificités sont dues aux éléments présents dans le coeur de Mithril, mais qu’est-ce qu’il y a dedans ?

Une fonction m( ) pour décrire une structure HTML

Il est possible de décrire n’importe quelle balise HTML à l’aide la fonction m( ).
Donc si vous souhaitez lui ajouter une classe, un id, un tag ou encore y spécifier du texte c’est très simple de le faire grâce à cette fonction.

Par exemple :

m(« a », {class: « bouton », href: “https://www.numendo.com” rel=”nofollow” }, « Cliquez sur moi « )
permet de créer un lien cliquable dont la classe est :”bouton”.

Créer un composant

Pour créer un composant Mithril il suffit de définir une vue à l’aide de l’attribut “view”.

Voici un exemple avec la variable Plop.

var Plop = {
view: function() { return m(« main », [ m(« h1 », {class: « title »}, « Un titre éditorial de niveau 1 »), m(« button », « Cliquez sur moi « ),
])
}
}

Ensuite, pour afficher un composant il faut utiliser la fonction m.mount.

Ainsi, si on veut utiliser le composant précédemment déclaré, on va le faire de cette manière : m.mount(root, Plop).
Cette déclaration veut dire qu’on chercher à exécuter le composant Plop dans la variable root. “root” est lui aussi une convention d’écriture, d’ailleurs également utilisé dans Angular.
Il représente une variable permettant de cibler l’élément HTML body ( root = document.body).

Une fonction m.request pour appeler une requête XHR

Ayant pour but de créer des single page application, Mithril utilise le XMLHttpRequest (XHR), qui est tout simplement un objet javascript manipulable qui permet de récupérer des objets XML,JSON ou encore HTML via l’entête HTTP d’une page. Son but ? Le XHR vous permet de charger des éléments de façon asynchrone sur votre page.
Ainsi dans la fonction m.request vous devez renseigner les champs :

• url afin de spécifier un noeud final qui représente une ressource
• method dans le but de décrire le type d’action que vous souhaitez utiliser (PUT, GET ou POST)
• data pour spécifier charge utile que vous souhaitez envoyer

m.request({
method: « POST », // GET, PUT, UPDATE …
url: « https://api.numendo.com/skills »,
data: {skill: “javascript”, type: [“front”,”back”]},
})

Si vous voulez en savoir plus sur la fonction m.request de Mithril et le XHR, vous pouvez accéder à l’exemple type proposé sur la documentation.Le routage est simplement une façon de passer d’une vue à une autre dans une application à plusieurs vues. En réalité c’est ce qui permet aux SPA d’exister.
Son principe consiste à donner une adresse spécifique à un contenu, ce qui permet d’y accéder sans pour autant changer de page. C’est quelque chose d’assez transparent pour l’utilisateur, dans la mesure où il peut penser qu’il navigue entre plusieurs pages, alors qu’en réalité non. Le contenu sur la page diffère tout simplement parce qu’on appelle une autre vue disponible à une autre adresse .Il est même possible d’utiliser les flèches “précédent” et “suivant” d’un browser pour naviguer dans les vues d’une application.
La fonction de routage Mithril permet ainsi d’appeler un composant sans recharger le document HTML et ça marche de cette manière.

var Home = {
view: function() {
return m(« a », {href: « #!/hello »}, « Enter! »)
}
}Ce premier composant crée simplement un lien vers #!/hello, dont le texte affiché est “ Entrer”. La partie “#!” est connue sous le nom de shebang, il s’agit d’une en-tête utilisée pour les fichiers texte. Cela permet de préciser au système d’exploitation que le fichier en question n’est pas un fichier binaire mais un script (ensemble de commandes).
Il s’agit d’une convention utilisée dans les SPA pour indiquer que le contenu qui suit (la partie hello) est un chemin de route.

m.route (root, « /home », {
« /home »: bonjour,
« /hello »: plop,
})Ensuite, il suffit d’utiliser la fonction m.route afin de spécifier les chemins de route à emprunter et par conséquent les vues à gérer.
La première ligne décrivant “root, « /home » définit la vue à afficher par défaut, donc si un shebang n’est pas précisé derrière une URL, ce sera cette vue qui sera affiché.
Dans notre cas, si l’on ouvre un navigateur à l’adresse http://localhost, on sera redirigé à l’adresse http://localhost/#!/home
Les autres lignes définissent des chemins de route différents. Derrière ces chemins de route, on peut y spécifier une action à effectuer, comme par exemple exécuter une fonction.
C’est notre cas pour les lignes « /home »: bonjour et « /hello »: plop qui traitent respectivement les variables bonjour et plop.

Vous l’aurez compris, Mithril est un outil puissant et surtout ultra-léger !
De plus, si vous avez déjà utilisé React, il vous sera facile de la prendre en main, d’autant plus que leur paradigme n’est très différent.
A vous de faire le test ! Et vous, êtes-vous plus team Angular, React ou Mithril pour développer une single page application ? Peut-être que vous utilisez d’autres frameworks, si vous voulez découvrir d’autres technologies Javascript, consultez notre article sur les meilleures frameworks javascripts.