Creación de un Mini Framework Reactivo desde Cero

¿Cómo crear nuestro propio mini framework?

La creación de un mini framework puede parecer una tarea abrumadora al principio, especialmente si eres nuevo en el mundo de la programación. Sin embargo, al romper el proceso en pasos manejables y comprender cómo funcionan los componentes clave, puedes construir tu propio framework sencillo inspirado en uno como Vue.js. Este mini framework se centrará particularmente en la reactividad y el manejo de datos a través de proxies y directivas personalizadas.

¿Cuál es la estructura de nuestro mini framework?

Para comenzar, debemos comprender la estructura básica que adoptará nuestro framework. Inspirándonos en Vue.js, mantendremos una sintaxis que incluye una función data que devuelve un objeto con toda la información necesaria para la aplicación. Nuestro objetivo es crear directivas personalizadas, como pText y pModel, para manejar cómo los datos se muestran en el HTML.

1. Crear un archivo de framework: El primer paso será crear un archivo .js donde desarrollaremos todo nuestro código de framework. Por ejemplo, nombraremos este archivo como platzi.js.

2. Declarar una variable global: Necesitamos una variable global que actúe como el núcleo de nuestra aplicación. Esta variable, llamada Platzi, contendrá las reglas y sintaxis especiales de nuestro mini framework.

3. Definir funciones y clases básicas:

   • createApp: Función central que iniciará la aplicación y retornará una nueva instancia de una clase llamada PlatziReactive.
   • Directivas: Las funciones pText y pModel serán creadas para manejar cómo los datos se interactúan con el DOM.

¿Cómo implementamos la reactividad?

La reactividad es un concepto clave que permite que los cambios en los datos se reflejen automáticamente en la interfaz de usuario (UI). En nuestro framework, implementaremos esta característica utilizando Reflect y Proxy.

Constructor y opciones

En el constructor de nuestra clase reactiva, pasaremos un conjunto de opciones que incluye los datos de la aplicación. A través de estas opciones, definiremos un origen para nuestros datos (similar a data en Vue.js).

class PlatziReactive {
    constructor(options) {
        this.origin = options.data();
    }
    // Otras funciones
}

¿Cómo montamos nuestra aplicación en el HTML?

Para montar nuestra aplicación en el HTML, implementaremos una función mount. Esta función seleccionará todos los elementos que contengan la directiva pText y aplicará la función correspondiente para actualizar el texto en el DOM.

mount() {
    const elements = document.querySelectorAll('[p-text]');
    elements.forEach(element => {
        const propertyName = element.getAttribute('p-text');
        this.updateText(element, this.origin, propertyName);
    });
}

¿Cuál es el propósito de las directivas?

Las directivas son funciones que permiten enlazar y manipular datos directamente en HTML. Nuestra directiva pText se encargará de asignar el innerText del elemento a la propiedad especificada en los datos de la aplicación.

function pText(element, dataTarget, propertyName) {
    element.innerText = dataTarget[propertyName];
}

¿Qué sigue en la evolución del framework?

Hasta este punto, hemos logrado crear una base sólida para una aplicación que puede manejar datos de manera reactiva con la ayuda de proxies. Sin embargo, este origen de datos aún no responde automáticamente a los cambios. En futuras implementaciones, profundizaremos en cómo convertir este origen a algo más dinámico utilizando proxies, creando una interacción más fluida y eficaz entre la lógica de la aplicación y su representación en la UI.

Armar tu propio mini framework no solo es un ejercicio práctico de programación, sino que también te ofrece una valiosa comprensión de los mecanismos internos que hacen funcionar a frameworks populares. A medida que adquieras más experiencia, podrás expandir esta base con funciones más complejas que se adapten a tus necesidades específicas. ¡No te detengas aquí y sigue construyendo e innovando!