¿O JavaScript básico con dos funciones auxiliares?

En este artículo, analizaré cómo desarrollar componentes web reutilizables utilizando la biblioteca Fusor y los beneficios de hacerlo.

Dichos componentes se pueden componer en aplicaciones web completas a la par de las creadas con React, Angular, Vue, Solid, Svelte y otros.

La API de Fusor consta de solo dos funciones principales:

• Crea un elemento DOM envuelto en un objeto especial.
• Actualizar un elemento DOM envuelto en un objeto especial.

Además de algunas funciones menos utilizadas, como:

• Obtener un elemento DOM de un objeto especial.

No necesitas saber nada sobre este objeto especial.

Crear un elemento DOM

Creación vía JSX

import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get

Usamos las funciones API create y get.

Creación alternativa sin JSX

import { div } from "@fusorjs/dom/html";
const message = div("Seconds ", count, " elapsed"); // Create

Actualizar un elemento DOM

import { getElement, update } from "@fusorjs/dom";

let count = 0;
const message = 
Seconds {() => count} elapsed
; // Create

document.body.append(getElement(message)); // Get

setInterval(() => {
  count  = 1;
  update(message); // Update
}, 1000);

Utilizamos la función API actualizar. Actualiza un elemento DOM y todos sus hijos recursivamente. Recupera nuevos valores de los resultados de funciones, haciéndolas dinámicas.

Los hijos, los atributos y las propiedades pueden ser todos dinámicos.

 (toggle ? "on" : "off")} />




Las actualizaciones de DOM se producirán solo si los nuevos valores difieren de los actuales.


  
  
  Configuración de parámetros


La mayoría de las veces, configurarás los parámetros como de costumbre:







Sin embargo, a veces necesitarás distinguir entre atributos y propiedades. Para especificar su tipo, puede agregar los sufijos _a o _p a sus nombres:







Para agregar un controlador de eventos, siempre debes usar un sufijo _e:


 "event handler"} />




Hay tipos adicionales, y algunos de ellos pueden tomar opciones adicionales para garantizar la compatibilidad completa con los estándares W3C:


 "event handler"} />





  
  
  Crear un componente reutilizable


Componga sus componentes utilizando los objetos especiales de Fusor. Encapsule el estado y los parámetros dentro de funciones. Escriba en mayúscula los nombres de sus componentes.

Aquí hay un ejemplo de un componente de botón de conteo:


import { getElement, update } from "@fusorjs/dom";

const CountingButton = (props) => {
  let count = props.count ?? 0; // Init State

  const self = (
     {
        count  = 1;
        update(self);
      }}
    >
      Clicked {() => count} times
    
  );

  return self;
};

const App = () => (
  

    
Three counting buttons
    
);

document.body.append(getElement(App()));




El componente CountingButton actualiza solo parte de su propio elemento DOM sin afectar el resto de la aplicación.

Una vez que comprendas completamente cómo funciona el componente anterior, puedes reescribirlo de una manera un poco más breve y lograr el mismo resultado:


const CountingButton = ({ count = 0 }) => (
   {
      count  = 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  
);




Cada función de devolución de llamada del controlador de eventos recibe dos argumentos: el objeto de evento estándar y el objeto especial actual.

Una vez más, si comprende el ejemplo anterior, consulte la versión más corta del mismo componente:


const CountingButton = ({ count = 0 }) => (
   (count  = 1)}>
    Clicked {() => count} times
  
);




Agregamos la opción de actualización para actualizar el componente después de llamar a la devolución de llamada del controlador de eventos, lo cual es equivalente al ejemplo anterior.


  
  
  Ciclo vital


El último aspecto que debemos comprender antes de sumergirnos en el desarrollo de aplicaciones del mundo real es el ciclo de vida de los componentes.

Consta de sólo cuatro etapas:


Crear el componente

Conectar al DOM

Actualizar el DOM

Desconectar del DOM

import { getElement, update } from "@fusorjs/dom";

const IntervalCounter = ({ count = 0 }) => {
  console.log("1. Create the component");

  return (
    
 {
        console.log("2. Connect to the DOM");

        const timerId = setInterval(() => {
          count  ;
          update(self);
          console.log("3. Update the DOM");
        }, 1000);

        return () => {
          clearInterval(timerId);
          console.log("4. Disconnect from the DOM");
        };
      }}
    >
      Since mounted {() => count} seconds elapsed
    
  );
};

const instance = ;
const element = getElement(instance);

document.body.append(element);
setTimeout(() => element.remove(), 15000);




La propiedad mount tiene una función que se ejecuta cuando el componente se agrega al DOM. Esta función toma un argumento: el objeto especial actual. También puede devolver otra función que se ejecuta cuando el componente se elimina del DOM.

Controlamos totalmente estas cuatro etapas del ciclo de vida. Esto nos permite crear, actualizar y comparar componentes usando métodos personalizados asincrónicos o concurrentes, con diferentes estrategias y fotogramas de animación en mente.


  
  
  Esto concluye el tutorial


Como puedes ver en este tutorial, Fusor es simple, conciso y explícito. La mayoría de las veces, solo utilizará sus dos funciones API. Sin embargo, también ofrece mucho control y flexibilidad cuando es necesario.

Entonces, para responder a la pregunta del título, Fusor es una pequeña biblioteca de JavaScript, no un marco, pero puede lograr los mismos resultados que otros marcos.


  
  
  Empezar a codificar


Todos los ejemplos anteriores están disponibles en CodeSandbox.

Además, consulte el ejemplo del reloj analógico SVG.

Aquí hay una aplicación del mundo real.

Proyectos iniciales repetitivos:

Iniciador de JavaScript
Iniciador de TypeScript

  
  
  Gracias