En frameworks como Vue o React, el concepto de reactividad es esencial para proporcionar una experiencia de usuario dinámica y receptiva. Estos frameworks facilitan la creación de componentes que reaccionan automáticamente a los cambios en los datos. Sin embargo, es posible implementar una funcionalidad similar utilizando JavaScript puro (vanilla JS). En este artículo, te mostraremos cómo crear una variable reactiva y actualizar el DOM según los cambios en los datos.

Iniciando con Variables Reactivas

El primer paso es crear una variable reactiva. En este ejemplo, utilizaremos un 'Proxy' de JavaScript para observar los cambios en nuestro objeto de datos. Supongamos que tenemos un campo de entrada en el DOM y queremos que cualquier cambio en este campo actualice automáticamente una sección del DOM que muestra el valor actual del campo de entrada.

¿Qué es un Proxy en JavaScript?

Un 'Proxy' en JavaScript es un objeto que envuelve a otro objeto o función y permite interceptar y redefinir operaciones fundamentales realizadas sobre ellos. Los Proxies pueden controlar el acceso a las propiedades de un objeto, así como gestionar y validar las acciones realizadas sobre el mismo.

¿Para qué se usa un Proxy?

  • Intercepción y redefinición de operaciones: Permite interceptar y redefinir operaciones realizadas sobre objetos y funciones como lectura/escritura de propiedades, invocación de métodos, etc.
  • Validación y filtrado: Se puede utilizar para validar datos antes de que se escriban en un objeto o para filtrar propiedades específicas.
  • Creación de propiedades reactivas: Ayuda en la implementación de reactividad en JavaScript, haciendo posible que los cambios en los datos se reflejen automáticamente en la interfaz de usuario.
  • Handlers personalizados: Permite personalizar la forma en que interactuamos con un objeto según nuestras necesidades específicas. Por ejemplo, podríamos utilizar un proxy para manejar un objeto que almacena datos sensibles y garantizar que solo usuarios autenticados puedan acceder a ciertos campos.

En resumen, un Proxy en JavaScript es una herramienta poderosa que permite controlar y personalizar la interacción con objetos y funciones, ofreciendo una flexibilidad considerable para implementar comportamientos personalizados en nuestras aplicaciones.

Ejemplo Básico

Aquí hay un ejemplo básico para ilustrar cómo podemos hacer esto:

<h1>Variable Reactiva con JavaScript Puro</h1>
<div>
  <label for="inputField">Ingresa un valor: </label>
  <input type="text" id="inputField" />
</div>
<div>
  <h3>Valor Actual:</h3>
  <p id="display"></p>
</div>

Y el código javascript .... 

// Crear un objeto proxy para almacenar el estado
const state = new Proxy(
  { value: "" },
  {
    set: function (target, property, value) {
      target[property] = value;
      // Actualizar el DOM cuando cambie la propiedad 'value'
      document.getElementById("display").textContent = value;
      return true;
    },
  }
);

// Obtener la referencia al campo de entrada
const inputField = document.getElementById("inputField");

// Agregar un evento 'input' para actualizar el estado
inputField.addEventListener("input", function (event) {
  state.value = event.target.value;
});

En este ejemplo, utilizamos un Proxy para crear un objeto 'state' que contiene una propiedad 'value'. Cada vez que se cambia esta propiedad, el Proxy actualiza automáticamente el contenido del párrafo con id 'display'.

Detalles del Código

  • Creamos un 'Proxy' para el objeto 'state' con una propiedad 'value'.
  • Usamos el método 'set' del 'Proxy' para interceptar las asignaciones a 'state.value' y actualizar el DOM.
  • Agregamos un evento 'input' al campo de entrada para que actualice 'state.value' cada vez que el usuario ingrese un nuevo valor.

Al utilizar JavaScript puro, es posible crear una funcionalidad básica de reactividad utilizando Proxies. Aunque este enfoque no proporciona todas las características avanzadas y optimizaciones de frameworks como Vue o React, es una solución ligera para proyectos simples donde solo se necesita una reactividad básica o para comprender como funciona la reactivada en javascript.  

Ejemplo funcional

Ejemplo reactivada de variables con JavaScript puro y usando Proxy   

Patrón de Diseño Observador

El tipo de patrón de programación que se está utilizando para crear reactividad en este caso se llama 'Patrón de Diseño Observador' (Observer Pattern).

El Observer Pattern es un patrón de diseño en el que un objeto, conocido como sujeto, mantiene una lista de sus dependientes, conocidos como observadores, y les notifica automáticamente de cualquier cambio en su estado, usualmente llamando a uno de sus métodos específicos.

  • En el ejemplo anterior, el proxy actúa como el sujeto (subject) que observa los cambios en el objeto de estado.
  • El DOM, específicamente el párrafo con id 'display', actúa como el observador, que es notificado y actualizado automáticamente cuando cambia el estado.

Este patrón es ampliamente utilizado en frameworks de JavaScript como Vue.js y React para gestionar la reactividad y el estado de la aplicación. En estos frameworks, las variables reactivas y los componentes actúan como sujetos y observadores, respectivamente, lo que permite una interfaz de usuario dinámica y reactiva.

Espero que con este tutorial adquieras un poco más de conocimiento y tengas mejores bases para entender esa magia que ocurre detrás de los frameworks y librerías.