Creando tu primer mini framework reactivo

Aprende a construir un mini framework reactivo inspirado en Vue para entender, desde cero, cómo se conectan la información y la presentación con directivas simples. Verás cómo preparar un origen de datos, crear un objeto global, definir directives como p text y preparar el mount sin usar Virtual DOM.

¿Cómo crear un mini framework reactivo al estilo Vue?

La idea es replicar la sintaxis de Vue: una función data que retorna un objeto y una función create app que inicializa la app. En lugar de montar en un div, se monta en todo el HTML para enfocarnos en la reactividad y no en el Virtual DOM.

• Se define un objeto global Platzi con un método create app que retorna una nueva instancia de una clase PlatziReactive.
• La clase recibe options, ejecuta options.data() y guarda ese resultado como origen de la información.
• Se prepara un método mount que «populará» el DOM con los valores iniciales.

Ejemplo de estructura base:

// platzi.js
const Platzi = {
  createApp(options) {
    return new PlatziReactive(options);
  }
};

class PlatziReactive {
  constructor(options) {
    this.$options = options;
    // origen: el resultado de ejecutar data()
    this.$data = options.data();
  }

  mount() {
    // se monta en todo el HTML, no en un contenedor específico
    document.querySelectorAll('[p-text]').forEach(el => {
      this.pText(el, this.$data, el.getAttribute('p-text'));
    });
  }

  pText(el, target, name) {
    el.innerText = target[name];
  }
}

En este punto ya existe un flujo de datos unidireccional: del origen al DOM. Aún no hay respuesta a cambios posteriores, pero la base está lista.

¿Qué estructura base tiene el objeto global platzi?

El objeto global Platzi concentra la «sintaxis especial» del framework. Su método create app instancia PlatziReactive y le pasa options. Así se logra una API clara y familiar si vienes de Vue.

¿Cómo se define el origen con data?

El origen nace de ejecutar options.data(). Es el objeto que contiene todas las propiedades que se mostrarán en la interfaz. Este objeto es el punto de partida para la reactividad.

¿Dónde se monta la app sin virtual dom?

Se decide montar «de manera general» en todo el HTML. La intención es enfocarse en el comportamiento reactivo y evitar la complejidad del Virtual DOM.

¿Qué son y cómo funcionan las directivas p text y p model?

Las directivas son funciones. Aquí se crean p text y p model; primero se implementa p text para vincular texto del DOM con el origen. p model se añadirá después para manejo bidireccional.

• p text recibe el elemento, el target (origen) y el name de la propiedad.
• Obtiene el nombre de la propiedad desde el atributo p-text con getAttribute.
• Asigna el valor con innerText para reflejar la información en pantalla.

Ejemplo del flujo con la directiva:

mount() {
  const nodes = document.querySelectorAll('[p-text]');
  nodes.forEach(el => {
    const propName = el.getAttribute('p-text');
    this.pText(el, this.$data, propName);
  });
}

pText(el, target, name) {
  el.innerText = target[name];
}

Así se logra que, al iniciar, todos los nodos con p-text muestren el valor correcto desde $data. Si cambias el valor inicial en data, verás el cambio reflejado al cargar.

¿Qué habilidades y conceptos se practican con esta base?

• Reactividad: conectar presentación y datos desde un origen único.
• Directivas: funciones que vinculan atributos del DOM con propiedades del estado.
• Selección del DOM: uso de querySelectorAll('[p-text]').
• Atributos y contenido: getAttribute para leer, innerText para escribir.
• API inspirada en Vue: create app, data, clase PlatziReactive.

¿Cómo se conecta la reactividad con proxies y reflect?

Hasta aquí, el origen no reacciona a cambios posteriores. El siguiente paso es envolver ese objeto en un Proxy para crear un destino que se comporte como el origen, pero obedeciendo reglas personalizadas. Con el apoyo de Reflect, será posible interceptar lecturas y escrituras y activar actualizaciones en pantalla.

• Proxy permitirá escuchar accesos y mutaciones al estado.
• Reflect facilitará operaciones seguras y consistentes sobre el objeto.
• Destino será la versión reactiva del origen con las reglas que definamos.

¿Quieres que profundicemos en la implementación del Proxy o en la directiva p model? Cuéntalo en los comentarios y qué te gustaría ver primero.