Utiliser des librairies Javascript légères

Le problème

Lorsque l'on fait des webapps totalement embarquées sur un ESP, il est crucial d'utiliser des librairies javascript de petite taille. En effet, la RAM d'un ESP 32 WROOM par exemple, un des plus utilisé sur les cartes intéressantes actuelles, dispose de 512Ko de RAM et avec Micropython, on dispose grosso-modo de 100Ko de RAM mémoire.

Tout dépassement de la RAM entraînera une erreur qui stoppera le programme. Pour éviter çà, il faut régulièrement vider la RAM des choses encore en RAM mais non utilisées, ce qui sera fait avec gc.collect()

Il faudra d'autre part éviter de recourir à une variable intermédiaire pour un objet transitoire. Mais même en faisant tout cela, on ne pourra pas excéder le chargement d'un fichier de quelques dizaines de Ko à la fois. Et c'est ici qu'interviennent les petites librairies Javascript.

Je ne parle pas ici de réduction de taille de librairies usuelles : je parle de librairies toutes petites à la base, que l'on utilisera de plus sous leur forme minifiée. L'objectif est de n'avoir que des librairies qui feront quelques ko, voire 20 à 30 ko grand maximum.

La bonne nouvelle, c'est que çà existe et on peut tout simplement faire son marché !

Scénario en pratique

Par exemple, lorsque l'on fait une Webapp, on a pris l'habitude d'utiliser jQuery (qui fait au bas mot 80 à 100Ko minifiée) et autres frameworks. Il ne va pas être possible d'utiliser çà "tel que" dans une webapp Micropython.

La solution consiste à se rabattre sur une librairie Javascript légère qui fait le job : en général, il y a perte de fonctionnalités, mais le coeur sera là. Par exemple, avec jQuery, le truc fondamental est de pouvoir disposer de la désignation des objets de DOM avec le fameux $ propre à jQuery. Pour préserver cette fonctionnalité, on pourra se tourner vers quelque chose comme https://github.com/dciccale/ki.js qui ne fait que quelques Ko plutôt que de rebasculer en Javascript pur.

Des librairies Javascripts légères

On trouve par exemple des listes de librairies de petite taille : https://dev.to/ped4enko/top-10-micro-sized-javascript-libraries-aa9

Mais le top est ce site répertoriant plein de librairies Javascripts légères : http://microjs.com/# (regarder les plus étoilées pour les plus pertinentes...) Attention, les tailles sont données en Gzipped... donc c'est un plus gros en min.js mais çà reste malgré tout carrément petit...

Disposer de jQuery mais pour quelques Ko : https://github.com/dciccale/ki.js

Un AJAX très léger : https://github.com/ForbesLindesay/ajax Un autre : https://github.com/yanatan16/nanoajax

!!! info

Il n'est pas / plus nécessaire d'utiliser une librairie pour simplifier l'écriture de requête Ajax : on peut utiliser la nouvelle interface `fetch` qui est beaucoup plus propre que le classique XHR.

Interpréteur Markdown léger : https://github.com/Holixus/nano-markdown

Timeline : https://github.com/sbstjn/timesheet.js

Ligne inline : https://github.com/mariusGundersen/sparkline

Une autre librairie particulièrement intéressant est également Alpine JS qui est un framework permettant des choses assez évoluées pour la manipulation du DOM : https://github.com/alpinejs/alpine/

Conclusion

Lorsque l'on développe des webapps sur microcontrôleur, il faut rester conscient des contraintes matérielles de la base utilisée, et notamment la RAM. Mais si on sait s'affranchir de cette contrainte par un choix judicieux de petites "perles" ou "pépites" que sont les librairies javascript légères voire ultra-légères, on peut vraiment faire des webapps autonomes complètes servies par l'ESP 32.