Implementando Reflect en MiniVue

A pesar que el profe Samuel lo explica tan bien que logras comprender los conceptos individualmente, siento que el tema en su conjunto, es algo denso para las primeras clases del curso. Volvere a este segmento de reactividad al terminar y quizas teniendo ya el panorama completo, pueda interiorizarlo mucho mejor. Gracias Samuel

En lo personal, ya usaba proxies para programar y sin embargo no logro comprender, de que me sirve el Reflect? No me parece una respuesta valida decir que es mas legible pues el uso de la sintaxis del lenguaje que se usa dia a dia siempre sera mas legible que alguna abstraccion sin un motivo de peso de por que usarlo.

Este articulo me ayudo a entender que proposito o que busca resolver esta utilidad https://www.stefanjudis.com/today-i-learned/the-global-reflect-object-its-use-cases-and-things-to-watch-out-for/

Su ventaja o beneficio es que al proveer metodos que se llaman igual que las trampas del proxy, es posible usar el comportamiento por defecto de la trampa, ejemplo invocar la funcion, acceder a la propiedad, modificar la propiedad, etc. Al usar dicho metodo dentro de cada trampa no tienes que razonar sobre las diferentes sintaxis de cada operacion que deseas invocar.

Yo le veo utilidad a usar el reflect pero solo dentro de cada trampa del proxy, de esa manera es como tener una forma sencilla de hacer forward al comportamiento por defecto sin preocuparse por la sintaxis del lenguaje para una operacion determinada.

"The primary use case of the Reflect object is it to make it easy to interfere functionality of an existing object with a proxy and still provide the default behavior. You can always just use the defined counterpart to the Proxy handler in the Reflect object and can be sure that the default behavior stays the same.

These methods are very convenient because you don’t have to think of syntactic differences in javascript for specific operations and can just use the same method defined in Reflect when dealing with proxies."

Hmmm, no entendí mucho el uso de Reflect, pero por lo que veo es una forma de obtener/asignar valores de un objeto de una forma un poco más limpia. Ya no es tanto de usar las formas nativas de JavaScript, sino que ahora se hace mediante una clase que hace esas asignaciones y devoluciones de valores por nosotros. Digamos que “es otra forma de escribir JavaScript”.
.
Encontré un artículo que lo explica un poco más detallado por si alguien le quiere dar un vistazo: https://javascript.info/proxy
.
También dejo mi repositorio en esta clase ^^
.
https://github.com/RetaxMaster/mini-vue/tree/559612ae94b2173197d79410d31dc372335e34f6

Proxy: El objeto Proxy es usado para definir comportamiento personalizado para operaciones fundamentales.
Reflect: Es un objeto ya construido que provee metodos para operaciones interceptables en JavaScript. Utiliza los mismos metodos o “trampas” que Proxy.

Una diferencia importante es la forma en como se utilizan. Reflext es un objeto que ya esta contruido, y se puede utilizar implicitamente. Mientras que Proxy es necesario construirlo y definir ese comportamiento.

Además, ambas se complementan, pués Reflext puede utilizar las mismas “trampas” de Proxy, pero es este último quien le da más extensión al metodo, osea que es personalizable. En cambio Reflext no, más bien este toma el mismo comportamiento que se programo con Proxy en alguna “trampa” y lo utiliza en sus propias trampas.

Así logré entenderlo, si pueden complementar la respuesta dejen su aporte en los comentarios.

“Reflect es un objecto incorporado que proporciona metodos para interceptar operaciones de javascript. Los métodos son los mismos que los de proxy handlers. Reflect no es un objeto de funciones y por lo tanto no puede ser construido.” https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Reflect

Yo lo entiendo como no usar JavaScript normal y dar por sentado que está cayendo en la trampa (Por ejemplo al hacer target[name] intuir que caerá en la trampa get ) sino usar directamente el método/trampa mediante Reflect (Usar directamente el get con Reflect.get(target, name))

No entiendo el orden del curso jajaj

Sobre el por que la trampa del set no funcionaba dentro del proxy, el motivo es que debes retornar si la operacion de set fue exitosa o no con un booleano. Al hacer return del reflect puedes aplicar el comportamiento por defecto del objeto.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set

"The set() method should return a boolean value.

Return true to indicate that assignment succeeded.
If the set() method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown."

Pude ver que muchos companeros han tenido problemas para entender el codigo. Concuerdo que es algo complicado de entender, pero por eso me puse a estudiar un poco lo que hemos visto hasta el momento y quise aportar mis notas, espero sean de ayuda.

Platzi.js

class PlatziReactive {
  constructor(options) {
    this.origin = options.data(); // Origin, lee el contenido del data() en html

    // Destino
    // La variable this.$data crea un proxy que copia la informacion que tenemos en la variable this.origin, luego ejecutamos las trampas

    this.$data = new Proxy(this.origin, {

      // Name es el nombre de la key, en este caso la key es message, el target es el elemento (la key y el value, es decir el {message: "Hola platzi"})
      
      // get es un metodo traer el valor de una propiedad.
      get(target, name) {
        if (name in target) {

          // Busca entre los targets para ver si el name existe entre alguno de los targets y si es asi retorna el target que tenga ese name.
          
          return target[name];
        }
        console.warn("La propiedad", name, "no existe");
      }
    });
  }


// Mount ejectuta todo el este codigo cuando montamos la aplicacion en el HTML
  mount() {

    /* El siguiente codigo  selecciona todos los elementos que tengan el atributo p-text (Por eso usa el querySelectorAll("*[p-text]"))
    
    Luego recorre cada elemento que tiene el atributo p-text (ese elemento se representa con el nombre "el", porque asi se llama el parametro de la arrow function) y ejecuta el metodo pText.
    
    Luego, le pasa a la funcion pText los parametros, es decir el elemento HTML (el), los datos (this.$data) y con el.getAttribute("p-text") obtiene el valor del atributo p-text, es decir lo que escribimos dentro de las comillas en p-text=""(getAtribute selecciona lo que esta entre comillas)

    Despues de esto, la funcion pText ya tiene todos sus argumentos para funcionar

    */
    document.querySelectorAll("*[p-text]").forEach((el) => {
      this.pText(el, this.$data, el.getAttribute("p-text"));
    });


    /* El siguiente codigo  selecciona todos los elementos que tengan el atributo p-model (Por eso usa el querySelectorAll("*[p-model]"))
    
    Luego recorre cada elemento que tiene el atributo p-model (ese elemento se representa con el nombre "el", porque asi se llama el parametro de la arrow function) y ejecuta el metodo pModel.

    Luego, le pasa a la funcion pModel los parametros, es decir el elemento HTML (el), los datos (this.$data) y con el.getAttribute("p-model") obtiene el valor del atributo p-model, es decir lo que escribimos dentro de las comillas en p-model="" (getAtribute selecciona lo que esta entre comillas)

    Despues de esto, la funcion pModel ya tiene todos sus argumentos para funcionar
    */
    document.querySelectorAll("*[p-model]").forEach((el) => {
      const name = el.getAttribute("p-model");
      this.pModel(el, this.$data, name);

      el.addEventListener("input", () => {
        this.$data[name] = el.value;
      });
    });
  }

  /** 
   * Esta funcion recibe el elemento HTML al que le queremos agregar texto, luego el target que es {message: "Hola platzi"} y usa name para saber que tiene que seleccionar el cotenido de message (es decir "Hola platzi")
   * 
   * Luego de obtener ese contenido, se lo pasa al innerText del elemento que seleccionamos
   * 
   * @param {String} el
   * @param {String} target
   * @param {String} name
  */
  pText(el, target, name) {
    el.innerText = target[name];
  }

  /** 
   * Esta funcion recibe el elemento HTML al que le queremos agregar texto, luego el target que es {message: "Hola platzi"} y usa name para saber que tiene que seleccionar el cotenido de message (es decir "Hola platzi")
   * 
   * Luego de obtener ese contenido, se lo pasa como valor al elemento que seleccionamos (por lo general a un input)
   * 
   * @param {String} el
   * @param {String} target
   * @param {String} name
  */
  pModel(el, target, name) {
    el.value = target[name];
  }
};

// Esta variable contiene las funciones que podemos importar en el html
var Platzi = {
  // createApp instancia la clase PlatziReactive y le pasamos options como parametro, las options seria el objeto que le pasamos en HTML
  createApp(options) {
    return new PlatziReactive(options); 
  }
};

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hola mundo</title>
</head>
<body>
  <div id="app">
    <span p-text="message"></span>
    <input type="text" p-model="message" />
  </div>

  <script src="./platzi.js"></script>
  <script>
    const { createApp } = Platzi; // Aqui importamos el metodo createApp que definimos en la variable platzi

    const app = createApp({ // Este objeto equivale al parametro options que definimos en platzi.js
      data() {
        return {
          message: "Hola platzi!",
          greeting: "Hola"
        }
      }
    });
    app.mount();
  </script>
</body>
</html>

Referencias:

Para el proxy get: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get

Para el.getAttribute(): https://www.w3schools.com/jsref/met_element_getattribute.asp

Es como que muy denso este tema para las primeras clases, pero espero entenderlo despues vere todo el curso y volvere a estas clases, exito a todos…!!

Que denso estas primeras clases, explica bien, lo basico, pero ufff esto es avanzado, muy importante para conocer de fondo Vue desde el principio

La purita verdad, volvere, porque aunque creo q entendi el concept, en codigo si me dejo medio loco

Reflect es un espejo de lo que son los Proxys, con reflect se pueden colocar las mismas “trampas” que con proxys ya que cuentan con los mismos métodos.

Su principal objetivo es tener un código más legible y con esto ayudar a que sea más fácil de seguir.

Les comparto la forma en la que se me hizo fácil interpretarlo para mi:

El Reflect efectua la acción normal que hayamos definido, por ejemplo
delete object.c hace lo mismo que Reflect.deletePrpoerty(target,“c”) Pero con el GRAN PLUS de que ejecutamos el método delete() de nuestro Proxy
Espero les sea de ayuda 😃

Con Reflect tenemos y podemos usar los mismo métodos de un Proxy sin que sea un Proxy, si? También podríamos si usar Proxys, si?

hola a alguien le sale el siguiente error , esta todo declarado tal cual los videos pero sale ese error incluso si copio y pego el código de los archivos.
Uncaught SyntaxError: missing ) after argument list
(index):16 Uncaught ReferenceError: Platzi is not defined
at (index):16
(anonymous) @ (index):16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
        <!--va a contener la precentacion el v-text va conecta la informacion de manera dinamica hacia 1 inertext dinamicao-->
        <span p-text="message"></span>
        <br/>
        <input type="text" p-model="mesagge">        
    <script src="/platzi.js"></script>    
    <script>
      const { createApp } = Platzi;
       const app = createApp ({
        data (){ //retorna el ojeto
            return {
			message: "Hola Platzi!"
		    };
        }
       });
       app.mount(); // la ap debe ser montado en algun elemento de html
    </script>
    
</body>
</html>```

class PlatziReactive {
/*
options:
data() => { … }
*/
constructor({ options }) {
this.origen = data();

  // Destino
  this.$data = new Proxy(this.origen, {
    get(target, name) {
      if (name in target) {
        return target[name];
      }
      console.warn("La propiedad", name, "no existe");
      return "";
    },
    set() {}
  });
}

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

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

pModel() {}

}

var Platzi = {
createApp(options) {
return new PlatziReactive(options);
}
};```

el Reflect siempre va a usarse en conjunto con los proxies?

sadlfjsdñfjsdñlkjfgsdñlfkgsñldkfg
amazing class!