GreenerSoft

Room est notre module JavaScript simple et ultra léger pour développer des interfaces utilisateurs réactives dans une optique éco-responsable.

Nous ouvrons aujourd’hui le site https://roomjs.fr qui présente ce module avec sa documentation.

Room est un module ECMAScript 6 (une version non ECMAScript est néanmoins disponible) et basé sur la programmation réactive qui permet bien souvent de simplifier le code des applications. En version ECMAScript 6, Room est compatible avec les cartes d’importation que nous conseillons vivement et avec le pré-chargement de module.

Développement Web éco-responsable

L’idée derrière Room est de pouvoir faire du développement Web moderne de manière éco-responsable.

C’est d’abord dans la phase de développement, en essayant de consommer moins d’énergie pendant la production et ensuite avec un produit final consommant le moins d’énergie possible.

Pour cela, Room n’a pas besoin de système de construction (build tools), c’est un module utilisable directement dans un navigateur Web (pas de version pour Node.js) et sans aucune dépendance à d’autres librairies du marché. Donc pas besoin d’avoir l’ordinateur dernier cri pour développer !

Du coup Room n’utilise pas JSX pour la composition qui impose un système de construction. Room le remplace par des appels à des fonctions JavaScript simples qui permettent de produire des éléments HTML, SVG ou MathML. Le code peut par ailleurs être organisé en composants réutilisables.

C’est ensuite à l’exécution que Room essaye de ne pas être une machine à vider les batteries.

Pour cela Room n’utilise pas de DOM Virtuel qui est un algorithme trop consommateur d’énergie et complexifiant le développement en obligeant à l’utilisation de systèmes de cache pour optimiser les performances.

À la place, Room utilise un système de détection des dépendances des éléments du DOM à vos données, qui permet de mettre à jour juste ce qu’il faut quand une donnée change.

Et tout ceci tient dans un fichier JavaScript minifié de moins de 4 ko ou de moins de 2 ko en gzip.

Exemple

En exemple, amusons-nous à faire tourner (ou pas) le logo de Room avec le code JavaScript suivant : 

import {elements, createData} from "Room";

function RotateRoom() {
	const {div, img, label, input} = elements();
	const rotate = createData(false);
	const state = () => rotate.value ? "running" : "paused";
	const onChange = e => rotate.value = e.target.checked;
	return div(
		img({class: state, src: "/media/Room.svg", alt: "room"}),
		label(
			input({type: "checkbox", onChange}),
			"Rotation"
		)
	)
}

document.getElementById("rotateExample").append(RotateRoom());

Ce qui donne le résultat suivant :

Cet exemple donne un aperçu de l’utilisation de Room pour composer une interface réactive présentée ici sous forme d’un composant.

Petite histoire

Le développement de Room a commencé en 2018 en partant du constat que le développement Web devenait à l’époque du grand n’importe quoi (et l’est toujours) !

Alors que développer pour le Web était si simple, des solutions sont apparues, se sont imposées et ont tout complexifié. Alors qu’un bon développeur Web devait d’abord maîtriser HTTP, HTML, CSS, JavaScript, un langage côté serveur et éventuellement les bases de données, il a fallut ajouter à cela des connaissances sur des tonnes de nouveaux outils pour construire des sites Web. Sans oublier qu’il a fallut apprendre et comprendre de nouveaux concepts souvent extrêmement fumeux : pourquoi faire simple quand on peut faire compliqué 🤯.

Au final, nos machines de développement sont devenus des bêtes de concours pour faire tourner des logiciels de construction, de compilation, etc. Et tout ceci pour arriver à des sites Web bardés de méga-octets de codes JavaScript, abominablement lents, vidant nos batteries et ne respectant bien souvent pas les standards de navigation Web (eh oh, quand je fais un retour en arrière dans mon navigateur, je veux revenir là ou j’étais, pas en haut de page 🤬). Et ne parlons pas de l’impact écologique de tout ceci !

Début 2020, une première version de Room existait mais n’était pas satisfaisante, trop lourde, pas assez simple, le développement a été mis en sommeil.

Courant 2023, pendant le développement d’un autre module (publié prochainement), de nouvelles idées sont apparues pour Room et son développement a redémarré pour aboutir aujourd’hui à la première version rendue publique.

Conclusion

Room n’a pas été pensé pour développer un site ou une application Web en entier. C’est possible, mais si vous avez un minimum de conscience écologique, il ne faut pas faire cela 😀.

Room a par contre été pensé pour dynamiser des parties d’une page d’un site Web et quand le référencement par les moteurs de recherche de ces parties n’est pas nécessaire.

Room est par exemple utilisable pour dynamiser des parties d’une page d’un site Web statique comme cela a été fait dans notre article précédent. Il est bien sûr aussi utilisable dans un site Web dynamique.

Pour aller plus loin, voir d’autres exemples, lire la documentation de référence et apprendre à développer des composants avec Room, rendez-vous sur le site https://roomjs.fr ou via notre GitHub.