Room

Présentation

Room est un module JavaScript qui permet de créer des interfaces utilisateurs réactives :

• sans outil de construction (build Tools),
• sans dépendance,
• sans DOM Virtuel,
• sans JSX.

Room est :

• simple avec 10 fonctions,
• ultra léger avec un fichier minifié de moins de 4 ko,
• moderne et nativement développé en tant que module ECMAScript 6,
• open source sous licence MIT et le copyright et les droits d’auteur sont de GreenerSoft.

Room permet par ailleurs :

• de composer des interfaces utilisateurs en HTML, SVG et MathML,
• d’organiser le code en composants basés sur des fonctions,
• de gérer le cycle de vie des éléments avec la gestion d’évènements spéciaux comme mount et unmount.

Room est donc utilisable directement dans un navigateur pour dynamiser les pages Web.

Exemple

En exemple, prenons le classique composant Counter dont le code JavaScript est le suivant avec Room :

import {elements, createData} from "Room";

function Counter() {
	const {div, strong, button} = elements();
	const count = createData(0);
	return div(
		"Compte = ", strong(count),
		button({onClick: () => count.value++}, "+"),
		button({onClick: () => count.value--}, "-")
	);
}

document.getElementById("CounterExample").append(Counter());

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.

Pour aller plus loin

Pour aller plus loin, vous pouvez consulter les différentes rubriques de cette documentation :

• Fonctionnement : explique le fonctionnement de Room,
• Installation : donne les informations pour installer Room dans vos pages Web,
• Fonctions : référence et détaille les différentes fonctions de Room,
• Composants : présente comment développer des composants avec Room,
• Exemples : contient plusieurs exemples complets d’utilisation de Room :
  • la composition avec SVG et MathML,
  • un exemple utilisant YouTube,
  • un composant utilisant un autre composant,
  • etc.

Vous trouverez le code source de Room sur le GitHub de GreenerSoft :
https://github.com/GreenerSoft/Room

Vous pouvez également signaler un problème avec Room sur le GitHub de GreenerSoft :
https://github.com/GreenerSoft/Room/issues

Room est également disponible sur NPM :
https://www.npmjs.com/package/room-js

Conversion HTML / SVG / MathML en JavaScript

Pour rapidement convertir du HTML, SVG ou MathML en JavaScript à utiliser avec Room, vous pouvez utiliser notre convertisseur.

Il suffit juste de taper ou coller le code dans la zone suivante :

À l’exception d’un éventuel import, le code généré est prêt à l’emploi, il vous reste à le coller dans votre environnement de développement et au besoin, le modifier pour le rendre réactif.

La conversion est réalisée localement dans votre navigateur, le code n’est pas envoyé au serveur.