Blapy2

Blapy est une librairie JavaScript qui permet de transformer un site web classique en une application dynamique, en mettant à jour des blocs HTML via AJAX ou WebSockets sans recharger entièrement la page. Initialement développée comme un plugin jQuery, elle était devenue obsolète au regard des standards modernes du web.

J’ai entrepris une refonte complète de la librairie afin de la moderniser. L’objectif était de supprimer la dépendance à jQuery, de passer à du JavaScript natif, et de rendre l’outil plus modulaire et maintenable. J’ai également introduit un système de templating avec Handlebars/Mustache, afin de pouvoir générer du contenu dynamique plus facilement.

La gestion des blocs a été entièrement repensée : il fallait que les éléments remplacés ou ajoutés conservent leurs comportements et leurs événements, ce qui m’a poussé à revoir la logique d’attachement des listeners. De plus, j’ai travaillé sur la compatibilité entre deux modes de communication : AJAX, pour des interactions classiques avec le serveur, et WebSockets, pour des mises à jour en temps réel.

Ce projet m’a permis de progresser dans la programmation orientée objet en JavaScript, de mieux comprendre la gestion du DOM dynamique et d’expérimenter la communication temps réel dans une librairie. Même si certaines parties restent expérimentales, cette refonte a transformé Blapy en une librairie beaucoup plus moderne, performante et réutilisable, tout en conservant son objectif principal : offrir une solution simple pour dynamiser un site existant sans framework lourd.

Initialisation du module BlapyBlock de Blapy

export class BlapyBlock {

    /**
     * Constructor of the BlapyBlocks class.
     *
     * Initializes a BlapyBlocks instance with its properties based on the data attributes
     * of the provided HTML element.
     *
     * @constructor
     * @param {Logger} logger - The logger instance for managing debug and error messages.
     *
     * @param {templateManager} templateManager - The template manager instance
     * @example
     * // HTML element with required data attributes
     * // <div id="myBlock"
     * //      data-blapy-container-name="userList"
     * //      data-blapy-update="refresh"
     * //      data-blapy-container-content="users"
     * //      data-blapy-template-file="user-template.html">
     * // </div>
     * const element = document.getElementById('myBlock');
     * const blapyBlock = new BlapyBlocks(element, logger);
     */
    constructor(logger, templateManager) {
        this.logger = logger;
        this.templateManager = templateManager;
        this.blocks = new Map();
        this.intervalsSet = new Map();
        this.blapy = null;

        this.logger.info('BlapyBlocks initialized', 'blocks');
    }

    /**
     * Sets the reference to the main Blapy instance.
     *
     * @param {Object} blapyInstance - The Blapy instance.
     */
    setBlapyInstance(blapyInstance) {
        this.blapy = blapyInstance;
    }

    /**
     * Initializes all Blapy blocks within a container.
     * Compatible with Blapy V1 initialization.
     *
     * @param {HTMLElement} container - The main container element.
     */
    initializeBlocks(container) {
        this.logger.info('Initializing Blapy blocks', 'blocks');

        const blapyContainers = container.querySelectorAll('[data-blapy-container="true"]');

        blapyContainers.forEach(block => {
            const blockName = block.getAttribute('data-blapy-container-name');
            if (blockName) {
                // Only the element is cached
                this.blocks.set(blockName, {
                    element: block,
                    name: blockName
                });
                this.logger.info(`Block registered: ${blockName}`, 'blocks');
            } else {
                this.logger.warn('Block without container name found', 'blocks');
            }
        });
    }